15

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

Site cannot be installed: does not work offline

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

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

谁能建议这个错误可能是由什么引起的？

4

2 回答 2

34

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

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

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

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

于 2017-10-03T09:12:24.617 回答
34

更新：

看起来谷歌也接受了快速破解，警告又回来了。

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

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

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

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

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

   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

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

原答案：

您还需要fetch在服务工作者文件中定义侦听器：

this.addEventListener('fetch', function (event) {
    // it can be empty if you just want to get rid of that error
});
于 2018-04-23T20:21:54.150 回答