This article is the first of a two-part series that covers all the basics of progressive Web apps (PWAs). The next part will take us further down the road to actually building a PWA.
A progressive Web app (PWA), as the name suggests, uses current Web capabilities to provide an app-like experience to users. It is a kind of application software delivered through the Web, built using common Web technologies including HTML, CSS and JavaScript. It is supposed to work on any platform that uses a standards-compliant browser. Basically, a progressive Web application takes advantage of the latest technologies to combine the best of Web and mobile apps. Imagine a website built using Web technologies but which acts and feels like an app. Recent advances in browsers, in the availability of service workers, and in the cache and push APIs have enabled Web developers to let users install Web apps on their home screens, receive push notifications and even work offline.
The main features of PWAs
Listed below are a few key features of PWAs.
- PWAs are reliable: They load immediately and never show the ‘downasaur’, even in uncertain network conditions.
- PWAs are fast: They react quickly to user interactions with silky smooth animations and no junky scrolling.
- PWAs are engaging: They feel like natural apps on the device, giving an immersive user experience.
Requirements of a PWA
In order to be considered a progressive Web app, it should be:
Progressive – It should work for every user, regardless of browser choice, because it is built with progressive enhancements as a core tenet.
Responsive – A PWA should work with a touchscreen interface on a smartphone, tablet or computer monitor.
Connectivity-independent – The app should be enhanced with service workers to work offline or on low quality networks.
App-like – It should use the app-shell model to provide app-style navigation and interactions.
Fresh – It must always be up-to-date, thanks to the service worker update process.
Safe – PWAs are secured by TLS encryption so your data will be secure when you’re using the app.
Discoverable – PWAs apps are identifiable as ‘applications’ thanks to W3C manifests and the scope of the service worker registration, which allows search engines to find them.
Re-engageable – They make re-engagement simple through features like push notifications.
Installable – They permit users to ‘keep’ apps they find most useful on their home screen without the hassle of an app store.
Linkable – PWAs are simply shared via URL and do not require complex installation.
Why progressive Web apps?
A study has shown that, usually, an app loses 20 per cent of its users for every extra step between the user’s first contact with the app and the user starting to use it. A user must first find the app in an app store, download it, install it and then, finally, open it. When users find progressive Web apps, they will be able to immediately start using these, eliminating the downloading and installation stages. When they return to the app, they will be encouraged to install it and to upgrade it to a full-screen experience.
However, a native app is definitely not all bad. Mobile applications with push notifications get up to three times more retention than their counterparts without push, and a user is three times more likely to reopen a mobile application than a website. In addition, a well-designed mobile application consumes less data and is much faster because some resources exist on the device.
A PWA takes advantage of a mobile app’s characteristics, leading to improved user retention and performance, without the difficulties involved in maintaining a mobile application.
When should you build a progressive Web app?
PWAs are usually recommended for applications that you expect users to return to frequently. Flipkart uses a progressive Web app for its popular e-commerce platform, Flipkart Lite, and Switzerland based SBB uses one for its online check-in process, allowing users to access their tickets without an Internet connection.
When assessing whether your next application should be a PWA, a website or a native mobile application, first identify your users and their most important actions. Being ‘progressive’, a PWA works in all browsers and the experience is enhanced whenever the user’s browser is updated with new, improved features and APIs.
Thus, there is no comparison between the user experience with a PWA and a traditional website. However, you may have to choose what functionality to support offline, and you will have to assist navigation (remember that in standalone mode, the user does not have access to the back button). If your website already has an application-like interface, applying the concepts of PWAs will only make it better.
If certain features are definitely required for critical user actions but are not yet available due to a lack of cross-browser support, then a native mobile application might be the better option, guaranteeing a similar experience for all users.
Does a PWA have any drawbacks?
The major drawback of PWAs is that they require more battery power than the conventional websites that’re visited on a mobile Web browser. This has to do with all the extra capabilities that a PWA has, like the interface and the service worker.
The second drawback is that PWAs won’t be able to benefit from app store traffic. Although they’re recognised as apps by search engines, they can’t be downloaded from an app store.
In this article, we have learned what a PWA is, why and when we need it, as well as its drawbacks. In the second and final part of this article series, we will learn how to build a simple PWA.
