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:

Byer

Here is a simple example I wrote before, hope it will be helpful to you, github.com/januwA/web-app-manifest – Steelworks

@januwa great :) Therefore you just need this as service worker? Really? Please add your example as an answer such that I can make it the solution. – Omora

@januwa oh, I see, you also have some extra scripts on index.html. Could you kindly just tell me what is really essential? – Omora

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 – Steelworks

@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 – Omora

@januwa do you need this script on your repo? – Omora

Yes, I found the URL I studied previously web.dev/customize-install – Steelworks

Answer 1

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

Byer

Answer 2

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

Diplocardiac

I read it and on the requirements it says I need a service worker. How do I get one? – Omora

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. – Diplocardiac