4

我在掌握 google chrome 的“Service Workers”和“Manifest.json”方面遇到了一些麻烦。

我的最终目标是当用户通过他们的移动设备在 android 上的 chrome 浏览我的一个网站时，会出现一个“添加到主屏幕”按钮。

所以我有我的 manifest.json，在根目录和<head>标签中我有以下内容：

<link rel="manifest" href="/manifest.json">

当我第一次将它放在 head 标记中，然后转到桌面上 chrome 开发工具中的“应用程序”选项卡时，它看到了 manifest.json 并正确显示了其中的所有信息。然后，只要我浏览到同一域上的不同页面，开发工具就会显示消息“未检测到清单”。

我不知道为什么。很明显，如果我检查页面，转到该<head>部分并找到link rel，我右键单击 manfiest.json 链接并在新选项卡中打开 - 它可以完美加载。我也使用manifest.json 验证器对其进行了验证，它报告“成功：清单有效！”。

为什么会暂时退出？我怎样才能让这个该死的按钮出现？

旁注，我的服务人员代码（再次在 中<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文件中没有任何内容，肯定需要一些代码吗？我发现的教程都没有提到在其中放置任何数据。这很令人困惑。

4

2 回答 2

2

Depending on the type of your application, you will need to include the link tag referencing the manifest on every page, or put the link tag in a component that can be included in every page, like a common header or footer. This is likely why it disappears when you navigate to another page. It sounds like this may not be the issue, if you see it on every page already.

The other issue could be the slash before the manifest.json. When you're on the homepage, adding the slash is referencing the page you're on, but on other pages it may not map to the correct place. You can test this theory in Chrome Dev Tools (Network tab) to see if it is actually finding the manifest on other pages or not. It will have a 404 error and turn red if it isn't finding it. This is more likely the cause of your issue.

Another possibility is I've seen the dev tools NOT find a manifest when there is one, I think because the cache doesn't always update correctly. If this is the case, you can long press on the refresh button (while dev tools is open) and select "Empty Cache and Hard Reload" and that seems to make it pay attention to the manifest being there if it is ignoring it. With the service worker, as far as I understand, registering it is just telling your app that it is there, and it doesn't need to have any code in it to work. The idea is of course to add code later to do things like push notifications and background sync, but that isn't required to register the sw. It is giving the app a heads up that this thing is happening whether or not you choose to use it.

I agree the documentation and tutorials on PWAs is sketchy and even google's docs are hard to wade through. I'm definitely in the same boat with some of this stuff.

There is a great Udemy course on PWAs by Maximilian Schwarzmüller Progressive Web App The Complete Guide which explains the service worker in great detail, what it does and how to use it for practical things in case you'd find it useful. Not sponsored, I've paid for the course myself and got a lot out of it.

于 2018-05-23T17:22:25.857 回答
2

Chrome 不会检测超出初始页面加载的清单（这很糟糕）。如果未检测到 manifest，请关闭 devtool 并重新打开它将强制 Chrome 再次检测 manifest。

于 2018-07-23T18:44:12.637 回答