How to convert your website into a PWA?
Why should you build a PWA?
Nidhi Kachhawa , 26 March, 2020
For many companies, especially those who are building apps , the cost of developing, testing and maintaining applications for several platforms is difficult.
A Progressive Web App can cut load times, allow users to navigate offline, increase revenue, can be smaller than mobile App, and much more.
Let’s take the example of Whatsapp: when there is no network or no internet connection, we can still open the App, check past messages and even we can reply to someone. When the phone gets internet connection, the messages are automatically sent in the background.
This is what PWA promises to provide in the web apps. It enables apps to load when there is no internet connection, sync in the background and provide native-like experience to the users.
What are the technical components of a PWA?
These components of PWA work together and energizes the regular web app:
- Service Worker: A Service worker is basically a Javascript file that works as a proxy between browser and the network. Service worker runs in the background, manages the push notifications and assists in offline first web application development.
Our web applications talk to the network directly and if there is no network the screen shows the famous no internet connection dinosaur game.
This can speed up the performance of your app, whether the device is connected or not connected to the internet.
- Manifest File: The manifest file is a config JSON file which contains the information of your application, like the icon to be displayed on the home screen when installed, the short name of the application, background color, or theme.
If the manifest file is present, the Chrome browser will automatically trigger the web app install banner, and if the user agrees, this adds the icon to the home screen and the PWA is installed.
The properties:
- name: is the name used in the app.
- short_name: is the name used on the user’s home screen, launcher, or other places where space may be limited.
- start_url: tells the browser where your application should start when it is launched.
- display: it allows us to customize what browser UI is shown when your app is launched. The most used value is standalone: it opens the web app to look and feel like a standalone native app.
- background_color: is used on the splash screen when the application is launched.
- theme_color: it sets the color of the toolbar.
- orientation: t allows to enforce a specific orientation.
- scope: to be honest usually I don’t use this property, but it defines the set of URLs that the browser considers being within your app and often it’s used to decide when the user has left the app.
- icons: when a user adds your site to their home screen, you can define a set of images for the browser to use.
- HTTPS: Service workers have the ability to intercept the network requests and can modify the responses. Service workers perform all the actions on the client side. Hence, PWA requires secure protocol HTTPS.
The service worker has the ability to receive push notifications and background sync, which definitely increases the user experience and keeps the customer engaged. Push notification and background sync are optional, but are recommended to provide a more native-like experience.
Let’s build our PWA step by step:
But before we start, I suggest you install the Lighthouse extension. Lighthouse is a tool given by Google for improving the quality of web pages and from there you can check the issues you need to resolve to improve performance, SEO, accessibility, best practices and PWA of your website.
There are two main steps to turning a simple web application to Progressive Web App: by adding a Web App Manifest and by registering a Service Worker.
- Adding a Web App Manifest
Let’s start adding the manifest.json in the root of your application. Here how our manifest.json will look like:
Now in our index.html, let’s call our manifest.json
This will load the manifest file and identify our site as an application to the browser.
If you click the "Add to homescreen" link, you’ll notice that we’re not able to install our app quite yet because we have not registered our ServiceWorker yet.
- Registering a Service Worker
In the root of your application, create a file sw.js. You can leave it empty for now.
Next, we need to register our service worker so that the browser can install it. Go into the app.js file and add the following lines:
Before we register the ServiceWorker, we want to ensure that the browser supports it. Add the following method after the load event listener:
Reload your browser and switch to the ServiceWorker section of the Application tab in DevTools. You should see your service worker listed.
- Caching and serving static assets
The ServiceWorker file is entirely event-driven, which means that it won’t run any code unless it’s responding to an event. The main events we are interested in are install and fetch. We can listen to them by adding the following lines to our sw.js file.
Now add the following lines in sw.js
The install event is called whenever a new ServiceWorker file is detected, i.e any changes in sw.js will trigger a new install event to allow you to update the app.
Now add the following lines at the starting of sw.js
Now replace the install event code with the following:
It will create a new cache with the name we specified and tell the cache to fetch and add all the static assets.
Now reload the browser and open the Cache Storage section of the Application tab in DevTools to verify everything is working.
- Serving cached content
The next step is turning our App into PWA to intercept fetch event and serve its cached content.
Now replace the fetch event code with the following:
Add the cacheFirst function below the fetch event listener in sw.js
Refresh the page and go to the ServiceWorker section of the Applications tab in DevTools and check the offline checkbox.
Refresh the page and instead of seeing an offline dinosaur, you should now see the styled HTML of your app.
Now run the Lighthouse, you can see your website is a PWA.
"With these easy steps, you hve successfully converted your website into a PWA"
