Or you can get started using my template: https://github.com/dev117uday/pwa-template

In this tutorial, I will be hosting my static web page on GitHub pages

Before we begin, all you need is an HTML page. if you have some CSS/Js files in your project, including them is also explained in this tutorial.

In your project directory, create a file name app.js, and include this in your HTML file by simply adding

<script src=”app.js”></script>

inside the body tag. Then copy-paste the following content in app.js

window.addEventListener('load', async e=> {
  if (‘serviceWorker’ in navigator)
  {
    try
    {
      navigator.serviceWorker.register('sw.js');
    }
    catch(error){
      console.log('failed');
      alert('service worker not found');
    }
  }
});

save this file.

Again in the same project directory, create another file named “sw.js” and add the following code in it. Now here will be using some regular code and core library to create a cache of the website locally, there are other methods to do so like work-box from google, but that’s your choice.

const staticAssets = [
 './',
 './ [name of your, css and .js files like this without the square brackets ] ',
 './app.js',
 './manifest.json',
 './sw.js' 
]

Keep the last three property as it is.
then copy-paste the following code:

self.addEventListener('install', async event => {
 const cache = await caches.open('app-static');
 cache.addAll(staticAssets);
});
self.addEventListener('fetch', event => {
 console.log('done');
 const req = event.request;
 const url = new URL(req.url);
 if(url.origin === location.origin){
  event.respondWith(cacheFirst(req));
 }
 else{ 
  event.respondWith(networkFirst(req));
 }
})
async function cacheFirst(req){
 const cacheResponse = await caches.match(req);
 return cacheResponse || fetch(req);
}
async function networkFirst(req){
 const cache = await caches.open('app-dyanmic');
  try {
   const req = await fetch(req) ;
   cache.put(req,res.clone());
   return res;
  } 
  catch (error) {
  return await cache.match(req);
 }
}

save the file. Next will be generating app manifest, for that onto to this link
of manifest creator

Over there, enter the name of your app, a short-name, you can change the theme color and the background color but somehow those didn’t work for me, so I will suggest keeping the background color of your app icon to be the color of your icon background. Change the display from browser to “standalone” upload the app icon, it should be 512x512 square, for help to go:

image resizer

click generate .zip and download it.

Open the compressed folder, copy the manifest.json, and the icon folder from there and paste them into your projects directory, simple.

Then in your HTML file, inside the head tag, paste the following code

<link rel=”manifest” href=”manifest.json”>

Open manifest.json the in the “start-url” property: change it to the front page of your GitHub page, some tutorial says to leave it “/”, but that didn’t work out for me, changing it to the front page of your website works.

Save everything, sync your repository on GitHub.

To test everything’ is working or not:

open your website the chrome and press ctrl+shift+i and navigate to application tab, if you could find it, click on the >> or >>> in the upper tab and you will find it there
In the application tab, you shouldn’t be seeing any yellow color errors simply, there are sometimes red color errors but test opening your app on your mobile, if everything works just ignore them if you do, then there is some problem with your repository, or your repository settings ( in your repository, settings, go to GitHub pages and select the source to master branch )

In the applications tab, you will see manifest, service worker, cache storage, etc. hit reload.
In local storage and cache storage, there will be some files relates to your website

And you are done ! That’s all you have to if you still face errors, check your repository whether they are sync properly from the proper folder, google it and search for the solution on stack-overflow.

I hope you were successful :
Follow me on :
Github
Linkedin