我在掌握谷歌浏览器的“Service Workers”和“Manifest.json”方面遇到了一些麻烦。
我的最终目标是当用户通过移动设备在 Android 版 Chrome 中浏览我的网站时，出现“添加到主屏幕”按钮。
所以我在根目录和 <head> 中有了我的 manifest.json标签我有以下内容:
<link rel="manifest" href="/manifest.json">
当我第一次把它放在 head 标签中，然后转到桌面上 chrome 开发工具中的“应用程序”选项卡时，它看到了 manifest.json 并正确显示了其中的所有信息。然后，只要我浏览到同一域中的不同页面，开发工具就会显示消息“未检测到 list ”。
我不知道为什么。它显然在那里，如果我检查该页面，请转到 <head>部分并找到 link rel ，我右键单击 manfiest.json 链接并在新选项卡中打开 - 它加载完美。我已经用 manifest.json validator 验证了它也一样，它会报告“成功: list 有效!”。
为什么会暂时掉线？我怎样才能让这个该死的按钮出现？
旁注，我的服务 worker 代码(再次在 <head> 中)如下:
<script type='text/javascript'>
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/js/service-worker.js').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);
});
});
}
</script>
我在控制台中收到消息“ServiceWorker 注册成功”。 但是 service-worker.js 中什么也没有文件，里面肯定需要一些代码吧？我发现的所有教程都没有提到将任何数据放在那里。这令人困惑。
最佳答案
根据应用程序的类型，您需要在每个页面上包含引用 list 的链接标记，或者将链接标记放在可以包含在每个页面中的组件中，例如通用页眉或页脚。这可能就是当您导航到另一个页面时它会消失的原因。听起来这可能不是问题，如果您已经在每个页面上看到它的话。
另一个问题可能是 manifest.json 之前的斜线。当您在主页上时，添加斜杠是指您所在的页面，但在其他页面上它可能不会映射到正确的位置。您可以在 Chrome 开发工具(网络选项卡)中测试这个理论，看看它是否真的在其他页面上找到 list 。如果找不到它，它将出现 404 错误并变为红色。这更有可能是您问题的原因。
另一种可能性是我看到开发工具在有 list 时找不到 list ，我认为是因为缓存并不总是正确更新。如果是这种情况，您可以长按刷新按钮(开发工具打开时)并选择“清空缓存和硬重新加载”，这似乎会让它注意到 list 是否存在，如果它忽略它的话。对于 service worker，据我所知，注册它只是告诉你的应用程序它在那里，它不需要任何代码就可以工作。这个想法当然是稍后添加代码来执行推送通知和后台同步等操作，但这不是注册 sw 所必需的。无论您是否选择使用它，它都会提醒应用程序这件事正在发生。
我同意 PWA 的文档和教程很粗略，甚至谷歌的文档也很难读懂。我肯定和这些东西在同一条船上。
Udemy 有一门很棒的 PWA 类(class)，作者是 Maximilian Schwarzmüller Progressive Web App The Complete Guide其中非常详细地解释了 service worker，它的作用以及如何将它用于实际的事情，以防你发现它有用。没有赞助，我自己支付了类(class)费用并从中受益匪浅。
关于android - 未检测到 list ，我想显示 'Add To Home Screen' 按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47052226/