渐进式Web应用程序“不能脱机工作”错误 [英] Progressive Web App "does not work offline" error

问题描述

我已经编写了一个渐进的网络应用程序，遵循所有可用的指南和示例，但由于某些原因，当我点击添加到主屏幕按钮时，我一直收到这个神秘的错误：

I have written a progressive web app, following all available guides and examples, but for some reason when I click the Add to homescreen button, I keep getting this mysterious error:

Site cannot be installed: does not work offline

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

The major difference between my PWA and the examples, is that mine is running purely in a non-root path of the domain, so I have had to add extra paths to the configs in various places so the app is restricted to the non-root folder.

谷歌灯塔网站也没有多大帮助，给出了非常相似的信息。

The Google Lighthouse site doesn't help much either, giving a very similar message.

任何人都可以建议这个错误可能是由？

Can anyone suggest what this error might be caused by?

推荐答案

所以我花了几个小时，但我最终发现有必要范围您需要参考的参数连接到serviceworker时，如果它没有在root（ / ）路径上运行，则在客户端JavaScript中输入。

So it took me a couple of hours, but I eventually figured out that there is a required scope parameter that you need to specify in the client JavaScript when connecting to the serviceworker, if it's not running on the root (/) path.

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

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

You can see the working product here:

• App： https://stampy.me/pwgen/


• 清单文件： https://stampy.me/pwgen /manifest.json


• ServiceWorker文件： https：/ /stampy.me/pwgen/sw.js


• 应用程序脚本： https://stampy.me/pwgen/script.js （滚动到底部查看PWA代码）

• App: https://stampy.me/pwgen/
• Manifest file: https://stampy.me/pwgen/manifest.json
• ServiceWorker file: https://stampy.me/pwgen/sw.js
• App script: https://stampy.me/pwgen/script.js (scroll to bottom for PWA code)

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

这篇关于渐进式Web应用程序“不能脱机工作”错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！