Pwa

/* Source: https://www.ibrahima-ndaw.com/blog/how-to-build-pwa-with-javascript */


//HTML File---------------------------------------------
<head>
<link rel="manifest" href="manifest.json">
</head>

//------------------------------------------------------
//manifest.json (Root directory)
{
"name": "My Site",
"short_name": "Site",
"start_url": "index.html",
"display": "standalone",
"background_color": "#fdfdfd",
"theme_color": "#db4938",
"orientation": "portrait-primary",
"icons": [
    {
      "src": "/images/icons/icon-72x72.png",
      "type": "image/png",
      "sizes": "72x72"
    },
    {
      "src": "/images/icons/icon-96x96.png",
      "type": "image/png",
      "sizes": "96x96"
    },
    {
      "src": "/images/icons/icon-128x128.png",
      "type": "image/png",
      "sizes": "128x128"
    },
    {
      "src": "/images/icons/icon-144x144.png",
      "type": "image/png",
      "sizes": "144x144"
    },
    {
      "src": "/images/icons/icon-152x152.png",
      "type": "image/png",
      "sizes": "152x152"
    },
    {
      "src": "/images/icons/icon-192x192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "/images/icons/icon-384x384.png",
      "type": "image/png",
      "sizes": "384x384"
    },
    {
      "src": "/images/icons/icon-512x512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ]
}

//------------------------------------------------------
//script.js (or internal HTML script)
if ("serviceWorker" in navigator) {
window.addEventListener("load", function() {
navigator.serviceWorker
.register("/serviceWorker.js")
.then(r => console.log("Success"))
.catch(x => console.log(x));
});
}

//------------------------------------------------------
//serviceWorker.js (Root directory)
const mySite= "my-site-v1";
const files= [
"/",
"index.html",
"style.css",
"script.js",
"/resources/picture.jpg"
];

self.addEventListener("install", installEvent => {
installEvent.waitUntil(
caches.open(mySite).then(cache => {
cache.addAll(files);
})
);
});

self.addEventListener("fetch", fetchEvent => {
fetchEvent.respondWith(
caches.match(fetchEvent.request).then(res => {
return res || fetch(fetchEvent.request);
})
);
});
//------------------------------------------------------