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

Posted 2023-02-16

【中文标题】Vue PWA 刷新后没有获取新内容

【英文标题】：Vue PWA not getting new content after refresh

【发布时间】：2019-06-06 07:54:16

【问题描述】：

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

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

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

【问题讨论】：

您是否尝试进入 chrome 开发工具中的应用程序面板并在那里使用清除存储？这在过去对我有用 - developers.google.com/web/tools/chrome-devtools/#application

正如@chrismarx 所说，您需要从 devtools 中清除存储空间，这可能是因为您可能首先使用了缓存。

【参考方案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 检测到新内容，它会自动下载并刷新页面。

【讨论】：

skipWaiting 不推荐用于延迟加载：如果您的 Web 应用延迟加载具有唯一版本控制的资源，例如其 URL 中的哈希，建议您避免使用跳过等待。

请记住，当工作箱插件模式设置为 InjectManifest 时，skipWaiting 选项不可用。

嗯，当添加 workboxOptions 和 window.location.reload 我的应用程序进入了重新加载页面的无限循环:(

那么injectManifest模式下的解决方案是什么？我想自动更新客户端上的服务人员。 @saawsann

@TexasJetter 你找到解决方法了吗！它正在无休止地重新加载页面:(

【参考方案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 模式。

【参考方案3】：

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

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

【讨论】：

对我没有用（只有这个很好用dev.to/drbragg/…