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.
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.
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.
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.