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
        }
    }
}

如果检测到，它将自动下载您的新内容。 但是，内容还不会显示给您的客户端，因为下载内容后需要刷新。我通过将

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

Answer 4

对于那些遇到同样问题的人，这是 2024 年的最新解决方案，对我来说效果很好。

// vue.config.js
...
    pwa: {
        workboxOptions: {
            skipWaiting: true, // force to activate the latest service worker
            clientsClaim: true // force auto reload when service worker is activated
        }
    }
...

如果您在 PWA 中使用 vite，this 也可能对您的配置有所帮助。

// vite.config.js

VitePWA({
  registerType: 'autoUpdate'
})

希望这有帮助！