Hey @nicostv2, I have DMed you the instructions as per your request, but for anyone else who’s interested:
PWA is something that once you learn, you should be able to implement to almost any of your projects because the code is same for each PWA, no matter what the application does. I’ll be able to give you a template that you can add to your website, and thus, create a PWA.
A PWA contains 4 essential things:
-
manifest.json
: it is more like the config file of the PWA
-
sw.js
: PWAs use Service Workers to cache assets and make them progressive
- some JS code to register the service workers
- a file full of logos of your website each one of a different dimension for each device.
We’ll create a manifest.json
first.
- First things first, you should have a 512x512 sized logo for the PWA. Go to https://app-manifest.firebaseapp.com/ and then fill in all the details. Make sure to leave ‘Orientation’, ‘Start URL’ and ‘Application Scope’ as it is. As for the display mode, I recommend you choose ‘Standalone’ as that is what makes the PWA a PWA
but you’re free to choose whatever you like. Then on the right side, upload the icon and you’ll get to download a ZIP file which contains your logo with different dimensions along with the manifest.json
file with all the values we entered.
If you change the location of the logos, make sure to update their paths in manifest.json
as well, because the manifest.json has each of the logos (of different sizes) with their urls.
- Now for some JS! Create a file named
sw.js
or anything that indicates that the files is a service worker.
Copy this code into your sw.js file:
const staticCacheName = 'name-of-pwa';
const assets = [
'./scripts.js',
'./style.css',
'./https://cdn.jsdelivr.net/npm/marked/marked.min.js'
];
self.addEventListener('install', evt => {
evt.waitUntil(
caches.open(staticCacheName).then((cache) => {
console.log('caching shell assets');
cache.addAll(assets);
})
);
});
self.addEventListener('activate', evt => {
evt.waitUntil(
caches.keys().then(keys => {
return Promise.all(keys
.filter(key => key !== staticCacheName)
.map(key => caches.delete(key))
);
})
);
});
self.addEventListener('fetch', evt => {
evt.respondWith(
caches.match(evt.request).then(cacheRes => {
return cacheRes || fetch(evt.request);
})
);
});
In line 2 of the code, you’ll see an array named assets
. And I have included a few urls as an example. In that array, make sure to add all the assets your project uses, such as images, fonts, scripts and styles. What happens is, the service worker will cache all the urls and files listed in the array for a “Progressive Web App”. The third url that I provided in the array is just an example. Also make sure to replace name-of-pwa
on line 1 with the name of your pwa (or any name for identification of the cache).
- Now, we move towards the HTML file. In your main HTML file, before the closing
<head>
tags, add the following code:
<script>
if('serviceWorker' in navigator){
navigator.serviceWorker.register('sw.js')
.then(reg => console.log('service worker registered'))
.catch(err => console.log('service worker not registered', err));
}
</script>
In line 2 of the above code, make sure to replace sw.js
with the file path of the service worker file we created in the above step.
- Then in our HTML file, we also add a link to the
manifest.json
file. Add the following code before the closing <head>
tags:
<link rel="manifest" href="/manifest.json">
Make sure the href
points towards the location of the manifest.json file.
All the above files including the images of different sizes are static assets, so if you have a separate configuration for static assets (like the public
folder for an Express/Node.js setup), make sure to add all the above files into the static directory and make sure the urls everywhere point correctly to the desired file.