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

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

0 голосов
/ 19 марта 2020

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

Действительно ли мне нужен этот дополнительный сценарий (работник службы), чтобы иметь возможность рабочего стола на 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 на Приложение -> Манифест , говорит мне: enter image description here

Ответы [ 2 ]

1 голос
/ 26 марта 2020

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

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

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);
    });
}

Затем манифест. json, как указано в Оригинальный пост будет работать как положено

На основании этого примера: https://github.com/januwA/web-app-manifest

0 голосов
/ 19 марта 2020

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

...