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

Question

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

我不会这样：

"Every time the user opens or refreshes the application, the Angular service worker checks for updates to the app by looking for updates to the ngsw.json manifest. If an update is found, it is downloaded and cached automatically, and will be served the next time the application is loaded."``` Angular - Service worker in production

我正在使用 Angular 服务 SwUpdate.checkForUpdate()，它运行良好，可以检测并提示用户在新版本可用时重新加载。 app重装了，是新版本，完美。

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

我试过SwUpdate.activateUpdate()window.location.reload()、更改版本号、自定义服务工作者...等等

唯一有效的方法是清除我在 Chrome 中的浏览数据，然后重新安装 PWA :(

我无能为力，无法使用新版本更新 PWA 缓存。正在获取新版本，但未更新缓存。

有人能给我指出正确的方向吗？我错过了什么？

Android10，Chrome89.0.4389.105

Answer 1

主要问题是 index.html 的 30 天最长有效期。在我看来，Android 上的 Chrome 在到达 pwa 缓存 之前首先从标准 浏览器缓存 加载。

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

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

在 index.html（服务器端）

额外的步骤，根据您的情况可能是不必要的：

正在从 ngsw.config.json 中删除 index.html 以强制从网络加载。
自定义 service worker 以提供 'you are offline' 消息（见下文）

自定义服务工作者，在 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 是一件棘手的事情。但是当它工作时很棒！

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

How to reload PWA cache? - Angular 11 PWA, Chrome Android

angular

progressive-web-apps

angular-pwa