New to the concept of Progressive Web Apps (PWAs)? Let’s get you started with the basics.
PWAs are modern, high quality applications built using web technology. They offer similar capabilities to iOS/Android/desktop apps, they are reliable even in unstable network conditions, and are installable, making it easier for users to find and use them.
Progressive web apps combine the best of the web and the best of mobile apps. They are useful to users from the very first visit in a browser tab, no install required.
As the user builds a relationship with these apps through repeat use, they make the PWA— loading very fast on slow network connections (thanks to service worker), sending relevant Push Notifications and having a first-class icon on the user’s home screen that can load them as fullscreen app experiences. They can also take advantage of smart web app install banners.
So how does one build a PWA? Well, there are some requirements for a web app to be a PWA.
1. Web App Manifest
The JSON file gives meta information about the web app. It has information like the icon of the app (which the user generally sees after installing it in their app drawer), background color, name and short name of the app.
2. Service Workers
Service workers are event-driven workers, which run in the background of an application. It acts as a proxy between the network and the application. They are able to intercept network requests and cache information in the background. It also can be used to load data for offline use.
3. Icon
It provides an Add to home screen app icon using which a user can install the PWA on their smartphone’s homescreen. The tool helps to generate icons for multiple formats and it is very useful.
4. Served Over HTTPs
To be a PWA, the web app must be served over a secure network. With services like Cloudflare and LetsEncrypt, it is easy to get an SSL certificate. Being a secure website, it is not only a best practice, but it also establishes your web application as a trusted site for users demonstrating trust and reliability and avoiding middle man attacks.
5. Offline support:
From chrome v93+ onward it is mandatory for PWA to provide a page which is served by service workers when users have no network connection.
In DotPe’s use case we need a different type of PWA’s because our web app works on sub domains, so we need a separate PWA for each sub domain. For example, for McDonalds our domain is https://mcdonalds.dotpe.in and for taco bell the domain is https://tacobell.dotpe.in.
So, for McDonalds and Taco Bell we want to create a separate PWA. But there are some challenges we faced during the development. But here’s how we worked around them.
- Service Workers and caches can’t be shared between subdomains:
Therefore, users navigating across subdomains would have to incur the installation cost of a new service worker for each origin being visited, and won’t be able to leverage the resources cached by the previously installed service worker(s).
To initiate a new service worker for each domain we use the workbox library. Also whenever users jump between subdomains the installation of service workers is very lightweight means we only precache those resources which are necessary.
2. Manifest start_url has to be relative to origin:
Due to this constraint, every subdomain must have its own manifest file with the start_url relative to the origin, icon and brand name must be in the manifest file.
To overcome this problem, we make dynamic manifest files for each brand, for this we used server side rendering. Whenever a user lands on some specific page, the browser loads this manifest file.
3. Customized in-app install experience:
Progressive Web App meets the required installation criteria, the browser fires a beforeinstallprompt event. We save a reference to the event in the reducer, and update the user interface to indicate that the user can install your PWA.
After saving this event to reducer, we show the Add to homescreen option on our thankyou page, when the user clicks on Add to homescreen button, Install prompt will open. After accepting the installation request PWA will be added to the homescreen.
This is just the beginning for us. In the next few months, we will be doing a lot more optimizations and improvements, implementing push notifications for user re-engagement, and of course we can build a play store/ apple store ready apps for various brands in a few minutes.
