3

我必须承认，我不知道什么是服务人员（TL;DR），但是在互联网上阅读之后，似乎要让 Web App Manifest 正常工作，你需要一个。

我真的需要这个额外的脚本（服务工作者）在带有 Web App Manifest 的 Android 上拥有主屏幕选项吗？

这是我的/manifest.webmanifest：

{
  "short_name": "autocustos",
  "name": "Calculadora dos Custos do Automóvel",
  "icons": [
    {
      "src": "/favicon32x32.png",
      "type": "image/png",
      "sizes": "32x32"
    },
    {
      "src": "/favicon72x72.png",
      "type": "image/png",
      "sizes": "72x72"
    },
    {
      "src": "/favicon114x114.png",
      "type": "image/png",
      "sizes": "114x114"
    },
    {
      "src": "/favicon144x144.png",
      "type": "image/png",
      "sizes": "144x144"
    },
    {
      "src": "/favicon192x192.png",
      "type": "image/png",
      "sizes": "192x192"
    }
  ],
  "start_url": "/PT",
  "scope": "/",
  "background_color": "#F4F6FE",
  "display": "fullscreen",
  "theme_color": "#F4F6FE"
}

我在头部有这个

<link rel="manifest" href="/manifest.webmanifest" crossorigin="use-credentials">

为了服务我，/manifest.webmanifest我将内容标题设置为application/manifest+json

但是 Google Dev Tools on Application -> Manifest告诉我： 在此处输入图像描述

4

2 回答 2

4

按照评论的说明，我做了以下事情：

/serviceWorker.js在 url 根目录添加一个非常简单的文件，如下所示：

self.addEventListener("fetch", function(event) {
  console.log(`start server worker`)
});

通过将以下代码嵌入到 htmlhead标记中或在触发事件 onload 后将其加载到 JS 文件中来加载以下代码

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('./serviceWorker.js')
    .then(function(registration) {
      // Registration was successful
      console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }).catch(function(err) {
      // registration failed :(
      console.log('ServiceWorker registration failed: ', err);
    });
}

然后原始帖子中所述的 manifest.json 将按预期工作

基于此示例：https ://github.com/januwA/web-app-manifest

于 2020-03-25T22:40:53.377 回答
1

要了解所有这些如何组合在一起，请访问https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps

于 2020-03-19T00:58:29.747 回答