Based on what we’ve learned from past attempts at leveraging web apps to make them at par with the native apps, technological limitations are often present. And these limits often affect performance and features. Google found a new way to deliver amazing user experiences (UX) on the web, though, through a progressive web app.
What is a progressive web app?
Progressive web app (PWA) is a web application that uses the latest technologies. In essence, these are your regular websites that appear app-like. PWA mimics traditional apps or native mobile apps. Through service workers and web app manifests, the users may upgrade a web app to a PWA while using the native OS of the device.
Further, it is considered as an enhancement of current web technologies. No separate bundling or distribution is required since developers can publish it as a typical web page.
PWA is a term coined by Frances Berriman, a designer, and Alex Russell, a Google Chrome engineer. PWA developers attempt to combine the features offered by the latest versions of browsers with added benefits suitable for better mobile UX.
What makes PWA unique?
Google Developers share some characteristics of PWA.
Progressive. PWA is not constrained by the user’s browser choice as it is built with progressive enhancement.
Responsive. PWA supports any device as well, not just browsers.
Fast. It also loads instantly and responds quickly to various user interactions.
Connectivity-independent. PWA works online and more so offline. It’s highly resilient.
Reliable. And despite unpredictable and uncertain network conditions, there is absolutely no downtime with PWA.
Discoverable. PWA is highly identifiable because it is an app, making search engines like Google to find them easily.
Re-engageable. Re-engagement with a PWA is easy since it is packed with features such as push notifications.
Installable. PWA is dock-ready minus the complicated installation.
Linkable. PWA is shareable using a URL.
App-like. PWA makes users feel like they are using an app with its style, interactions and navigation.
Engaging. PWA is immersive.
Fresh. PWA is always up-to-date.
Safe. PWA is served via https, so snooping is prevented in any how especially the content.
Why build a PWA?
According to Google, developing a high-quality PWA has immense benefits.
- Home screen worthiness
If it meets all the criteria set forth by Google, the search engine will show prompts so that users may quickly add the PWA to their home screens.
- Low footprint
Regarding downloading and installing, PWA allows users to use it without the need for additional MBs. It means more allowable space on any device.
- Increased engagement
Since the PWA works regardless of the network conditions, re-engagement is highly possible. With the help of push notifications too, users may spend twice the time they initially intend to on the app.
- Improved conversions
Based on pilot tests, the conversion rates of new users across all browsers are 104%. On iOS, it is by 82%.
- Lower costs
The best part about this is the cost. App publishers may opt to create a PWA instead and save 10x than developing a native app. This applies to both the development and maintenance.
How useful is PWA?
In some instances, Berriman noted that the use of the term has become ‘blurry.’ But its broad usefulness cannot be denied. In fact, any website can be a PWA in just three steps:
1) Switch to https
2) Add a JSON manifest file
3) Add a service worker
If you are currently developing a website, that project will benefit from the approaches under PWA. And while every project is different, any project may benefit from the features found on PWAs.
How are we using sites and apps in reality?
Following the Mobilegeddon of April 2015, most apps today have a fully responsive website counterpart. The irony is that the site can perform all the functions of the native app. What if a site can do all the functions of a native app? Doing all these without the need for Internet connection? And downplaying the ubiquitousness of apps? This is PWA in the works.
With this in mind, PWA can be also described as an all-in-one development solution that is delivered across all devices and browsers. It works like an app sans the pain of downloading and installing the app as you normally would from an app store. Not to mention, PWA-run site is faster.
It means the developers no longer need to program various apps for a variety of devices while dealing with screen size issues. They can focus their time and resources on designing a PWA instead.
Combining it with AMP
AMP, which stands for accelerated mobile pages, is a Google-backed project intended for publishers to load their pages quickly on mobile devices. It is a web publishing platform that aims to optimize the mobile web browsing experience.
Now imagine if an AMP page has PWA features. But, wait a minute, is this even possible, you may ask. The answer is yes.
In fact, in the recently concluded Google Mobile Hackathon 2017, the participants were tasked to utilize AMP and PWA to create faster and more efficient mobile-friendly web pages. The goal of which is to meet the ongoing and ever-growing demands of the mobile-first world. Optimind Technology Solutions bagged the silver award for this year’s hackathon.
AMP pages with PWA features
Going back, an AMP page can use as many PWA features as possible for as long as the page is served from the same https origin. If the pages are served from AMP Cache, the PWA features will not be realized although these features may become visible if the user lands on your AMP page directly.
As PWAs has engagement-enabling features, it would be beneficial to make your homepage or landing pages as AMP pages. Then just load the features such as OS integration, push notifications and background synchronization onward the journey. Alternately, you may use the AMP pages as the PWA data source when building a PWA.
The future looks bright for both AMP and PWA. What more when they are combined, right? It’s like experiencing the best of both worlds. Although there are challenges, if the move will benefit the users then it’s a must-try.
