如何重新加载PWA缓存？-角11 PWA，Chrome Android

Question

在过去的几天里，我一直在努力在我的角11应用程序中加载一个新的PWA版本。开始拔出我的头发！

这对我来说是不可能的

“每次用户打开或刷新应用程序时，专业服务工作者都会通过查找ngsw.json清单的更新来检查应用程序的更新。如果找到更新，将自动下载和缓存更新，并在下次加载应用程序时提供服务。”` 生产中的角质服务工人。

我使用的是SwUpdate.checkForUpdate()，它工作得很好，并在新版本可用时检测并提示用户重新加载。该应用程序是重新加载，并在新的版本，这是完美的。

但是，如果我关闭手机上的应用程序，然后重新打开它，总是会回到安装PWA时的第一个版本:(

我试过SwUpdate.activateUpdate() window.location.reload()，更改版本号，定制服务人员.等等

唯一有效的方法是清除Chrome中的浏览数据，并重新安装PWA：

没有什么是我能做的，这将导致PWA缓存被更新的新版本。它正在获得新版本，但是缓存没有被更新。

有人能给我指明正确的方向吗？我遗漏了什么？

Android 10，Chrome 89.0.4389.105

Answer 1

主要问题是index.html的最长30天到期.在我看来，安卓上的Chrome首先从标准的浏览器缓存加载，然后再进入pwa缓存。

这不是在Chrome桌面上发生的，只是我测试的Android。

我通过以下方式解决了这个问题：

1. 在index.html (服务器端)上设置一个短的最大年龄到期时间

根据您的情况，可能没有必要执行其他步骤：

1. 将index.html从ngsw.config.json中移除以强制从网络加载。
2. 自定义服务工作人员为“您离线”消息提供服务(见下文)

自定义服务工作者，在app.module.ts中

ServiceWorkerModule.register('./offline-service-worker.js', { enabled: environment.production }),

offline-service-worker.js文件：

const CACHE_NAME = 'offline';
const OFFLINE_URL = '/assets/offline-page.html';

self.addEventListener('install', (event) => {
  event.waitUntil((async () => {
    const cache = await caches.open(CACHE_NAME);
    await cache.add(new Request(OFFLINE_URL, {cache: 'reload'}));
  })());
});

self.addEventListener('activate', (event) => {
  event.waitUntil((async () => {
    if ('navigationPreload' in self.registration) {
      await self.registration.navigationPreload.enable();
    }
  })());
  self.clients.claim();
});

self.addEventListener('fetch', (event) => {
  if (event.request.mode === 'navigate') {
    event.respondWith((async () => {
      try {
        // First, try to use the navigation preload response if it's supported.
        const preloadResponse = await event.preloadResponse;
        if (preloadResponse) {
          return preloadResponse;
        }

        const networkResponse = await fetch(event.request);
        return networkResponse;
      } catch (error) {
        // catch is only triggered if an exception is thrown, which is likely
        // due to a network error.
        // If fetch() returns a valid HTTP response with a response code in
        // the 4xx or 5xx range, the catch() will NOT be called.
        console.log('Fetch failed; returning offline page instead.', error);

        const cache = await caches.open(CACHE_NAME);
        const cachedResponse = await cache.match(OFFLINE_URL);
        return cachedResponse;
      }
    })());
  }
});

importScripts('./ngsw-worker.js');

整个PWA是一件棘手的事情。但当它起作用的时候很棒！