Question

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

String decodedEquation = new String(Base64.getDecoder().decode(equation), StandardCharsets.UTF_8);

并在这里sw.js：

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

Answer 1

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

详细说明

每当您对代码文件（sw.js除外）中进行更改时。您需要在Service Worker中触发安装和激活事件。为了更新您的更改。

为了触发这些事件，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);
      }
    });
  });
}

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

1 个答案:

详细说明