Making a website/web app installable using PWA (Part-2 — The Installation)
Hello developers, I’m back with part -2 of converting a website into an installable native application.
In this part, we will see how we can add an installable prompt to our site.
For more info about the PWA and advantages of PWA, please refer to Part-1
The part-1 is just like starters. Now we are cooking up the main course.
So let's see how our final dish looks like:
Without further delay, let’s see what ingredients we need to cook it.
1. HTTPS enabled
Ensure that your website/web app uses HTTPS protocol, i.e., your site URL should look like (https://yourexamplesite.com)
PWA works only on websites with HTTPS protocol.
2. Manifest file
The manifest file will be in JSON format, containing all the information about the app like app name, icons, the colour of the status bar, display type, etc.
3. Service Worker
A Service worker enables an application to control network requests, cache those requests to improve performance and provide offline access to cached content.
Operates on four events named Register, Install, Fetch & Activate.
4. Offline Experience (optional)
cache the resources which are required to show up when the user’s network goes off.
First, create a website with a mobile-first approach to become responsive for other screens as well.
For this tutorial, I made a webpage like below
Now add the manifest file to our site for defining the app name, logo for the installable app.
In lines 13 & 18, please replace it with your logo path and make sure that the logo sizes match the mentioned sizes.
In line 10, display refers to what browser UI is shown when your app is launched. Usually, we have four display modes.
fullscreen
It opens the web application without any browser UI and takes up the available display area.
standalone
It opens the web app to look and feel like a standalone app. The app runs in its window, separate from the browser, and hides standard browser UI elements like the URL bar.
minimal-ui
This mode is similar to standaloneBut provides the user with a minimal set of UI elements for controlling navigation (such as back and reload).
browser
A standard browser experience.
I have used minimal-ui for display based on my preference. You can choose your own based on your requirement.
start_url
The start_url is required and tells the browser where your application should start when launched and prevents the app from starting on whatever page the user was on when they added it to their home screen.
Linking the manifest file with our index.html
<link rel="manifest" href="manifest.json">you can verify your manifest file in chrome Dev tools > Application > manifest
Now create a new file named service-worker.js in your root directory and add the following service worker code
As I have mentioned earlier that service worker operates on for events
- Register
- install
- fetch
- activate
From the above service worker code, you can observe we add three events, namely install (in line 5), fetch (in line 16), activate (in line 41).
Adding the Offline experience to the site. You might get a question in your mind like,
why add an offline experience for the site.
We cannot guarantee that a user might have a stable internet connection all the time. So when he loses his network connection, we don’t want him to search for the internet. Instead, we want him to continue his task on the site.
So in the offline experience, all the required resources that should show up offline are cached in the cache storage. Whenever a user goes offline, he can continue his journey using the previously cached resources.
For demo purposes, I’m just adding only offline.html to the cache in line 3. You can add as many resources as an array to cache.
Make sure you create the offline.html file in the root directory.
I made sure that my offline page has all the requirements like styling, javascript in a single file so that it would be easier to cache it.
We are done with the service worker, adding offline experience through caching.
But to run this service worker, we need to register the service worker on loading of the site.
In your scripts.js file, register your service worker using the following code.
Make sure you create your service-worker.js file in your root directory of the site.
you can verify service worker in chrome Dev tools > Application > Service workers tab
So That's it. Now you can call your website a PWA. Let's test the progressive score with the chrome lighthouse tool. Chrome Dev Tools > lighthouse > check the progressive web app checkbox and generate report.
In the end, you can see a Progressive Web App badge with a + icon. It indicates that we can install our site as a native application across the platforms.
Test your site 💥
Hurray 🥳 , Finally, you made it. You have converted your website into an Installable native application.
Very Soon, in part-3, we see how to engage the user with real-time analysis and notifications.
Until then, stay Home 🏠 stay safe 😷
Happy coding.