vue PWA 如何使用预缓存？我仍然收到“页面无法离线工作”答案

【问题标题】：How does vue PWA use the precache? I still get "Page does not work offline"vue PWA 如何使用预缓存？我仍然收到“页面无法离线工作”
【发布时间】：2020-02-27 09:36:26
【问题描述】：

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

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

据我所知，percache 工作正常。

这是否足以让网站在离线模式下工作？

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

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

【问题讨论】：

标签： vue.js service-worker offline-caching

【解决方案1】：

看起来谷歌也接受了快速破解并且警告已经返回。

因此，从 Chrome93（2021 年 8 月）开始，快速破解将不再有效：

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

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

我发现一篇不错的文章提供了一些解决方案，作者提供的第一个是 Network-Falling-Back-To-Cache strategy：

您的 Service Worker 将首先尝试从您的服务器检索资源。然后当它不能这样做时——例如，你离线——从缓存中检索它（如果它存在的话）。

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

您可以在文章中找到所有信息和替代解决方案：

https://javascript.plainenglish.io/your-pwa-is-going-to-break-in-august-2021-34982f329f40

我希望这对未来的访客有所帮助。

补充说明：

使用上面的代码你可能会遇到以下错误：

service-worker.js:40 Uncaught (in promise) TypeError: Failed to execute 'put' on 'Cache': Request scheme 'chrome-extension' is unsupported

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

【讨论】：

我收到了这个警告：The FetchEvent for "http://localhost/app" resulted in a network error response: an object that was not a Response was passed to respondWith().
如果您稍微更改了代码：请确保您在异步函数中使用的是等待而不是 .then()。我不知道您是否替换了上面显示的代码的某些部分。还可以尝试在错误日志中查看您收到的响应。确保您使用的是正确的网址，...

【解决方案2】：

您需要在 serviceworker 中添加此行。它使浏览器误以为该页面将离线工作：

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

【讨论】：

从 Chrome 93 开始，这将不再起作用，谷歌注意到很多 pwa 使用了这个 hack，它不再解决问题！我正在根据我找到的一篇文章发布修复。