PWA 应用的自动更新解决方案答案

【问题标题】：Auto-update solution for PWA AppsPWA 应用的自动更新解决方案
【发布时间】：2019-09-08 16:18:08
【问题描述】：

我想将我的普通网站变成一个渐进式网络应用程序。为此，一切都结束了。该网站负责，我已经设置了清单。现在最后一部分来找我了。将网站保存到设备缓存的 ServiceWorker。我的问题是我找不到一个简单的解决方案。因为对于我的网站来说，每次我进行更新时用户运行新版本很重要。您是否知道如何让 ServiceWorker 在用户打开应用程序后检查是否有任何更改，然后删除旧缓存并根据新文件和新代码创建一个新缓存？
如果有人可以提供代码示例，那就太好了。
我的 HTML 端：

<script>
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('./sw.js')
    .then(reg => console.log(reg))
    .catch(err => console.log(err));
  }
</script>

这里是 sw.js：

    self.addEventListener('install', event => event.waitUntil(
  caches.open('web_pwa').then(cache => cache.add('/'))
));

self.addEventListener('fetch', event => event.respondWith(
  caches.open('web_pwa')
    .then(cache => cache.match(event.request))
    .then(response => response || fetch(event.request))
));

【问题讨论】：

标签： javascript html progressive-web-apps

【解决方案1】：

简短描述：稍微更新 SW 文件并在 activate 事件中处理删除旧缓存。

详细说明

每当您对代码文件进行更改时（sw.js 除外）。您需要在 service worker 中触发 install 和 activate 事件。为了更新您的更改。

为了触发这些事件，sw.js 甚至应该更新一个位。 （至少一个字符）。

按照惯例，开发人员通过维护版本控制来处理这个问题。 添加和删除缓存也很容易。

const version = 'v2';

self.addEventListener('install', res => {
  caches.open(version).then(cache => {
    cache.addAll(caches);
  });
  console.log('[sw] Installed successfully :');
  // self.skipWaiting();
});

self.addEventListener('fetch', event => event.respondWith(
  caches.open(version)
    .then(cache => cache.match(event.request))
    .then(response => response || fetch(event.request))
));

如果您需要直接更新sw.js 而不考虑用户状态，请取消注释self.skipWaiting()，因为它会跳过等待激活并立即激活。

在activate 事件中，您必须根据缓存版本删除旧缓存。

self.addEventListener('activate', event => {
  caches.keys().then(function(cacheNames) {
    cacheNames.forEach(function(cacheName) {
      if (cacheName !== version) {
        caches.delete(cacheName);
      }
    });
  });
}

【讨论】：