Progressive Web Apps: An Overview
The next big thing in web development - PWAs are here to stay
Introduction
Google announced that starting with Chrome 73, progressive web apps (PWAs) are now supported on all desktop platforms, including Chrome OS, Linux, Mac, and Windows.
In this article, we learn more about PWAs - what and how.
Similar to the apple that fell on Newton's head and changed the way we understood gravitational forces, progressive web apps are changing the way we understand applications by providing an app-like experience in web form. Progressive web apps are one of the technologies originally proposed by Google. The term progressive web app was first uttered by Frances Berriman and Alex Russell in 2015.
It was a way of describing applications that take advantage of new features supported by modern browsers, including service workers and web app manifests, and also lets users upgrade web apps to progressive web applications regardless of their native operating system.
PWAs are also described as user experiences that have the reach of the web and are characterized by the following by Google.
- Reliable - Load instantly and never show the downasaur ( a.k.a the T-Rex), even in uncertain network conditions.
- Fast - Respond quickly to user interactions with silky smooth animations and no janky scrolling.
- Engaging - Feel like a natural app on the device, with an immersive user experience.
PWA Introduction by Google
Top Frameworks for PWAs
- Angular
- React
- Ionic
- Vue
- Polymer
Why Do I Need a PWA?
- Cost — The cost of building a PWA is far less than that of a mobile application.
- Progressive — Works for every user, regardless of browser choice, because they're built with progressive enhancement as a core principle.
- Responsive — Fit any form factor such as desktop, mobile, tablet, or forms yet to come.
- Connectivity independent — Service workers allow apps to work offline or on low-quality networks.
- App-like — Feels 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 prevent snooping and to ensure content hasn't been tampered with.
- Easy discovery — Are identifiable as "applications" thanks to W3C manifests and service worker registration scope, allowing search engines to find them.
- Re-engageable — Make re-engagement easy through features like push notifications.
- Installable — Allow users to keep apps they find most useful on their home screen without the hassle of an app store.
What Makes a Progressive Web Application?
Offline support
Apps should be able to work offline, whether that be displaying a proper "offline" message or caching app data for display purposes.
Web app manifest
An app manifest file should describe the resources your app will need. This includes your app's displayed name, icons, even the splash screen. If you link to the manifest file in your index.html, browsers will detect that and load the resources for you.
Service worker
The service worker could be mentioned in offline support, but it really deserves its own section. The service worker provides a procedural way to cache app resources. Be it JavaScript files or JSON data from an HTTP request. The procedural API allows developers to decide how to handle caching and provides a much more flexible user experience than other options.
HTTPS
It's very important that progressive web apps be served from a secure origin. That is why it is a requirement for an application to be served with HTTPS so it can be considered a progressive web app. Using HTTPS also ensures that intruders can't tamper with the communications between your websites and your users' browsers.
Push notifications for re-engagement
Push notifications allow your users to opt-in to timely updates from sites they love and allow you to effectively re-engage them with customized, engaging content. Effectively, you can build web apps that users can engage with outside of a tab. The browser can be closed, and they don't even need to be actively using your web app to engage with your experience. The feature requires both a service worker and a web app manifest, building on some of the features summarised earlier. Although I have tried to give you an idea of PWAs, there is a lot to learn out there. I strongly advise you to follow some good resources to gain the vast knowledge out there. If you have reached this point but are tired, here is a small energizer for you.
T-Rex Game by MysticReborn
Successful PWAs out There
Twitter is taking advantage of PWA technology for its Twitter Lite platform. This became the default mobile web experience in April 2017 for anyone logging onto Twitter. When compared to the native mobile app, the Twitter Lite PWA is only 600 KB, whereas the native Android app requires about 25 MB for download, and the native iOS app is about 215 MB in size. Update - I was unable to find the Twitter Lite PWA. But the Twitter website is a PWA now.
If you visit Instagram on your mobile browser now, you'll be accessing it via a PWA. Previously, you'd have struggled with a lack of functionality, only really being able to browse your timeline or profile. Now, the PWA looks just like the traditional app and gives you some extra functionality as well. You can upload pictures as you normally would, but it doesn't give you everything.
##Uber When you think of Uber, you tend to think about technology disruption, and sure enough, they've also been prompt on the PWA uptake. Uber's PWA, m.uber, allows you to catch a ride without any downloads and installations of the traditional Uber mobile app.
It's absolutely tiny, with the core service only taking up 50kb, which means it loads quickly even on the poorest of internet connections. The PWA technology Uber has used means it can load in as little as two seconds which will do great miracles for their search engine rankings as Google's algorithms love fast-loading websites.
When you think about Pinterest 's UI and its design, it is perfectly suited to take advantage of progressive web app technology. Their traditional mobile experience was quite slow, which is not overly surprising given the media-heavy nature of the site. As a result, they weren't persuading any users to engage with their content. 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.
Facebook (Bonus - Beta)
There have been reports that Facebook has been working on a PWA. A few users on Reddit have received notifications from the Facebook website to add the application to their home screen. It would be quite exciting to see a heavy-loaded application like Facebook running on a PWA. According to the Reddit user, the app is only 279 KB in size. My native app takes almost 200 MB in storage for the application alone!
Read the Google PWA case studies to know more.
Progressive Web Apps on Desktop
PWAs for desktop was introduced with Chrome 70 when it was released in mid-October 2018. As of Chrome 73, desktop progressive web applications are supported on Windows, macOS, Linux, and Chrome OS.
Similar to mobile PWAs, desktop PWAs are :
- Fast.
- Feel integrated because they are launched in the same way as other apps, and run in an app window, without an address bar or tabs.
- Reliable because service workers can cache all of the assets they need to run.
- Create an engaging experience for users.
Conclusion
PWAs are a whole new concept of web applications that I cannot fully speak about in this six-minute piece. Please do follow the below resources if you are interested in knowing more about PWAs. May the force be with you.
Resources