How to Develop a Progressive Web App 

This is the PART 2 on Progressive Web Apps (PWAs). If you wanna learn more about why PWAs are so cool and powerdul, read PART 1 first.

PWA is once again a website that you can share to your home screen and use as an app. It can work offline due to caching and it looks and feels like a native app. 

Great news! 

It’s great news to you as a developer, because what it means is that you can use simple HTML, CSS and JavaScript to develop an APP! 

How will you ask? Let’s find out!

STEP 1. Build the backbone of your PWA 

Create your index.html, style.css and app.js files just like you’d do for a normal website. 

STEP 2. Add manifest.json

The manifest is a json file that file that informs the browser about your web app. It is used to specify how the app will look and behave on different devices, and also to enable that “Add to home screen” prompt. 

Step 3. Create serviceWorker.js and register it in app.js

The next requirement is to register a service worker. Service workers are essentially scripts that handle network requests, manage the cache and send push notifications to your users. They are what makes PWAs feel like native apps! 

STEP 4. Test your PWA 

Now that you have your PWA all set and ready, use Google’s Lighthouse to see how well your app conforms to PWA standards. 

This is a very short tutorial to give you an idea of how much (or little) effort it is to create a PWA. Basically, it is not more difficult than creating a normal website. For a very simple functional PWA, you just need to include two special files manifest.json and serviceWorker.js, ad an icon for the home screen and your’re good to go. 

Useful resources and tutorials if you wanna make a PWA:

• Progressive Web Apps (PWA) – The Complete Guide. It is a Udemy course and it is not free, but if you’re lucky you can get if for around 10$ on sale.

• PWAs were proposed by Google in 2015. Here is the official guide from them.
• A very good freeCodeCamp tutorial for beginners.