The simplest service worker for a Web App Manifest

Question

I must confess that I have no idea what a service worker is (TL;DR), but after reading around in the internet and SO, it seems that to have a Web App Manifest properly working, you need one.

Do I really need this extra script (service worker) to have the homescreen option on Android with Web App Manifest?

This is my /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"
}

I have this in the head section

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

And to serve my /manifest.webmanifest I set the content header to application/manifest+json

But Google Dev Tools on Application -> Manifest, tells me:

Here is a simple example I wrote before, hope it will be helpful to you, https://github.com/januwA/web-app-manifest — januw a, Mar 19 '20 at 01:05
@januwa great `:)` Therefore you just need [this](https://github.com/januwA/web-app-manifest/blob/master/sw.js) as service worker? Really? Please add your example as an answer such that I can make it the solution. — João Pimentel Ferreira, Mar 19 '20 at 09:06
@januwa oh, I see, you also have some extra scripts on `index.html`. Could you kindly just tell me what is really essential? — João Pimentel Ferreira, Mar 19 '20 at 09:14
1. Have a web application manifest file manifest.json 2. Have a service worker registered on your website 3. Provided over HTTPS (this is a requirement to use service workers) 4. Be visited at least twice, with at least five minutes between visits — januw a, Mar 19 '20 at 09:36
@januwa I did 1. and it's working. I have 3. working properly. 4. it's easy. I don't know how to implement 2. That was my OP — João Pimentel Ferreira, Mar 19 '20 at 21:21
@januwa do you need [this script](https://github.com/januwA/web-app-manifest/blob/master/index.html#L43-L53) on your repo? — João Pimentel Ferreira, Mar 19 '20 at 21:28
Yes, I found the URL I studied previously https://web.dev/customize-install/ — januw a, Mar 20 '20 at 12:13

score 8 · Accepted Answer · edited Jan 25 '23 at 02:06

Following the instruction on the comments I did the following:

Add a very simple /serviceWorker.js file at the url root, like this:

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

Load the following piece of code either by embedding it on html head tag or loading it within a JS file after the event onload is triggered

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

Then the manifest.json as stated in the original post will work as expected

Based on this example: https://github.com/januwA/web-app-manifest

score 1 · Answer 2 · answered Mar 19 '20 at 00:58

1

To get clarity about how all this fits together, head to https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps

answered Mar 19 '20 at 00:58

NinaW

638
3
7

1

I read it and on the [requirements](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Installable_PWAs) it says I need a service worker. How do I get one? – João Pimentel Ferreira Mar 19 '20 at 09:03
Service worker is javaScript code to cache the assets of a website. You need to create a service worker file and then register it in your main file. The code is explained in the 'Making PWAs work offline with Service workers' section. – NinaW Mar 19 '20 at 10:42

The simplest service worker for a Web App Manifest

2 Answers2