As the title suggests, this is a primer on building PWAs. The article starts with the basics and takes the reader through various aspects of PWAs, with real life examples.
There are Web applications, native applications and then, there are progressive Web applications (PWAs) that bridge the functionalities of both.
By now, most people would have heard about progressive Web applications on the Internet. However, this term still confuses a few. Those who are recently into Web development from a different domain, or tech enthusiasts like project managers who want to consistently incorporate new technologies into their workflows, are still trying to understand more about this buzzword.
That’s why I’ve decided to clear all the misconceptions around this topic. By the end of this article, hopefully, readers will have a clearer picture about PWA technology, its uses, and how to build one (at a beginner level).
What are progressive Web applications?
Progressive Web applications are built to perform like apps while looking like websites. They have all the functionalities of a native app – those that you use on your smartphone – and still manage to offer the usability of a website.
Ever since Google proposed this concept in 2015, progressive Web application development has been seen as the norm for future Web and app development. With companies looking to optimise the user experience consistently, PWAs fit their requirements in terms of budgets, functionality, development time, and more.
The best of both worlds
This technology offers the best of both worlds. The evolution of browsers and Web development technologies like push APIs, cache and service workers has paved the way for the development of Web applications. These are the online counterparts of native apps that are capable of working offline, receiving push notifications, and delivering an experience that matches that of a native app.
Progressive Web applications, on the other hand, are a step ahead.
- They leverage the potential of a much larger ecosystem to function as a website.
- They eliminate the need for developers to build distinct versions of an app for different operating systems, launching it on multiple app stores and then pushing individual updates.
- Thanks to their functionality as websites, they can be built faster than native or Web apps and be instantly deployed.
The best part of a PWA is that it eliminates the need for backward compatibility — users from any platform or device can run one single code of your website.
This is a win-win for both developers and users. It makes it easier for developers to deploy and maintain the app, and allows users to access all the features of a native app seamlessly.
Why do we need PWAs?
So far, we have only discussed the benefits that progressive Web apps offer. Let me further refine a typical customer’s journey when using a native app:
- Identify the concern one faces.
- Look for probable solutions online.
- Realise that an app is the ideal solution.
- Go to the App Store or Play Store.
- Search for the app.
- Get recommendations and ads on the multiple apps.
- Try out the most recommended one.
- And then finally decide on one that addresses the original concern.
But this cycle does not end here. According to statistics, 79 per cent of users abandon an app after a day’s use. Besides, 29 per cent of users abandon a downloaded app if they don’t find it useful. These statistics aside, there are other factors like the UI of the native app, load time, the amount of space it takes up in storage, offline capabilities, and more, that hinder app usage. Even if just one of the many factors mentioned fails, the app loses a user, triggering the customer cycle again.
So, why progressive Web applications?
Simply because the customer’s journey ends at the second step. Once the concern is identified, the user can access the solution very simply. There are no downloads nor installations. The user simply logs in and accesses information. The mobile version of Facebook is an ideal example of this. It mimics the functionality of a native app but is still a website.
Advantages of PWAs
If you’re still not convinced, here are some more benefits of PWAs.
- Content on a PWA is available offline as well. Unlike websites, where no content is displayed when not connected to the Internet (or if connected to a poor network), PWAs display content that users can still engage with.
- Unlike apps, PWAs don’t have to be updated whenever developers roll out a new feature, bug fix or other update.
- They are optimised for performance, with the results being reflected in retention rates, customer experience, and conversions.
- No submission to app stores, i.e., no installations are needed.
- PWAs are push message-ready, and more.
Progressive Web apps are the future
So, now that we know what PWAs are and their benefits, let’s understand their practical applications. Some of the companies that use PWAs include:
- Twitter Lite
- Forbes
- Alibaba
- AliExpress
- Flipkart
- BookMyShow
Twitter Lite
Two years after the concept of progressive Web applications was introduced, Twitter launched its version Twitter Lite in 2017. Understanding that most of its users were accessing the portal from their phones, it ensured their experience on the mobile site was optimum. After the introduction of Lite, Twitter reported the following numbers:
- A 75 per cent hike in the number of tweets sent
- A 65 per cent hike in pages per session
- A 20 per cent decrease in the website’s bounce rates
Forbes
The case was very similar with Forbes. With the tech implementation, it reported the following:
- A 100 per cent hike in engagement rates
- A 6x hike in article completion
- A 20 per cent hike in page impressions
AliExpress
After the conversion of its mobile site into a PWA, AliExpress witnessed:
• A 74 per cent hike in the time spent during each session
• A 2x hike in new page visits
• A whopping 104 per cent hike in new user conversions
Other significant statistics
- Pinterest shared that the time spent by users on its PWA went up by 40 per cent.
- The PWA of BookMyShow was smaller than its native Android app and its iOS app by 54x and 108x, respectively.
- Flipkart reported that the amount of data used reduced by 3x after converting its mobile site to a PWA.
The basic guidelines to building PWAs
We are not going to show you how to code here since we’re still at the very foundational levels of understanding PWAs. So, let’s stick to the guidelines that make PWAs what they are. When you decide to build one, ensure that it has the following features.
Progressive: Your PWA should work on any device and operating system. It should also leverage the full potential of the device’s hardware and other technical features.
Discoverable: Because they are not apps but websites, PWAs should be easily discoverable. This means that their SEO game must be on point, so users can immediately find them on search results and start using them.
Responsive: The site should offer a seamless Web experience across all devices.
App-like: It should look, feel, and function like a native app. This means that it should be developed on a shell model and involve minimal refreshes.
Stability even during poor connectivity: The site should work fine even in areas with poor network connectivity.
Installation-ready: If users want, they should be able to install the PWA on their browser’s homepage.
Up-to-date: New content should be seamlessly pushed into the PWA when the user is accessing the site.
Besides these aspects, the PWA should be, by default, safe to use. This is because it’s a website that offers a personalised and intimate user experiences. When fragile data transmission happens, the site should be safe enough to prevent middleman attacks and other threats.
So, what do you think about PWAs? An interesting concept, right? For both developers and users, they offer innumerable benefits like we just saw. With more companies opting to develop PWAs, you must offer your customers a similar experience too.
I am sure that you will now have a better understanding of the concept. I will be thrilled if you decide to implement this technology after reading this article.
