PWA 缓存刷新页面

Question

我的网站的 pwa 有问题。我需要使用服务人员更新缓存，我在互联网上找到了很多代码，但没有一个有效。我必须错过一些东西。

我希望在简单重新加载页面后完成更新，同样当我们点击 PWA 的快捷方式时，所有内容都会自动更新。这是我的清单和我的服务人员以及我使用的代码。

你怎么看？

提前谢谢你

//Manifest -----

{
  "name": "Test",
  "short_name": "Test",
  "lang": "en",
  "start_url": "./index.html",
  "display": "standalone",
  "background_color": "white",
  "theme_color": "white",
  "icons": [{
      "src": "/img/icon-128.png",
        "sizes": "128x128",
        "type": "image/png"
      }, {
        "src": "/img/icon-144.png",
        "sizes": "144x144",
        "type": "image/png"
      }, {
        "src": "/img/icon-152.png",
        "sizes": "152x152",
        "type": "image/png"
      }, {
        "src": "/img/icon-192.png",
        "sizes": "192x192",
        "type": "image/png"
      }, {
        "src": "/img/icon-256.png",
        "sizes": "256x256",
        "type": "image/png"
      }, {
        "src": "/img/icon-512.png",
        "sizes": "512x512",
        "type": "image/png"
      }]
}

-

//Service-Worker -----

var cacheName = 'Test';
var filesToCache = [
  '/',
  '/index.html',
  '/css/style.css',
   ...
];

/* Start the service worker and cache all of the app's content */
self.addEventListener('install', function(e) {
  e.waitUntil(
    caches.open(cacheName).then(function(cache) {
      return cache.addAll(filesToCache);
    })
  );
});

/* Serve cached content when offline */
self.addEventListener('fetch', function(e) {
  e.respondWith(
    caches.match(e.request).then(function(response) {
      return response || fetch(e.request);
    })
  );
});

self.addEventListener('activate', function(event) {
  var cacheKeeplist = ['cacheName'];

  event.waitUntil(
    caches.keys().then(function(keyList) {
      return Promise.all(keyList.map(function(key) {
        if (cacheKeeplist.indexOf(key) === -1) {
          return caches.delete(key);
        }
      }));
    })
  );
});

Answer 1

问题很简单：你的 Service Worker 代码没有更新缓存。

如果您查看fetch 处理程序，它会从缓存或网络返回响应。如果它从网络返回响应，它不会将新版本放入缓存中。

如果您查看install 处理程序，它会缓存列出的所有文件。这些文件（至少看起来如此）都被命名，以便名称在不同版本之间保持相同。含义：您的style.css 始终 style.css 并且当软件缓存它时，它会对缓存的版本感到满意，直到时间结束。它不知道有新版本，因为名称相同。

如何解决这个问题？

您可以修改 SW 代码，以便它始终检查网络是否有新的文件更新（此处的示例：https://serviceworke.rs/strategy-cache-and-update.html）。您可能还希望在每次部署时更改的文件具有唯一名称。

另一种方法是使用为您处理所有这些的库。 Workbox 有多种不同的缓存策略可供选择 (https://developers.google.com/web/tools/workbox/modules/workbox-strategies)。

编辑：如何更新添加到主屏幕的应用程序？

我不完全确定为什么您添加到主屏幕的应用在您再次打开时没有更新。它可能正在运行一些旧版本，但仍然有这个或那个的旧版本。但是，您可以手动强制 Service Worker 检查更新。您可以使用registration.update() 触发检查新版本的 SW 脚本，如果找到，则强制刷新页面 (location.reload()) 或向用户显示通知并请求刷新。此处的文档：https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration/update

如果您有一个用户长时间保持打开的应用程序（在移动设备或浏览器选项卡中），那么自动轮询软件更新可能会很好，例如。一天一次什么的。您甚至可以在每次激活/聚焦选项卡/应用程序时检查更新。频率当然取决于您的应用、用例等。:)