Progressive Web Apps (PWAs)
The term “progressive web app” was coined sometime in 2015. The idea, however, had been announced by Steve Jobs in 2007, when the first generation of iPhones was introduced.
So what are progressive web apps?
Typically, progressive web apps are considerably web apps — the major difference being unlike actual web apps, they are made to look and function like native mobile applications. So they are built using the same technologies you would use to build your regular web applications — technologies like JavaScript, HTML and CSS.
PWAs vs Web Applications
How then are PWAs different from “normal” web applications?
In addition to being web applications, PWAs have some added functionalities that usually, are only available to native applications. Nonetheless, regular web applications have some good advantages. For example, they are easily discoverable, meaning that you could just Google a website of interest, and choose the exact one you’re interested in from the search results. So there is the advantage of easier accessibility through a link, as opposed to a native app, which normally requires an installation first.
Benefits of Native Applications
Just as web applications have their benefits, native applications have their own also:
- Better integration with the Operating System
Native applications integrate better with the operating system. And that’s why we have Android developers and iOS developers, who build apps specifically for those operating systems. As a result, users can have a more seamless experience. - Offline capabilities
With a native app installed on a phone, the user is still able to interact with the app, even when offline. The case is different for a website. An attempt to visit most websites without reception or network connectivity yields no results.
Why PWAs?
What PWAs give us here is the best of both worlds — they combine the great parts of web applications with those of native applications. Even though web applications are easily discoverable and accessible with the use of a URL, giving them the upper hand in terms of reach over native applications, there’s still the drawback of high dependence on network connectivity.
With the introduction of PWAs, first of all, you get to retain the reach that the application has as a web application.
In addition to that, making your web app look and feel like a native app will no longer require you to do so much. In terms of app development, this implies you don’t have to build a native app. You can literally just migrate your web app to a progressive web app.
It also gives you some added functionality like reliability, and reliability here means as a user, even when your cellular network or Wi-Fi is unavailable, you’re still able to interact with the app content. So for example, if you’ve previously visited a page, it’s now cached, making it possible to still access the app content.
There is also the functionality of installability, and what this means is that the user can have the PWA as an icon on their home screen. So once you tap on it, you are basically getting something close to the look and feel of a native app.
Also, with PWAs, you get the most updated version of the application and this is simply because when a web application is updated, once you visit it, you are getting the updated version. It’s not like a native app where you have to go back to App Store or Play Store to install updates.
Another functionality, which is available in PWAs but not in web apps is push notifications.
PWAs in action
So let’s look at some examples of companies that have migrated to PWAs and the kind of results that they got from making that decision.
First, let’s talk about Twitter. After implementing the “Add to Homescreen” feature, which prompted users to save Twitter Lite to the home screen, they saw 250k unique daily users launch the PWA from the home screen about four times a day. Nicholas Gallagher— former engineering lead at Twitter, noted that Twitter Lite is the fastest, least expensive and most reliable way to access Twitter and requests 3% less storage space compared to Twitter for Android.
Secondly, Zack Argyle, ex engineering manager at Pinterest indicated that the reason for rethinking the mobile web for Pinterest was because people in low-bandwidth environments and limited data plans didn’t have a good mobile experience with the app. With more than half of the customers based out of the US, the team had to find a solution that will be more accessible globally. There was a very small percentage of people who actually landed on the site, and went ahead to install the app or sign up. So they decided to introduce a PWA, and after a three-month rewrite of the software, the weekly active users on the mobile web increased by a whopping 156% in Brazil, and 312% in India. Session length increased by 296%, and new signups increased by 843%, year after year. Now obviously, we all know that this increase in conversions means more revenue.
Other companies using PWAs are Uber, Instagram, Forbes, Financial Times, Starbucks and Spotify, to mention but a few.
Migrate from web app to PWA
Let’s look at the criteria for an app to be a PWA. We mentioned earlier that PWAs are in fact web applications, but some things have to be added to the web application to make it a progressive web application.
- Secure context
A PWA needs to have a secure context. This means that it should be using HTTPS (Hypertext Transfer Protocol Secure). Even if your app is not a PWA, it should actually be served over HTTPS to ensure secure communication and transactions. A second reason you want to be served over HTTPS is that most of the features related to PWAs, such as cache API, webcam API, service workers, and geolocation, all require the app to be loaded using HTTPS. So you really can’t use those features without having that. - Service workers
This is something that some experienced developers are quite familiar with. One of the biggest benefits of service workers is their ability to support offline experiences, which is actually the big advantage native apps have over web applications. A service worker is basically a script that runs in the background. It intercepts network requests and manages a cache of responses. How this helps is that when users go offline, they can interact with the progressive web application and see cached files, instead of nothing as is the case in web applications. When they return online, they get the updated files. In web applications, service workers are usually named sw.js or serviceworker.js. - Manifest file
The manifest file is a JSON file that allows the app to appear to the user like a native app on the home screen. It contains information like the app name, author, icon version and description.
Drawbacks of PWAS
As good as PWAs are, there are currently some drawbacks of using them.
- Browser support
For the longest time, some browsers were not fully supporting PWAs, and that’s the case even up till now. However, most browsers are supporting PWAs to varying degrees. Currently, PWAs are not supported on Firefox for desktops. PWAs can now run on Apple devices from version 11.3 but are not compatible with the older devices. Features like Bluetooth, battery information, Face ID and Touch ID are hardware features still not supported by Apple. - Battery life
It is believed that due to the higher-level code used to make PWAs, battery levels could run out quickly. - Limited features
PWAs are not super apps yet. They can’t do everything native apps can do. Device features like advanced care control, contacts, Bluetooth, NFC, proximity sensors, ambient lights are not a thing on PWAs.
Putting these downsides and perspectives aside, I still think PWAs are a huge win in bridging the gap between web applications and native applications. They consider building with people in remote areas, low data and not the best internet connection in mind. And also, they are good for cross-platform development.
What are your thoughts about this? Have you built PWAs in the past, or are you currently building one? Share with me in the comments.
Btw, have you seen my Instagram reels? 😂
