And how you could take advantage of its features
A Progressive Web App or PWA , when viewed initially, can be shrunk down just as a website that mimics the looks of a fully-fledged app. Nothing new or interesting, right? Oh, no, it does more than mimic the aesthetics of a native app. There are many advantages to this weird, unusual format of website (or app, we’ll let you decide) than meets the eye. Let’s dig deeper.
The End user’s POV:
So, for the uninitiated, can you recall the time when you enter a website that you visit frequently, you are prompted for any one of the three questions: Permission to send notifications, Accept cookies or Add to Home Screen? Well, we are looking at the last one here. The latest versions of mobile browsers do more than just add a shortcut to the website. By pressing the button, you install an application-like version of the website on your mobile, but the process is so quick and the resources required to install the app is next to none and it feels just like adding a simple shortcut, nothing fancy. But, press the shortcut and you would see something totally different from what you are used to.
The first thing you would notice is that there would be no trace of a browser in this thing. It looks like an….. app; the full screen, the logo of the website being displayed and, wait for it. No, you won’t have to, because the loading time is near-instantaneous. After launching it, you may recognize the User Interface (UI) as being similar to the one you used on the web. But, click on a link or menu, and the speed surprises you. No more waiting for your poor internet connection or lag to catch up, the core functions are locked and loaded (which doesn’t mean new content is not affected by internet quality). All in all, a wholesome experience with only a handful of resources.
Wait, if this is an app of some sort, how is this any different from the native app that is commonly used? The first difference you would instantly notice is how light the app is on your phone (1 MB vs 40 MB) and how smoothly it can run on lower-end devices ( though not as smooth as the native ones on high end devices). But PWAs are not silver bullets. They are still limited by the fact that they are Web-based; they cannot access the sensors of our devices or use more resources when needed, something which a native app has no problem executing.
An apt simile would be comparing the PWA to a kitchen knife which can handle normal situations, and the native app to a Swiss knife, you never know when you might need the extra utility. If you have a low-end device and use the website moderately, a PWA is a good choice here. But, if you need the smoothness, the extra performance and use the service frequently, a native app sounds much more fun.
The Developer’s Side:
After witnessing how much a PWA changes things for a user, developers may think of building one. Good news, PWAs, like websites, are built using languages like CSS, HTML, JavaScript etc, so you won’t feel completely new to this. Also, it is much cheaper to develop and maintain PWAs compared to native apps.
Why would you build a PWA:
When a powerful alternative like a native app is possible, why would people build PWAs?
Well, there are reasons :
Cost:
They are cheaper to build and maintain than a native app.
Progressive:
They work on most browsers from a single codebase.
App-like:
Feels like a native app to the user with app-style interactions and navigation.
Reliable:
Loads instantly and never shows a website to be down, even under uncertain network conditions.
Fast:
They load instantly, even in low internet connectivity or no internet.
Installable:
Easy to install without the hassle of an app store by adding it to the home screen from the browser.
Up-to-date:
They use a service worker update process to update the app in the background every time we have a new version of the app.
Easy discovery:
They are identifiable as applications in search engines.
Responsive:
They fit any form like a desktop, mobile, tablet, or any OS (differs in case of browser engine though), so less to no effort to port to other devices
What constitutes a PWA :
PWA differs from a native app or website by the use of a Service Worker and a Web App Manifest
1. Service workers:
Service workers are scripts that run in the background of your application. It is a programmable proxy that lives client-side and sits between your browser and the rest of the Internet. This is what facilitates offline capabilities and background upgradability of PWAs. They only run on a secure connection (HTTPS, privacy-respecting) and remain idle when it’s not in use and instantly get active when needed.
It enables the application to control the network requests, it caches all of them to provide offline access and also to improve the performance by providing the files from the cache if available.
2.Web app manifest:
A manifest is a JSON file associated with your application which controls what the user sees when launching from the home screen. This is where the logo popping up and the full-screen look comes into play. The animation, colour, symbol, text, all of them are controlled by this component.
Courses about the development of PWAs are abundant on the Internet. One such course is Progressive Web Apps Training by Google. Have fun developing.
Bonus tip: Lighthouse report for Google Chrome is an open source automated tool that audits for performance, and accessibility of PWAs, SEO and more. You can use that to check how your PWA performs in terms of security, efficiency, SEO and responsiveness.
Features of a great PWA :
A great PWA must support some features to help it stand apart from its app and website counterparts. These include :
1.PRPL
a. Push (or preload) the most important resources.
b. Render the initial route as soon as possible.
c. Pre-cache remaining assets.
d. Lazy load other routes and non-critical assets.
2.Web storage:
PWA supports offline support and Web storage helps to implement it. In order to make the PWA still usable in offline mode, web storage can be used to display already saved data when needed.
3.Efficiency:
A PWA needs to be much smoother than the website and consume fewer resources than the native app. So efficient coding is key.
4. A great UI:
A great PWA must make sure that its UI is eye-catching and simple. Check out Top 10 Design Tips for some great ideas on how to bring out a great representation of your content.
PWA Stats:
PWAs have been changing the web silently from their conception in the late 2000s. It helped revolutionize some organisations and companies and raise them to where they stand today. Let’s see some achievements by PWAs
- BookMyShow’s PWA takes less than 3 seconds to load and is 54 times smaller than Android and 180 times smaller than iOS app
- Flipkart’s PWA is responsible for 50% of its customer drive. Nearly 60% of visitors uninstalled the native app and started using the PWA due to space constrains.
- Uber’s PWA is so fast and resource efficient that it takes only 3 seconds to load even with 2G connectivity
- Twitter saw a 75% increase in Tweets and a 20% decrease in bounce rates after introducing its PWA version
- Housing.com sped up page load by 30% in their PWA
(Statistics provided by PWA stats)
Where PWAs stand now:
It seems like 2021 is going to be a good year for PWAs. With all major desktop browsers now supporting PWAs, mobile browsers started rolling out mainstream support and promotion for the same. The development of PWAs at this stage of hype could be beneficial for everyone. Every major website has a PWA version in store.
In the end, productivity is the aim of PWAs, so stay productive and have fun. We hope this article has introduced you to the wonderful concept of PWAs and got you interested to try it out.
-Ashwin Kumar. V
