Introduction PWAs ( Progressive Web Apps ) are the hot new thing. Everyone wants to take the advantages of the features provided by PWAs like : Installation on Device ( depending on browser + OS ) Offline Usage Native Features ( Push Notifications, hiding browser UI, custom icons, etc. ) Through this article, I'm going to teach you how to get started with building PWAs on your own by building a very simple PWA ourselves. Check out the GitHub link on my and the demo at . website https://pwa-repo.netlify.com/ Pre-requisites : Have installed. node Make a folder and run inside it to initialize a node project in that folder. npm init -y Run Chrome ( for this tutorial ). 1. Getting Started First things first, create an HTML file to begin with. I'm going to make a simple file called `index.html` which just has `Hello World` in it. This is valid HTML as the browser will insert all the missing tags. Run to run your html in a server environment. Go to in Chrome to see your page. npx serve localhost:5000 Now hit to open the inspector, click on , then just keep the PWA checkbox checked to run a PWA audit on your page. F12 Audits We haven't begun adding PWA features yet, so your app will fail most of the audits. Now let's start fixing the issues so we start building towards a PWA. We see that most failures complain about a manifest file. So let's do that next. 2. Adding a Manifest A manifest file contains all the app-related configuration files that a browser will need during installation, eg, app name, app images, important links, etc. Go to to generate a web-manifest for your website. Fill in any details for `App Name` & `Short Name`. Choose any Display Mode for your app for now , because it isn't supported anymore. Upload any image for the app icon, eg, the below one. https://app-manifest.firebaseapp.com/ except Browser Mode Example Icon Click on to get a zipped file containing icons and the manifest. Unzip the contents into your code directory. So basically your folder structure should look like : Generate .ZIP |
    |-images
    |-index.html
    |-manifest.json But wait, we haven't linked the manifest file with our HTML file yet. Add this content on the top of your index.html < > head < = = > link rel "manifest" href "manifest.json" </ > head This adds a element linking to your . Run the audit again by clearing the screen and running the audit again. head manifest.json Click Here to Clear This time our stats are better, although our app is still not installable due to a missing 🤔. Let's add a next. service worker service worker 3. Adding a Service Worker A service worker allows our PWA to cache files locally for offline usage. It can also act like a router in the browser ( although that part's not in the scope of this tutorial ). Create a file in the same directory with the following content : sw.js self.addEventListener( , {
      self.skipWaiting(); offlinePage = Request( );
      event.waitUntil(
        fetch(offlinePage).then( { caches.open( ).then( { cache.put(offlinePage, response);
          });
      }));
    }); self.addEventListener( , { (event.request.cache === && event.request.mode !== ) { ;
    	}
      event.respondWith(
        fetch(event.request).catch( { caches.open( ).then( { cache.match( );
          });
        }
      ));
    }); // Caches offline page when service worker is installed. 'install' ( ) function event const new '/' ( ) function response return 'app-offline' ( ) function cache return //If any fetch fails, it will show the offline page. 'fetch' ( ) function event if 'only-if-cached' 'same-origin' return ( ) function error return 'app-offline' ( ) function cache return '/' This service worker simply caches the home page when installed, and in case the device goes offline, it returns the home page from the cache. Now, link this service worker with your HTML file by adding the following code to the bottom of `index.html` < > script ( navigator) {
        navigator.serviceWorker
          .register( , { : })
          .then( { .log( + reg.scope
            );
          });
      } if "serviceWorker" in "sw.js" scope "./" ( ) function reg console "Service worker has been registered for scope:" </ > script So, your should look like this index.html Hello World < > head < = = /> link rel "manifest" href "manifest.json" </ > head < > script ( navigator) {
        navigator.serviceWorker
          .register( , { : })
          .then( { .log( + reg.scope
            );
          });
      } if "serviceWorker" in "sw.js" scope "./" ( ) function reg console "Service worker has been registered for scope:" </ > script Running the audits again, you'll see that our app does better this time as compared to the previous runs. The app is installable and also works offline ( try it out with airplane mode ). Now we'll be prompted to install the PWA on desktop & mobile. Install Prompts Check out the GitHub link on my and the demo at . website https://pwa-repo.netlify.com/ However, we're still not done. Solving the rest of the issues in the Audit is an assignment for each one of you. Connect with me and show me your results at @akashtrikon There are several things which can & should be covered in future posts, like : Responsiveness & Mobile Optimizations 📱 Online Deployment 🚀 Push Notifications 📥 More advanced offline strategies ( with Workbox ) 🛠 Be sure to follow me on and ! Twitter GitHub For the GitHub repository and demo links, be sure to check out the blog on . my website

Fetch

Progressive

Twitter

Designing a URL Shortener in Deno

Publishing a JavaScript Library Online: The Definitive Guide

Book a call

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

Building a Minimum Viable PWA [A Step by Step Guide]

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Building React Applications with Deno and AlephJS

Why Being Likable At Work Matters

Windows Sticky Keys Exploit: The War Veteran That Never Dies

Zero People Charged With Online Pirating, Swedish Prosecutor's Office Reports

Is ‘bias for action’ making product managers lazier?

Building React Applications with Deno and AlephJS

Why Being Likable At Work Matters

Windows Sticky Keys Exploit: The War Veteran That Never Dies

Zero People Charged With Online Pirating, Swedish Prosecutor's Office Reports

Is ‘bias for action’ making product managers lazier?

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps