渐进式 Web 应用 "does not work offline" 错误

Question

我已经按照所有可用的指南和示例编写了一个渐进式 Web 应用程序，但是由于某种原因，当我单击 Add to homescreen 按钮时，我不断收到这个神秘的错误：

Site cannot be installed: does not work offline

我的 PWA 和示例之间的主要区别在于，我的 PWA 运行纯粹是在域的非根路径中，所以我不得不在各个地方的配置中添加额外的路径，所以该应用程序仅限于非根文件夹。

Google Lighthouse 网站也没有太大帮助，给出了非常相似的信息。

任何人都可以建议此错误可能是由什么引起的吗？

Answer 1

所以我花了几个小时，但我最终发现在连接到 serviceworker 时需要在客户端 JavaScript 中指定一个必需的 scope 参数，如果它不在根 (/) 路径上运行。

if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('sw.js?v2', {
        scope: '.' // <--- THIS BIT IS REQUIRED
    }).then(function(registration) {
        // Registration was successful
        console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }, function(err) {
        // registration failed :(
        console.log('ServiceWorker registration failed: ', err);
    });
}

您可以在此处查看工作产品：

应用：https://stampy.me/pwgen/
清单文件：https://stampy.me/pwgen/manifest.json
ServiceWorker 文件：https://stampy.me/pwgen/sw.js
应用脚本：https://stampy.me/pwgen/script.js（滚动到底部获取 PWA 代码）

我希望我的痛苦能为别人节省一些时间。

Answer 2

更新：

看起来 Google 也发现了 quick hack，警告又回来了。

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

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

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

我找到了一篇很好的文章，它提供了一些解决方案，作者提供的第一个是 Network-Falling-Back-To-Cache 策略：

your service worker will first try to retrieve the resource from your server. Then when it can’t do that — because for example, you’re offline — retrieve it from the cache (if it exists there).

   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 文件中定义 fetch 侦听器：

this.addEventListener('fetch', function (event) {
    // it can be empty if you just want to get rid of that error
});

渐进式 Web 应用 "does not work offline" 错误

Progressive Web App "does not work offline" error

javascript

android

google-chrome

lighthouse

progressive-web-apps

更新：

原回答：