Progressive Web Apps provide an extraordinary experience for your existing and potential customers, by combining the best features of the web and of native mobile apps. A progressive web app is useful to your customers from the very first visit in a browser, no installation is required.

As your customers progressively build a relationship with your web app, it becomes more and more powerful. It loads quickly, even on poor networks, is able to send relevant push notifications, has an icon on the home screen, and loads as a top-level, full screen experience.

What is a Progressive Web App?

Link

In this case, “progressive” means that the more features the browser supports, the more app-like the experience can be.

A Progressive Web App Is:

Link
  • Progressive - Works for every user, regardless of browser choice because it's built with progressive enhancement as a core tenet.
  • Responsive - Fits 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 - Feels like an app to the user with app-style interactions and navigation because it's built on the app shell model.
  • Fresh - Always up-to-date thanks to the service worker update process.
  • Safe - Served via HTTPS to prevent snooping and to ensure content hasn't been tampered with.
  • Discoverable - Is identifiable as an "application" thanks to W3C manifest and service worker registration scope, allowing search engines to find it.
  • Re-engageable - Makes re-engagement easy through features like push notifications.
  • Installable - Allows users to "keep" apps they find most useful on their home screen without the hassle of an app store.
  • Linkable - Easily share via URL, does not require complex installation.

Why have a Progressive Web App?

Link

Building a high-quality Progressive Web App has many benefits, making it easy to delight your users, grow engagement and increase conversions.

The common wisdom for most companies that set out to build a mobile app has been to build a native Android or iOS app, as well as a supporting website. Although there are some good reasons for that, not enough people know about the major advantages of web apps. Web apps can replace all of the functions of native apps and websites at once.

Moving to a web app enabled the Financial Times to use the same app to ship across platforms in a single distribution channel.

If a native mobile app only strategy is taken, there is a significant risk that when a user goes to your website to download your mobile app they:

  • may not have the space on their device.
  • be concerned about bandwidth needed to download the your application.
  • may not wish to crowd their smartphone with yet another app.
  • may not want the deferred gratification that downloading an application will involve.
  • have a device that may not support the particular platform your mobile app is targeting.

In the above cases you would simply lose the customer. The web has a low barrier to entry for users — they just click a link and load your website.

It has been shown that if you are not in the top 0.1% of mobile apps in the app store, you are not getting significant benefit from being there.
Users tend to find your apps by first finding your website. If your website is a web app, then they are already at their destination.

By developing a Progressive Web App you are maximizing your application's accessibility to your customers and potential customers.

This enables you to offer the content and experiences that your customer values instantly. The arrival of progressive web apps and the increasing power of browser-based apps means the gap between mobile apps and the web is closing.

Progressive web apps can install an icon to the homescreen, support push notifications to drive engagement, and can offer offline browsing with a service worker.  

Service workers are programmable proxies that sit between the user’s tab and the wider Internet. They intercept and rewrite or fabricate network requests to allow very granular caching and offline support.

Service workers, which are currently supported in Chrome, Firefox and Opera and coming very soon to Microsoft Edge. Apple’s WebKit team has it marked “under consideration.”

Service workers are like other web workers in that they run in a separate thread, but they are not tied to any specific tab. They are assigned a URL scope when they are created, and they can intercept and rewrite any requests in this scope. If your service worker sits at your-websites.com/my-site/sw.js, it will be able to intercept any requests made to /my-site/ or lower but cannot be made to intercept requests to the root of your-website.com/.
Because they are not tied to any tab, they can be brought to life in the background to handle push notifications or background sync. Just as important, it is not possible to permanently break your website with them because they will automatically update when a new service worker script is detected.

What Makes a Good Web App?

Link

An ideal web app has the best aspects of both a website and native mobile apps. It should be fast and quick to interact with, fit the device’s viewport, remain usable offline and be able to have an icon on the home screen.
At the same time, it must not sacrifice the things that make the Internet great, such as the ability to link deep into the app and to use URLs to enable sharing of content. Like responsive websites, it should work well across platforms and not focus solely on mobile. It should behave just as well on a desktop computer as in other form factors.

Progressive Web App Push Notifications, a new way to engage users

Link

Push notifications make it easy to engage and re-engage with your customers by showing them relevant, timely, and contextual notifications, even when their browser is closed!

Web App push notifications enable your customers to opt-in to timely updates from your websites and enable you to effectively engage them with customized, relevant content.

Progressive Web Apps Are Fast

Link

Did you know .. 53% of users will abandon a site if it takes longer than 3 seconds to load! And once loaded, they expect them to be fast, no janky scrolling or slow to respond interfaces.

People have come to expect that websites do not have the smoothly animated interfaces that native apps do. However, the same standard is not acceptable for web apps. Web apps must animate smoothly or your customers will feel your are delivering a degraded, second-class experience.

There are three goals to make a web App "feel" fast:

  1. When the user does something, the app must also do something within 100 milliseconds; otherwise, the user will notice a lag. This includes taps, clicks, drags and scrolls. Each frame must render at a consistent 60 frames per second (16 milliseconds per frame). Even a few slow frames will be obvious. It must be fast on a three-year-old budget phone running on a poor network, not only a shiny new development machine.
  2. It must start quickly. For a long time developers have been focused on maintaining user engagement by getting your website to be visible and usable in under 1 to 2 seconds. When it comes to web apps, start-up time is as important as ever. If all of an app’s content is cached and the browser is still in the device’s memory, a web app can start faster than a native app. One mistake made by native app and website developers alike is requiring networked content in order for the product to work.
  3. The web app must be small to download and update: 10 MB from an app store doesn’t feel like much, but 10 uncached MB downloaded every time is very much impossible to manage for a lot of mobile users.

Worthy of being on the home screen
When the Progressive Web App criteria are met, Chrome prompts users to add the App to their home screen.

Work reliably, no matter the network conditions
By using a Progressive Web App, The Weather Channel had 80% improvement in load time.

Increased engagement
Web push notifications helped Carnival Cruise Line get a 42% engagement rate from customers who receive notifications. The Washington Post increased engagement by 5X. And those users spend twice as much time on the site.

Improved conversions
The ability to deliver an amazing user experience helped AliExpress improve conversions for new users across all browsers by 104%. Alibaba.com, the world’s largest online business-to-business (B2B) trading platform, serving 200+ countries and regions. After upgrading their site to a Progressive Web App, they saw a 76 percent increase in total conversions across browsers.

Full Progressive App support will distinguish engaging, immersive experiences on the Internet from “legacy websites”. Progressive App design offers us a way to build better experiences across devices and contexts within a single codebase.

Building immersive apps no longer requires giving up the web itself. Progressive Web Apps are your ticket out of the tab, if only you reach for it ...

Contact us to get amazing results with your Progressive Web App development



References: