Are progressive web apps ready for prime-time? Learn about their benefits, limitations and figure out whether they are the right option for you.

In the past, web apps couldn’t compete with native apps reliability, speed or user engagement. I’m here to tell you that’s a thing of the past.

The web is becoming a platform for accessing lightweight apps on-demand. A platform where you can install and update without any friction. In this new web, your browser is the new store. These new apps can work on a mobile device as if they were native applications.

Progressive web apps bring the best of apps and the web. They have most of the capabilities of native apps, while being easier to discover and install. You’ll no longer need to worry about the app store gatekeepers. Nor will you have to pay anybody 30% tax on app sales for the privilege of being in an app store.

But before we dive deep into progressive web apps, let’s take a step back and look at the current App market.

Your customers will not download your app

Ever feel like striking gold in the App Store is like winning the lottery?

If you do, then you are not alone. The app store has become a giant repository where great, good and unfortunately bad apps go to die. As of January, 2017 there are over 2 million apps in the Apple app store!

Ready to hear the bad news? 

Half of all smartphone users download zero apps per month (8). And according to Google 60% of apps in the Google Play store have never been downloaded. 

I haven’t touched on user retention and active users yet either. The truth is many people abandon or never use apps they download. The average app user has 36 apps installed on their smartphone, but only uses one in four of those apps daily. A fourth of those apps are never used. 

It’s no wonder it feels like a herculean task to strike gold in the app store. But why is it so hard to succeed with Native apps?

Apart from been able to find your app in the millions of apps out there, the app store has a lot of friction for the user. To download an app, an average user goes through a series of steps. What might that look like? 

  1. Find potential apps that solve my problem through search
  2. Figure out which are best by judging reviews and screenshots
  3. Determine which will actually fit my current need
  4. Determine whether I have enough space and/​or bandwidth to download it
  5. Click to install app and enter password.
  6. Figure out whether the permissions are ​“normal”

As you can see, it’s not so simple. Unlike with a native app, a user is just a click away from using a web app.

Note: Android seems to have noticed this and tried to address this problem through Instant Apps. These can run instantly without installation, which gives developers a way to share part of their app with their users. For example, Ticketmaster recently made it possible to purchase tickets using a native app without having to visit the Play Store.

What if there was a way for users to bypass the app store and try your app first without installing it. Enter progressive web apps.

What is a progressive web app (PWA)?

According to Google (5):

Progressive Web Apps are experiences that combine the best of the web and the best of apps. They are useful to users from the very first visit in a browser tab, no install required. As the user progressively builds a relationship with the app over time, it becomes more and more powerful. It loads quickly, even on flaky networks, sends relevant push notifications, has an icon on the home screen, and loads as a top-level, full screen experience. 

Building Blocks of a progressive web app

There are 3 main components that make up a progressive web app. 

App shell architecture 

App shell is the minimal HTML, CSS, and JavaScript powering a user interface. It’s the amount of code you need to get the app loaded. It keeps your user interface stored locally and retrieves content only as needed. But how does it do that? By using something called service workers. 

Service workers

A service worker is a script that runs in the background. It responds to events, and processes them. They sit between the app and the server and serve as a proxy that allows data to be stored locally. It also helps retrieve data based on different events such as notifications. 

Web app manifest file 

The web app manifest is a simple file that gives you the ability to control how your app appears to the user. For example, in a mobile home screen. It also allows you to dictate what the user can launch and how they can launch it.

For more details about these and how to create them, please see google’s how to create your first progressive web app.

The benefits of progressive web apps 

The major advantages of native or hybrid apps is that they are responsive, fast and can work offline. Progressive web apps can have the same benefits and more! 

They are fast! 

They respond quickly to user interactions with smooth animations. Also they load instantly regardless of network conditions (3).

Twitter light is an example of one of the largest and fastest progressive web apps out there. Through small continuous improvements they’ve been able to optimize their user experience. As a result, they been able to maximize speed and responsiveness (4).

Work offline

One of the new developments in progressive apps it’s their offline capabilities. 

They are lighter 

Using a web version of an app can help users save battery, data and storage (2). By using progressive web apps, users could free up some much-needed space by deleting the app. They can also dodge the data costs that come with downloading the app in the first place. 

Lastly, having an app install will consume a lot of the phone’s batteries. For example, Instagram app consumes the 4th most amount of battery. 

Always up to date 

Another great feature of progressive web apps, is that they are always up to date. No need for users to update the app. You no longer have to make sure you are making the app backwards compatible either. Everyone is on the same version which simplifies things a lot. 

Multiple platforms

The main benefits of web apps is that they are ubiquitous. They work in any supported browser using a single codebase.

Low Friction

Again one of the main benefits of a web app is that they are easy to access, and easy to distribute. Users can get to your site with one click. Progressive web apps also allow users to save the app to their home screen and have the app open full screen. A totally app-like and immersive feature! 

Reach a wider audience 

Companies like Facebook and Instagram have been trying to deliver the same full experience regardless of what device a user is on or what network. ​“Facebook Lite” and ​“Instagram Lite” help people in developing regions use the service without having to download the app (1).

Native apps can be huge to download especially over a slow network. To add to that, In some countries apps install only happen when they first get their phone.App downloading is rare because Wifi is hard to find and networks are expensive. Updating and installing apps are expensive. 

Making the app available online makes it compatible with all devices that have modern browsers. 

Easy to find 

About 50% of people still search for apps in the app store. But web search is also a major source for app discovery. One in four app users discover an app through search. One of the characteristics of progressive web apps is that they registered and identified as apps which make search engines able to find them (6).

Are we there yet? Progressive web apps browser support

    One of main obstacles in front of progressive web apps is its support across all the major browsers. 

    To determine whether PWA is an option, you will need to assess your target audience and browser support requirements. When looking to implement PWAs, it’s good to know upfront what to expect in the foreseeable future. What features will be available in the feature across the browsers that we can use to enhance our apps?

    So what’s the browser support for progressive web apps? (last updated 2017-07)

    Manifest

    Status: Working Draft

    Chrome Supported on Chrome for Android and for Desktop release 39

    Opera Supported on Opera and Opera for Android release 26

    Edge In development

    Firefox Supported on Firefox and Firefox for Android release 48. Firefox supports ​“Add to home screen” experimentally.

    WebKit/​Safari Under consideration

    MDN Browser Compatibility

    Full list of manifest keys compatibility

    Service Workers

    Status: Working Draft

    Chrome Supported on Chrome for Android and for Desktop release 40

    Opera Supported on Opera and Opera for Android release 27

    Edge In development

    Firefox Supported on Firefox (Gecko) release 44

    Safari Under consideration

    Push Notifications

    Status: Working Draft

    Chrome Supported on Chrome for Android and for Desktop release 42

    Opera Supported on Opera and Opera for Android release 37

    Edge In development

    Firefox Supported on Firefox release 44 and Firefox Mobile release 48.

    Safari No plans to implement feature yet.

    Note For all these browsers, support does not include iOS versions.

    What does this mean?

    Due to the lack of support, iOS is one of the main obstacles in front of progressive web apps. Although it is under consideration, it is unknown when it’ll be ready. It’s understandable why they would be apprehensive in releasing these sort of features. The app store is a big money maker for Apple so anything that might lure people away from it might be bad for business.

    For now, the main work around is to still publish hybrid apps through the traditional app store. This way users will still be able to find and install your app even if their respective browsers don’t support progressive web apps.

    Although some browsers have already embraced PWAs (see above), they have various level of support when it comes to Web APIs. Proceed with caution when utilizing cutting-edge web APIs if you need cross-browser compability.

    What are successful examples of progressive web apps?

    Twitter uses PWA to increase engagement and reduce data usage

    Twitter has over 80% of users on mobile. They wanted their mobile web experience to be faster, more reliable, and more engaging. They developed Twitter Lite, a Progressive Web App. Twitter Lite is fast and responsive. It uses less data, takes up less storage space, and supports push notifications and offline use in modern browsers. It became the default mobile web experience for all users globally in April 2017. Twitter developed Twitter Lite to deliver a more robust experience, with explicit goals for instant loading, user engagement and lower data consumption.

    • 65% increase in pages per session
    • 75% increase in Tweets sent
    • 20% decrease in bounce rate

    According to their lead engineer:

    Twitter Lite is now the fastest, least expensive, and most reliable way to use Twitter. The web app rivals the performance of our native apps but requires less than 3% of the device storage space compared to Twitter for Android.

    Forbes bets big on mobile experiences

    Forbe’s goal was to revamp mobile experiences. The way they started was understanding how different mobile experiences are. Up to 60 percent of Forbes’ audience comes from mobile — and they expect that to reach 80 in the near future. With the delivery of a new progressive web app site tests showed that the new site:

    • Increased the average user session by 2X
    • Resulted in six times the completion rate
    • Had 20% more viewable impressions than its previous mobile site.

    Alibaba​.com increases conversions on the mobile web by 76% with Progressive Web App.

    Alibaba​.com is the world’s largest online business-to-business (B2B) trading platform. It serves over 200 countries and regions.

    Building great mobile experiences is an indispensable part of Alibaba’s success. Mobile is their user’s primary form for discovery. What they found though was that users didn’t want to download nor jump to a native app to complete the transaction.

    Alibaba looked at the mobile web as a platform to shift non-app users to the app, but many preferred to stay within a browser. So they decided to upgrade their site to a progressive web app (PW) and saw benefits like

    • 76% higher conversions across browsers
    • 14% more monthly active users on iOS; 30% on Android
    • 4X higher interaction rate from Add to Homescreen

    Other examples

    All these examples are very exciting and show great promise for the future. Within our company we’ve been applying some of these concepts to our apps with great results.

    Progressive web apps open up a new frontier for web developers to create new web experiences that are accessed on demand and rival native ones.

    Where to go next?

    Looking to get started with progressive web apps?

    Working with services workers might be the biggest hurdle to overcome. Learn more about working with service workers below

    One of the main components of PWAs is the manifest file. Get started with some of the links below.

    What about working with Push Notifications?