Vue PWA 刷新后没有获取新内容

Question

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

刷新页面 (F5) 后，这些消息仍然以相同的方式显示，并且应用程序仍处于旧状态。我尝试了一切以清除缓存，但仍然无法加载新内容。

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

Answer 1

据我所知，这个问题实际上只与 PWA 的初学者有关，他们不知道您可以（并且需要）配置 PWA 来实现这一点。如果您现在感觉得到解决（并且使用 VueJS），请记住：

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

在这个文件中你需要这个：

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

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

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()
},