Самый простой сервис-воркер для манифеста веб-приложения

Question

Должен признаться, что я понятия не имею, что такое сервис-воркер (TL;DR), но после чтения в Интернете и SO мне кажется, что для правильной работы манифеста веб-приложения он вам нужен.

Действительно ли мне нужен этот дополнительный скрипт (сервисный работник), чтобы иметь опцию домашнего экрана на 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 сообщает мне:

Answer 1

Следуя инструкции в комментариях, я сделал следующее:

Добавить очень простой /serviceWorker.js файл в корневом URL-адресе, например:

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

Загрузите следующий фрагмент кода, встроив его в html head тег или загрузка его в файл JS после запуска события onload

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

Answer 2

Чтобы понять, как все это сочетается, перейдите на https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps.