Vue.js vue PWA如何使用precache？我仍然得到“我的爱”；“页面无法脱机工作”；

我有一个vue应用程序，我已将其更新为具有PWA功能。它使用firebase消息传递服务，该服务已使用自己的firebase-messaging-sw.js文件覆盖服务工作者。 服务工作者已注册、处于活动状态且正在工作，我已在vue.config.js文件中添加了pwa，以便它生成manifest.json。当您构建应用程序的生产版本时，以下代码将添加到service worker的顶部

importScripts("precache-manifest.7b51ac9589a6dc8041a85d8f1792defa.js", "https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js");

据我所见，percache很好用

这是否足以让站点在脱机模式下工作

我需要自己添加一些缓存管理吗

---

由于我仍然在应用程序清单选项卡下的Chrome开发工具中收到“页面无法脱机工作”错误消息，我遗漏了什么。

您需要在serviceworker中添加这一行。它会愚弄浏览器，使其认为页面将脱机工作：

self.addEventListener('fetch', function(event) {}) // add this to fool it into thinking its offline ready

---

看起来谷歌也注意到了快速黑客攻击，警告又回来了

因此，由于Chrome93（2021年8月）的快速破解，将不再有效：

self.addEventListener('fetch', function(event) {})

解决方案“暂时”有效（因为我们永远不知道谷歌以后会添加什么要求）

我发现了一篇很好的文章，其中提供了一些解决方案，作者提供的第一个解决方案是网络回退到缓存策略：

您的服务人员将首先尝试从服务器检索资源。然后，当它不能这样做时（例如，因为您处于脱机状态），从缓存中检索它（如果它存在）

您可以在本文中找到所有信息和备选解决方案：

我希望这将有助于未来的游客

附加说明：

使用上述代码，您可能会遇到以下错误：

service worker.js:40未捕获（承诺中）类型错误：未能在“缓存”上执行“放置”：不支持请求方案“chrome扩展”

---

此错误是由chrome扩展（如Augury或Vue开发工具）引起的。关闭这两个选项将导致错误消失。

从Chrome 93开始，这将不再起作用，谷歌注意到很多pwa使用了这一技术，它不再解决问题！我正在发布一个基于我找到的一篇文章的修复。你能分享我得到的链接吗？

FetchEvent for“http://localhost/app“导致网络错误响应：一个不是响应的对象被传递到respondWith（）。

如果您稍微更改了代码：请确保您使用的是use wait，而不是。then（）在异步函数中。我不知道您是否替换了上面显示的部分代码。还要尝试在错误日志中查看您收到的响应。确保您正在使用正确的URL。。。

   self.addEventListener('fetch', function(event) {
   event.respondWith(async function() {
      try{
        var res = await fetch(event.request);
        var cache = await caches.open('cache');
        cache.put(event.request.url, res.clone());
        return res;
      }
      catch(error){
        return caches.match(event.request);
       }
     }());
 });