Vue PWA刷新后未获取新内容

Question

我是Vue的新手，并使用PWA Service-worker插件创建了一个项目。部署新版本的App后，我会在控制台中收到以下消息：

刷新页面（F5）后，这些消息仍然以相同的方式出现，并且该应用程序仍处于旧状态。我尽一切努力清除缓存，但仍然无法加载新内容。

创建项目后，我没有更改默认配置的任何内容，也没有添加任何与serviceworker交互的代码。怎么了？我想念什么吗？

Answer 1

正如我所发现的，这个问题实际上仅与PWA中的初学者有关，他们不知道您可以（并且需要）配置PWA以实现此目的。如果您现在感觉已解决（并使用VueJS），请记住：

要自动下载新内容，您需要来配置PWA。就我而言（VueJS），这是通过在项目的根目录中创建文件vue.config.js（与package.json处于同一级别）来完成的。

在此文件中，您需要以下内容：

module.exports = {
    pwa: {
        workboxOptions: {
            skipWaiting: true
        }
    }
}

如果检测到，将自动下载您的新内容。 但是，该内容仍不会显示给您的客户端，因为它需要在下载内容后刷新。我是通过在window.location.reload(true)目录中的registerServiceWorker.js上添加src/来实现的：

updated () {
    console.log('New content is available: Please refresh.')
    window.location.reload(true)
},

现在，如果Service Worker检测到新内容，它将自动下载并随后刷新页面。

Answer 2

我想出了另一种方法，到目前为止，我发现它很好用。

updated() {
      console.log('New content is available; please refresh.');
      caches.keys().then(function(names) {
        for (let name of names) caches.delete(name);
      });
    },

这里发生的事情是，当在服务工作者中调用更新的函数时，它将遍历并删除所有缓存。这意味着如果有更新，您的应用程序启动速度会变慢，但如果没有更新，它将为缓存的资产提供服务。我更喜欢这种方法，因为服务人员可能很容易理解，并且除非您知道它的作用和副作用，否则不建议使用skipWaiting（）进行阅读。这也适用于我当前使用的injectManifest模式。

Answer 3

传递 registration 参数然后使用 update() 。 参数使用 ServiceWorkerRegistration API

updated (registration) {
  console.log('New content is available; please refresh.')
  registration.update()
},