PWA 缓存刷新页面

Question

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

我希望在简单地重新加载页面后更新完成，同样当我们点击 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已经缓存，它会很乐意与直到时间的尽头缓存的版本”。它不知道有新版本，因为名称相同。

如何解决这个问题？

您可以修改 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

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