Progressive Web Apps (commonly abbreviated as just PWA) are all the rage these days. Originally proposed by Google, PWA is changing how we understand applications by providing an app-like experience in a web form.
The term “progressive app” (“web” was originally left out) was first uttered by designer Frances Berriman and Google’s engineer Alex Russell in 2015. They weren’t creating anything new beyond suggesting a naming convention for apps acting on the necessity to address mobile users’ pains.
PWAs are characterized by the following by Google.
- Reliable — Loads instantly and are available even when offline or under weak network conditions.
- Fast — When a user interacts with a progressive web app, they aren’t experiencing sluggish response times, janky scrolling, and other artifacts that are poorly performing web apps tend to show.
- Engaging — Feel like a natural app on the device, with an immersive user experience.
Top Frameworks for PWAs
- Angular
- React
- Ionic
- Vue
- Polymer
Why Do You Need a PWA?
- Cost — PWA is the lowest-cost option one can go for; its building cost is far less than that of a mobile app.
- Progressive — If you want to reach the widest range of users and devices, go with a PWA because they’re built with progressive enhancement as a core principle.
- Responsive — Although they are not a synonym of responsive applications, PWAs are responsive by nature and will fit any form factor such as desktop, mobile, tablet, or forms yet to come.
- Connectivity independent — Service workers allow apps to work offline or under weak network conditions.
- App-like — Feels (even smells and tastes) like a native app to the user with app-style interactions and navigation.
- Fresh — Always up-to-date, thanks to the service worker update process.
- Safe — Always served via HTTPS to ensure the content is securely served and not snooped on or tampered with.
- Easy discovery — Unlike native apps, PWAs are ranked on search engines (which have a lot larger audience than app stores) thanks to W3C manifests and service worker registration scope. If you want, you can still get your PWAs distributed via app stores)
- Re-engageable — Makes re-engagement easy through features like push notifications.
- Installable — Allow users to keep their most important apps on their home screen without the hassle of an app store.
What Makes a Progressive Web App?
Offline support
Apps should be able to work offline. There are various degrees of offline capabilities you can provide. You can provide a simple “offline” message if you don’t like working a lot, or you can be an industrious koala and provide a fully offline-capable version of your content where everything is cached.
Many PWAs will fall somewhere in the middle between the two extremes. Still, the important thing is that they will acknowledge inconsistent internet connectivity and try to provide the right set of features to help users out.
Web app manifest
The app manifest file should describe your app’s displayed name, icons, splash screen, and other required resources.
Browsers will load the resources for you by detecting the manifest file you’ve linked to in your ‘index.html’.
Service worker
I did not mention it in offline support, as I thought it deserves its own section.
The service worker provides a procedural way to cache app resources, whether it’s JSON data from an HTTP request or just JavaScript files. The procedural API allows you to handle caching any you want and provides a much more flexible user experience than other options.
HTTPS
PWAs must be served from a secure origin. That’s why (as mentioned above) PWAs are always served via HTTPS; if it’s not served with HTTPS, then it cannot be considered a progressive web app.
HTTPS ensures that the communications between your websites and your users’ browsers are safe from intruders.
Push notifications for re-engagement
Push notifications allow your users to stay updated about all the activities happening on their favorite sites and allow you to re-engage them with customized, engaging content effectively.
Although I have tried to give you an idea of PWAs, this is just the tip of the iceberg, as there is still a lot to learn out there. I strongly advise you to get on the internet and follow some good resources to increase your knowledge about PWAs.
Successful PWAs out There
In the end, let’s take a look at some of the most successful PWAs out there.
The social media giant first started taking advantage of PWA technology for its Twitter Lite platform. This became the default mobile web experience for all users globally in early ’17.
Unlike the native Android app, which has 25MB, and the native iOS app, which is about 215MB in size, the Twitter Lite PWA size was/is less than even 1MB.
The Twitter website is also a PWA now and has become one of the best examples of a web-based application available today.
Instagram’s PWA is now available in the Microsoft Store. Previously, using it wasn’t easy due to a lack of functionality, only really browsing one’s timeline or profile. Also, if one goes to Instagram through a mobile browser now, one will be accessing it via a PWA.
Thanks to PWA, this is no longer the case. It looks just like the traditional app and gives you some extra functionality as well. Although it still doesn’t give you everything, it’s better than before.
Uber
The ride-hailing company has also been prompt on the PWA uptake. You can easily hail a ride without downloading and installing the traditional Uber mobile app through Uber’s PWA, ‘m.uber’.
With the core service taking up less than a hundred kilobytes, it can load quickly even on the poorest of internet connections.
If one looks at the user interface and design of Pinterest, one can easily say it’s perfectly suited to take advantage of progressive web app technology. Their traditional mobile experience was not quite fast, which is expected given the media-heavy nature of the site.
Their PWA gives them much faster loading times and the ability for users to add it straight to their home page without any download or installation.