How to install Progressive Web App for Desktop ?

When talking of Progressive Web Apps (PWAs), mobile applications are the first thing that comes to mind since it’s always been the case that way. However, as time is changing, major browsers such as Chrome with their PWA initiatives are now breaking into the Desktop market, expanding the seemingly unlimited potential of PWAs even more.

From Chrome 70 onwards, users can now install Desktop Progressive Web Apps on Windows & Linux. Once installed, they’re launched from the Start menu, and run like all other installed apps, without an address bar or tabs.

Desktop PWA is undeniably the next revolutionary step in the web-app interaction and functionality. In order to be ahead of your competition, companies must embrace the PWA movement now and stay alert of the changing trend in web/app development.

Here’s how you can allow users to save your website as Desktop Application :

Create manifest.json

{
  "short_name": "SHORT_NAME_FOR_YOUR_APP",
  "name": "YOUR_APP_NAME",
  "theme_color": "#337ab7",
  "background_color": "#337ab7",
  "display": "standalone",
  "description": "APP_DESCRIPTION",
  "icons": [
    {
      "src": "https://domain.com/favicon/favicon-48x48.png",
      "type": "image/png",
      "sizes": "48x48"
    },
    {
      "src": "https://domain.com/favicon/favicon-96x96.png",
      "type": "image/png",
      "sizes": "96x96"
    },
    {
      "src": "https://domain.com/favicon/apple-icon-144x144.png",
      "type": "image/png",
      "sizes": "144x144"
    },
    {
      "src": "https://domain.com/favicon/android-icon-192x192.png",
      "type": "image/png",
      "sizes": "192x192"
    }
  ],
  "start_url": "/"
}

 

Create service_worker.js

importScripts(
  "https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js"
);
const plugin = maxEntries => {
  return [
    new workbox.expiration.Plugin({
      maxEntries: maxEntries,
      maxAgeSeconds: 7 * 24 * 60 * 60
    }),
    new workbox.cacheableResponse.Plugin({
      statuses: [0, 200]
    })
  ];
};

workbox.precaching.precacheAndRoute([
  {
    "url": "offline.html",
    "revision": "251c61f7b7ea7556054e7d60cab8611f"
  }
]);


const networkFirstHandler = new workbox.strategies.NetworkFirst({
  cacheName: "cache-name",
  plugins: plugin(10)
});

const FALLBACK_URL = workbox.precaching.getCacheKeyForURL("/offline.html");
const matcher = ({ event }) => event.request.mode === "navigate";
const handler = ({ event }) =>
  networkFirstHandler
    .handle({ event })
    .then(response => response || caches.match(FALLBACK_URL))
    .catch(() => caches.match(FALLBACK_URL));

workbox.routing.registerRoute(matcher, handler);

Register service_worker in the webpage

<script type="text/javascript">
    // Initialize the service worker
    if ('serviceWorker' in navigator) {
        window.addEventListener('load', () => {
            navigator.serviceWorker.register('/service_worker.js')
                .then((reg) => {
                console.log('Service worker registered.', reg);
                });
        });
    }

</script>

Follow the following video for complete guidance :