How to convert your website into a Progressive web app in 5 minutes?

Today I am going to share amazing content that is how you can convert your website into a progressive web app just in 5 minutes using google workbox which is the most recommended technology from google. Without wasting time let’s begin.

This article contains these points.

1-Manifest
2-service-worker
3-APP js file
4-PWA Icons
5-Header Code
6-Testing

1-Manifest.json

First of all, you need to create manifest.json file.It will contain this code. We can change the following thing according to ourselves.

  1. Name
  2. Short name
  3. Description
  4. Theme Color

And leave all things as it is.

{
  "name": "Your App Name",
  "short_name": "App Short Name",
  "description": "App Description",
  "icons": [
    {
      "src": "/pwa/img/192.png",
      "type": "image/png",
      "purpose": "any maskable",
      "sizes": "192x192"
    },
    {
      "src": "/pwa/img/512.png",
      "type": "image/png",
      "purpose": "any maskable",
      "sizes": "512x512"
    }
  ],
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#6C63FF",
  "background_color": "#ffffff"
}

2-Service Worker

A service worker is used to manage the working of the progressive web app at the back end. We use Google workbox for creating PWA so. Create service-worker.js file in the root directory and paste this code into it.

importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.1.2/workbox-sw.js');
const HTML_CACHE = "html";
const JS_CACHE = "javascript";
const STYLE_CACHE = "stylesheets";
const IMAGE_CACHE = "images";
const FONT_CACHE = "fonts";

self.addEventListener("message", (event) => {
    if (event.data && event.data.type === "SKIP_WAITING") {
        self.skipWaiting();
    }
});

workbox.routing.registerRoute(
    ({event}) => event.request.destination === 'document',
    new workbox.strategies.NetworkFirst({
        cacheName: HTML_CACHE,
        plugins: [
            new workbox.expiration.ExpirationPlugin({
                maxEntries: 10,
            }),
        ],
    })
);

workbox.routing.registerRoute(
    ({event}) => event.request.destination === 'script',
    new workbox.strategies.StaleWhileRevalidate({
        cacheName: JS_CACHE,
        plugins: [
            new workbox.expiration.ExpirationPlugin({
                maxEntries: 30,
            }),
        ],
    })
);

workbox.routing.registerRoute(
    ({event}) => event.request.destination === 'style',
    new workbox.strategies.StaleWhileRevalidate({
        cacheName: STYLE_CACHE,
        plugins: [
            new workbox.expiration.ExpirationPlugin({
                maxEntries: 30,
            }),
        ],
    })
);

workbox.routing.registerRoute(
    ({event}) => event.request.destination === 'image',
    new workbox.strategies.StaleWhileRevalidate({
        cacheName: IMAGE_CACHE,
        plugins: [
            new workbox.expiration.ExpirationPlugin({
                maxEntries: 15,
            }),
        ],
    })
);

workbox.routing.registerRoute(
    ({event}) => event.request.destination === 'font',
    new workbox.strategies.StaleWhileRevalidate({
        cacheName: FONT_CACHE,
        plugins: [
            new workbox.expiration.ExpirationPlugin({
                maxEntries: 15,
            }),
        ],
    })
);

3-APP Js File

Create a folder name PWA then create app.js file in this folder just like this /pwa/app.js direct. Paste this code there as it is.

if ('serviceWorker' in navigator) {
    window.addEventListener('load', function () {
        navigator.serviceWorker.register('/service-worker.js');
    });
}

4-App Icons

You need to create logo icons of 512px and 192px in png format. You have to create img folder in PWA and upload these images in this folder. Directory should be like this.

/pwa/img/192.png
/pwa/img/512.png

5-Add code in header

Now you need to add code into your website header.Use this code and it into your website header tag.
You can change theme-color according to your website color.

<meta name="theme-color" content="#6C63FF"/>
<link rel="apple-touch-icon" href="/pwa/img/192.png">
 <script src="/pwa/app.js"></script>
 <link rel="manifest" href="/manifest.json">

6-Testing of files

Now you need to test files are working or not. Your file directory should be like this

/service-worker.js
/manifest.json
/pwa
     /pwa/img/192.png
  /pwa/img/512.png
/pwa/app.js

For this purpose you have to check this directory it is working or not.

Your-domain.com/service-worker.js
Your-domain.com/manifest.json
/pwa
     Your-domain.com/pwa/img/192.png
  Your-domain.com/pwa/img/512.png
Your-domain.com/pwa/app.js

If all things are working fine then congratulations you have build PWA successfully. If you have any kind of issue then you can contact us. Please leave your feedback in the comment section.

Leave a Reply

Your email address will not be published. Required fields are marked *