代码之家 › 专栏 › 技术社区 › João Pimentel Ferreira

Web应用清单的最简单的服务工作线程

web-manifest service-worker

João Pimentel Ferreira · 技术社区 · 4 年前

我必须承认,我不知道什么是服务人员(TL;DR),但是在网上读了一番之后, it seems that 要使Web应用程序清单正常工作,您需要一个。

这是我的 /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">

为我服务 application/manifest+json

应用程序清单 ,告诉我:

0 回复 | 直到 4 年前

João Pimentel Ferreira 4 年前

按照关于评论的指示,我做了以下工作:

添加一个非常简单的 /serviceWorker.js

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

通过将下面的代码嵌入到html中来加载它 head

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