DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 964,423 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Progressive Web Apps: Let’s Make Something Installable
Idukpaye alex
Idukpaye alex

Posted on • Updated on

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.

index.html

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.

manifest.json

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.

main.js

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.

sw.js

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.

sw.js

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.

final.jpge

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.
Buy Me A Coffee

Top comments (0)

Classic DEV Post from 2020:

js visualized

πŸš€βš™οΈ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! πŸ₯³

Happy coding!