Month: April 2023

1. Create your website code.
2. Create manifest.json in the home directory with below code.

{
  "name": "My One Page PWA",
  "short_name": "PWA",
  "description": "A simple one-page PWA",
  "start_url": "/index.html",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#000000",
  "icons": [
    {
      "src": "icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

3. Link manifest.josn in your project index file.

<link rel="manifest" href="/manifest.json">

4. Create a service-worker.js file.

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('my-cache').then((cache) => {
      return cache.addAll([
        '/',
        '/index.html',
        '/stylesheet.css',
        '/app.js',
        '/icons/img-192x192.png',
        '/icons/img-512x512.png'
      ]);
    })
  );
});

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      return response || fetch(event.request);
    })
  );
});

5. Add the Register the service worker code to your main JavaScript file ( i.e. app.js)

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js')
      .then((registration) => {
        console.log('Service worker registered:', registration);
      })
      .catch((error) => {
        console.error('Service worker registration failed:', error);
      });
  });
}

6. Host your website in HTTPS

7. Test your website via Chrome’s Lighthouse or the Application panel in Chrome DevTools.

Cheers!