Progressive Web Apps: Lets 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.

Lets 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 cant have a PWA. Therefore in the manfest.json file lets fill in the necessary configurations for our PWA.

Lets 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 dont just run for every page refresh, they are installed and activated. So lets cache all our important files for offline use to do this lets 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.