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对其进行缓存时，它将对缓存的版本感到满意，直到时间结束。因为名称相同，所以不知道有新版本。

该如何解决？

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

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

PWA缓存刷新页面

1 个答案: