All you need to do to turn any website into PWA in 6 steps

Introduction

PWA, short for progressive web-apps is a web application that is optimized to run on mobile devices just like a native app and support functionalities like push notification, working offline, and device hardware access.

PWA is making lots of buzz these days. PWA implementation is not so hard, but a lack of clarity makes it quite complex and first-time developers get stuck.

This guide will take you through the steps to turn any website into Progressive Web App. It will provide you with enough resources to turn your website into a Progressive Web App.

1. Make it responsive

Nowadays making a website is super easy. You don’t even need to use frameworks like bootstrap to do that, native CSS features like flex-box and CSS grid makes development real quick.

Learn about CSS flexbox —

• https://css-tricks.com/snippets/css/a-guide-to-flexbox/
• https://medium.freecodecamp.org/an-animated-guide-to-flexbox-d280cf6afc35

Learn about CSS grid —

• https://css-tricks.com/snippets/css/complete-guide-grid/
• https://learncssgrid.com/
• https://gridbyexample.com/examples/

You can also go with any CSS framework to make the website responsive on smaller screens.

2. Make it accessible

Your app should be accessible to anyone. It should be well optimized for screen readers so that it’s accessible to any user with impairment or disability.

• Add alt tag to the images which precisely describes the content.
• Appropriately manage focus so that important elements can be tabbed. Read more
• User proper systematic elements. If semantic elements are not available to use proper ARIA roles . Read more

3. Optimize the performance

The main purpose of PWA is to make it work efficiently on mobile devices. So its performance should be well optimized to handle network latency.

• Use lazy loading for images to load what’s required. Five ways to lazy load images.
• FixRender Blocking CSS.
• Use task runner to optimize the static assets (HTML, CSS, JS, and Images). Introduction to Gulp

4. Introduce Service Worker

The core heart of the PWA is a service worker. It precaches all the static assets and contains all the logic for offline interaction and behavior. Read more about Service Worker here.

• Register the service worker
• Cache the assets with service worker.

5. Offline Interactions

If your site interacts with backend APIs and you need to perform user interaction offline, this is for you. Read on how service worker handles offline interactions.

• Learn about indexedDB
• Integrate indexedDB with service worker.
• Syn offline data withbackgroud sync.

6. Finalize and test

If you have implemented all that has been suggested, you are ready to test. But before that, you should linkmanifest.json so that the browser knows that your app is PWA. Don’t forget to add all the property in the manifest file. Here is an example of same

Test

You need to install lighthouse plugin to test the app. Install it from here.

• Run the lighthouse to generate the report.
• Go through the report to find what needs to be fixed for a better score.
• Repeat the test until you get a decent score on all the categories.

Congratulation now your site is a PWA 🎉