In this guide, you're going to learn what are Progressive Web Apps, what are their core principles, and how are they different from web and mobile apps. Wondering if PWAs are a good fit for your next project? Let's find out.
The web has changed so much over the years. In the early 2000s, web pages resembled newspaper articles and encyclopedia entries, but throughout the decade, they evolved into more sophisticated blogs, video, and e-commerce sites.
With the advent of smartphones, more and more users started browsing the web on mobile devices. Mobile apps quickly surpassed websites in digital media usage. Companies shifted their attention from websites to apps, as apps allow them to provide more features and better engage with their users.
On the other hand, according to US Mobile App Report 2017, half of the smartphone users don’t install any new apps in a month.
The next big thing on the web, Progressive Web Applications, aims to combine the features of mobile apps with the accessibility, discoverability, and ease of use that have been the foundation of the modern Internet.
In this article, we’ll provide you with all the information you need to familiarize yourself with PWAs and point to resources that will help expand your knowledge allowing you to start developing PWAs today.
Google defines Progressive Web Applications (PWA) as user experiences that have the reach of the web, and are:
PWAs, rather than a set of technologies, are user experiences that focus on native-like behavior whilst maintaining the accessibility of the web platform.
PWAs aren’t limited to specific frameworks and can be built with any framework or none at all – when thinking about them try to think in terms of mindset, approach, design approach, rather than specific technologies, as in the end frameworks and APIs come and go while the ideas behind them are expanded upon.
Furthermore, PWAs are a natural progression of movement in web development. We’ve seen trends like:
PWAs embrace the ever-rising expectations of the web platform and try to deliver them as best as possible.
Most agree that the barebones minimum to define a web application as a PWA is the capability to run offline (meaning that at least the app can be opened while offline) and the ability to be added to the home screen. It must be understood that simply adding those features doesn’t make the web app a PWA, as it may still lack the feel of a native app.
PWAs don’t have to display anything meaningful when the user is offline, simply displaying a message to the user that the network is down can be sufficient. Depending on the applications offline support could mean much more than that, e.g.:
As you can see, offline support is not limited to using Service Workers and starts at the design time when designers and product owners think about the application is offline.
PWAs are expected to work on slow network conditions. Navigation inside the app should be smooth regardless of bandwidth and latency as this would be the case for mobile apps. Again, Service Workers can help in such scenarios, e.g. by caching lazy-loaded routes. Additionally, when network resources are required to display resources, skeleton screens can be used to show an indication of progress.
Performance is a very important metric of any web application. Google reports that:
Performance engineers at Google have developed a universal model for measuring performance called RAIL. RAIL is a user-centric model that was created by researching human interactions with computer programs. Goals set by the RAIL model can be applied to any user-oriented software program, e.g. websites, mobile and desktop applications, and video games.
RAIL is an acronym that describes key performance metrics:
Applying the PRPL pattern can greatly help in achieving the goals mentioned before.
PRPL stands for:
PWAs should feel like native apps and have the capabilities of native apps.
On all major mobile platforms, PWAs can be installed on the user’s home screen and open without displaying any browser controls. On desktop platforms, PWAs can be added to taskbars and docks, shortcuts can be added to the desktop, however as of now they still open in a browser.
Web platform has grown very much and provides APIs for features like:
You can visit What web can do today? for a list of notable features available in modern browsers.
PWAs can greatly increase user engagement and conversion. Faster loading times and snappy interfaces yield longer and more engaging interactions impacting important metrics:
Apple lacks behind in PWA support. ServiceWorkers were introduced very late, currently doesn’t support manifests and doesn’t prompt users to add the app to the home screen. Most of the native APIs on iOS aren’t supported on Apple’s devices. Mobile Safari doesn’t support push notifications while desktop Safari has supported them from 2013 (albeit using proprietary standard rather than WHATWG’s).
On the other hand, Google actively promotes PWAs and focuses heavily on them. To understand the approach of the two technological giants, we must look at their sources of revenue.
Google focuses heavily on providing services to all devices while Apple focuses on their ecosystem. Apple Store has a very strict manual review process before approving the apps to the store and charges $100 per license to upload to the store, whereas Google is much more lax in terms of the review process, which is automated and licenses cost only $25.
Furthermore, Google in their effort to monopolize the market actively fought Windows mobile OS by excluding it from providing its services (both native apps weren’t provided on Windows Store and websites like Google Maps were using features not supported by the browser or were outright excluded like Hangouts).
It has recently invested 22 million dollars into KaiOS, the second largest operating system in India and actively develops applications based around web technology for that operating system.
Google is pressuring Apple into allowing PWAs into their ecosystem and thus weakening Apple’s supremacy in app store revenue (Google Play Store makes 10 times less revenue per device than the App Store).
PWAs can make a huge impact on the next billion users (the latest generation of internet users to come online on smartphones in places like Brazil, China, India, Indonesia, and Nigeria).
PWAs have the ability to surpass the native app market in those regions as they require 10x less data transfer to be used & installed (which can be a serious problem in some regions of the world, e.g. Kenya where users install mobile applications in internet cafes and 1 GB data plan costs $5 with average pay between $300-400), they are designed around connectivity issues.
While the web platform has grown so much, it’s still missing support for basic capabilities of mobile apps on some devices.
While some key features might be missing, that doesn’t mean that the principles that PWAs should follow can’t be applied to native apps (especially those built using web technologies like React Native). Since PWAs are focused on providing great user experiences, any app can follow goals they set to achieve and appeal to users.
Get actionable product building tactics in your mailbox, monthly.
No previous chapters
No next chapters