These days Progressive Web Apps (PWA) are the talk of the town, mainly due to their amazing usability and unique user experience. With the combined features of websites and native apps, PWAs are becoming a norm for multi-device web applications allowing developers to build fast-loading dynamic apps without using hybrid frameworks.
I believe Progressive Web Apps are the future of websites – and in the following write up I’ll be discussing its benefits and use cases to give you the whole the picture. Let’s get on to it.
Read Also: An Introduction to Progressive Web Apps
What are Progressive Web Apps?
The term “Progressive Web Apps” was first coined by Alex Rusell (a developer of Google Chrome) and Frances Berriman (a designer). Alex shared his idea about Progressive Web Apps that “These apps aren’t packaged and deployed through stores, they’re just websites that took all the right vitamins“.
“Sites that want to send you notifications or be on your home screen have to earn that right over time as you use them more and more. They progressively become “apps”“, wrote Alex about PWA’ appiness. Finally, he concluded, “these apps can deliver an even better user experience than traditional web apps“.
Web Apps vs. Progressive Web Apps
Web apps, or traditional web apps, are the client-side apps that run directly in a web browser. Though they are better than websites yet they have their issues. If you do not know the difference between web apps and sites, web apps differ from websites because web apps look and feel like native apps.
That being said, Progressive Web Apps are the next generation of web apps that work more like native apps by making use of the device’s native enhancements. For example, Progressive Web Apps can make use of native features like camera, beacons, etc. along with features like offline cache, push notifications, etc.
Why do we need Progressive Web Apps?
We have native apps, on the one hand, that are unbelievably fast and reliable even in the worst situations like slow or no connectivity. But then, we have websites and web apps, on the other hand, that are slow and do not work well in no network conditions. That is why most people prefer native apps.
Accelerated Mobile Pages (AMP), a project encouraged by Google, was started in 2016 to solve slow connection issues, especially on smartphones, and provide better user experience to mobile users. However, AMP does not solve problems of no network issues. Also, it does not speed up the loading time as much as native apps, and again, it posses few limitations to achieve this speed.
That is why we need Progressive Web Apps. PWAs provide the best possible user experience in slow or no network conditions. For example, PWA can show a progress screen when it is loading the content or a splash screen when there is no web connectivity respectively.
Why Progressive Web Apps make sense?
As specified by comScore’s 2017 U.S. Mobile App Report, app users spend almost 77 percent of their time on their top three apps, while rest of the apps stay idle but still block the system resources including memory. Moreover, it also shares that 50 percent of users download zero apps a month. This fact suggests users hesitate to install new apps, and thus PWA has an edge.
I find people mostly go for websites on desktops but prefer apps on mobile devices (native apps, of course). The reason being, computers offer a lot more network resources than smartphones, and apps consume fewer resources than their counterpart websites. Also, they are quick and reliable.
Moreover, native apps cost a lot more than websites – as much as five to ten times or more depending on the type of the project. Also, their cost can multiply if there is a need to develop native apps for multiple platforms (say Android and iOS) with different code bases. However, PWA can help minimize such high development costs, thanks to its support for various platforms.
Progressive Web Apps features
Progressive Web Apps have many direct features which make them distinct than their simpler counterparts, i.e., web apps (or simpler ones – websites):
- Responsive. Work on all devices of any screen size.
- Offline-first. Load in slow or no network as well.
- App-like feel. Look and interact like a native app.
- Up-to-date. Update on their own, almost transparently.
- Safe & secure. Use HTTPS to load page resources.
- Discoverable. Avail content to the search engines.
- Re-engageable. Re-engage, say using notifications.
- Installable. Can be placed on your home screen.
- Linkable. Load app-like pages, but with URLs.
What I find interesting is, Progressive Web Apps do not just look and feel like native apps but also have access to device’s native features. That means a PWA can take a snap of you using your device’s camera. However, I must share that it does not get access to limited features like location, phone, or SMS.
Note: You can read more about its features and other details in this post.
Creating Progressive Web Apps?
Google provides a “Progressive Web App Checklist” – a detail list to help the beginners create Progressive Web Apps. This no-guide list shares the necessary features to create PWAs – a “Baseline PWA” and an “Exemplary PWA”; the former lists crucial things for a basic app and the latter for an advanced app.
Moreover, there are various tools to assist you in building a PWA. For example, Lighthouse is a free, open-source tool to improve a webpage including quality checks for accessibility, performance, and PWA features. Another featureful tool is Workbox, which helps to build apps with offline-first experience.
Are Progressive Web Apps the future?
Though Progressive Web Apps may not solve all our app problems or replace native apps in some near future, yet I believe it will play a significant role, thanks to its benefits that are far more than its limitations. And with almost every big platform starting to support PWAs, it is not far we will see them everywhere.
Apple introduced PWA features (Web APIs) in Safari 11.1 including Beacon API, Service Workers, Web App Manifest, etc.; thus bringing PWAs to iOS soon if not already. Google has already supported PWAs in Chrome for Android, and it is planning to bring it to desktop platforms as well. Microsoft also added support for PWAs in Microsoft Edge and will list them in Microsoft Store as well.