Progressive Web Apps: Let’s Make Something Installable

A Website with The Right Vitamins

What is a PWA

A Progressive Web App(PWA) is a type of application that exhibits native app-like features, A PWA is installable and has offline support and it is fast than noarmal. A PWA, as I like it to say is a website with all the right vitamins. In this tutorial, we will build a simple PWA that is installable and can work offline.

Let’s Get Started

So create an index.html file, and in the head tag gives it a special link tag to a manfest.json file — we need to file to tell the browser that this is a PWA. I am using materlize.css so I get a nice navbar style.

We need some icons at least these sizes, 192*192,512*512, or else you can’t have a PWA. Therefore in the manfest.json file let’s fill in the necessary configurations for our PWA.

Let’s break it Down!

The ‘name’ property is the name of the application, the description is simply the description of the app, while we have an array of our different icons, (192*192,512*512). The ‘start_url’ is where the application will start from, The ‘display’ property is how we want our app to be displayed — it is set to standalone which means it opens without the browser. Finally, the ‘theme_color’ is simply the color of the borders of the application.

Registering A Service Worker

What we have to do next is to register a service worker; when we register a service worker we can stop requests and cache files for offline use. ServiceWorkders run on a separate javascript thread, and they are very powerful, so we can only use them on **https://,**but the only exception is localhost. In the main.js, which I linked up to the index.html, that is where we will register the service-worker.

So make a file called sw.js. Then, we are going to make an array of the files we want to cache for offline use.

Service-workers have a life cycle, they don’t just run for every page refresh, they are installed and activated. So let’s cache all our important files for offline use to do this let’s listen for the install event.

So what are doing is simply listening for the install event, and self is automatically available to us, because this is a registered service-worker file.

So now, we listen for the fetch event, and we try to respond with what is in the cache or we default fetch that request. That is it. By now, you should have a fully functional installable PWA. Thank you for reading.

PS

IF YOU LIKED THE POST, THEN YOU CAN BUY ME MY FIRST COFFEE EVER, THANKS IN ADVANCE.