渐进式Web应用程序"无法脱机工作"错误

Question

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

Site cannot be installed: does not work offline

我的PWA和示例之间的主要区别在于我的运行纯粹是在域的非根路径中运行,所以我不得不在各个位置添加额外路径到配置,因此应用程序仅限于非root用户夹.

在谷歌灯塔网站没有太大的帮助或者,给人一种非常类似的消息.

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

Answer 1

所以我花了几个小时,但我最终发现,scope当连接到serviceworker时,如果它没有在root(/)路径上运行,则需要在客户端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);
    });
}

你可以在这里看到工作产品:

• 应用程序: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

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

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