The benefits of a Progressive Web App

The benefits of a Progressive Web App.

The benefits of a Progressive Web App

The web but… better. A progressive web app is a combination of the best parts of a native iOS/Android app and modern website capabilities giving an app-like experience to users. Imagine a website that behaved like an app, that you could save files to your phone or tablet, could receive notifications, access data from other apps, take pictures, record videos and audio. All these capabilities through your web app even when your device has bad signal or is offline.

We’ve have come to expect that the web does not have the same buttery smooth experience and charming interfaces that native apps do. But the capabilities of web apps in recent years have evolved drastically. The web is leaps and bounds from where it was just a few years ago. What was considered cutting edge then, is now outdated and “old” fashioned. Constant improvement means that a website’s capabilities can reach far beyond their initial purposes. To think this all started as a way to share text documents!

The benefits of a progressive web app?

Offline mode
Sometimes you just don’t have access to good internet. Is there anything more frustrating than when you try to load a website with limited Internet and it teases you into almost loading. At least chrome is kind enough to give you a game as compensation.

The benefit of your web app having an offline mode is that it means the information and functionality of your site are self-contained, allowing users to browse the app when they’re not online, increasing the engagement and availability greatly. With an offline mode, any information can be saved automatically during the last online access. The offline page can be loaded with a brand logo, some information, and some surprisingly advanced features.
For example businesses with product, catalogs can display them to people whilst offline. Which will result in increased customers’ retention and engagement rates.

App-like
Progressive web apps are being designed like mobile apps while still having the full functionality of websites with dynamic data and database access. What makes progressive web apps different from the native apps is that you can get an access to them via URLs which means they are indexable by search engines.

Improved performance
Progressive web apps are significantly faster due to the way the underlying technology caches and serves text, stylesheets, images and other content on the websites. As a result conversation, user experience and retention rates benefit from the improved performance.

Zero install
Compared to mobile applications, when users install PWA’s, there are no long download times, and visitors are not routed through Google Play or the App Store, but directly downloading the app onto their device from the website. This means that the progressive web app gets its own icon on phones and tablets, just like a mobile application, but without the need to go through the sometimes tedious and slow App Store submission process.

Specific hardware features, for example, push notifications
Publishers and developers have full control over how push notifications are implemented, allowing for creative solutions which can supercharge advertising new content. For e-commerce sites, this means an entirely new entry channel for sales, since push notifications directly displayed on phones are far more likely to be read more often than either e-mail newsletters or status updates on social media etc.

No app store submission
Progressive web apps don’t need to be published in Google Play, Windows Phone Apps or Apple’s App Store. Less time-consuming actions.

Faster updates
Developers can push new updates without waiting for approvals from Apple and Google, allowing for regular updates on a level not currently possible with traditional mobile apps. All the updates will be automatically downloaded and updated when users relaunch the app.

Performance demo

Progressive web apps are lighting fast compared to tradition websites. 53% of users will abandon a site if it takes longer than 3 seconds to load! And once loaded, users expect them to be fast—no jittery scrolling or slow-to-respond interfaces.

How companies have benefited from progressive web app adoption.

Twitter Lite saw a 65% increase in pages per session, 75% in Tweets, and a 20% decrease in bounce rate. Twitter Lite loads in under 3 seconds for repeat visits even on slow networks.
Forbes’ progressive web app test saw 2× increase in average user session length, 6× completion rate, and 20% more impressions. Loads in 0.8s down from 3 to 12s. Forbes’ PWA loads in 2.5 seconds on mobile compared to 6.5 seconds for its previous site. Impressions per visit are up 10%. Forbes redesigned their mobile experience as a PWA resulting in 43% increase in sessions per user, add viewability up 20%, and 100% more engagement.
Lancôme’s progressive web app features a 17% increase in conversions, a 51% increase in mobile sessions overall and a 53% increase on iOS alone. Notifications contribute an 18% open rate and a 12% increase in recovered carts. 8% of people responding to a notification make a purchase. Since launching their PWA, Lancôme’s mobile sales have increased 16% year over year with overall speed increases of 50%.
Google found that Progressive Web App install banners convert 5-6× more often than native install banners.
Alibaba increased conversions on the mobile web by 76%, with 14% more monthly active users on iOS and 30% more on Android.
AliExpress has been on the forefront of mobile commerce, and based on the growth they see in this area they quickly developed their own PWA. With a reported 104% increase in conversion rates for new users gained with their Progressive Web App compared to their traditional website and mobile app, things are looking quite well for the Chinese company.

How to define a progressive web app?

Progressive Web Apps are user experiences that have the reach of the web, and are:
Reliable – Load instantly and never show the app as unavailable, even in uncertain network conditions. When launched from the user’s home screen, service workers enable a Progressive Web App to load instantly, regardless of the network state.

Fast – Respond quickly to user interactions with silky smooth animations and no jittery scrolling.
53% of users will abandon a site if it takes longer than 3 seconds to load! And once loaded, users expect them to be fast—no jittery scrolling or slow-to-respond interfaces.

Engaging – Feel like a natural app on the device, with an immersive user experience.
Progressive Web Apps are installable and live on the user’s home screen, without the need for an app store. They offer an immersive full-screen experience with help from a web app manifest file and can even re-engage users with web push notifications.
The Web App Manifest allows you to control how your app appears and how it’s launched. You can specify home screen icons, the page to load when the app is launched, screen orientation, and even whether or not to show the browser chrome.

To be considered a Progressive Web App, the app must be:

· Progressive – which means it must work for every user, regardless of browser or device choice, because they are built with progressive enhancement as a core tenet.
· Responsive – Fit any form factor, desktop, mobile, tablet, or whatever is next.
· Connectivity independent – Enhanced with service workers to work offline or on low-quality networks.
· App-like – Use the app-shell model to provide app-style navigation and interactions.
· Fresh – Always up-to-date thanks to the service worker update process.
· Safe – Served via HTTPS to prevent snooping and ensure content has not been tampered with.
· Discoverable – 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.
· Linkable – Easily share via URL and not require complex installation.

References:

Google
https://developers.google.com/web/progressive-web-apps/

https://ionicframework.com/docs/developer-resources/progressive-web-apps/

Study every step
http://blog.gaborcselle.com/2012/10/every-step-costs-you-20-of-users.html

Getting started with progressive apps
https://addyosmani.com/blog/getting-started-with-progressive-web-apps/