Progressive Web App - The Latest Technology Disruption Developers Must Master Today

Would you be surprised to learn that some of your favorite apps are web sites. An emerging trend is companies of all sizes are migrating their client strategy to web only, abandoning native apps. There are several reasons for this strategic business decision. Consumers no longer download apps and the web platform has added many key features, elevating the web past native apps.

Many misconceptions plague the web. Many perceive the web as slow and lacking key features like offline capabilities. The web can be fast, but requires proper architecture and techniques. Offline capabilities have been available for nearly a decade via appCache. appCache has a terrible development and management experience, leaving most to avoid using the feature.

Pinning or adding websites to home screens has been available for years, but hidden behind manual processes consumers have no idea exist. Browser vendors have loosely banded together to change that shortcoming by making the process a first-class feature to progressive web apps.

This is just the beginning for progressive web applications. Qualifying as a progressive web application is simple, and the opportunities are endless. For developers, this is a new opportunity for adventure and cross-platform uniformity. For businesses, progressive web apps deliver the elevated user experience they need, so as to engage new and existing customers to enhance valuable relationships.

Native vs Web

Earlier I teased you by stating that consumers no longer download apps. This fact is often disputed by developers, but have you asked your friends and family that are not developers? Chances are your anecdotal research will return similar results to mine. No one downloads apps anymore.

ComScore released research in 2015 showing the average consumer downloads zero apps in a given month. This does not mean apps are not downloaded, but mobile users rarely download new apps. One reason is the time and friction required to hunt down an app, then go through the average 6 step process to add an app to their phone. Once added, only 1 in ten use the app more than once.



This phenomenon is known as app fatigue. In the early days of mobile, everything was exciting and we wanted to try everything out. But after a few years, consumers came to realize most apps did not offer anything truly exciting. Plus, the steps involved to install an app were exhausting.



Apps have become so bloated that most users do not have enough room on their devices. Maintaining a library of family photos and music is more important to most, than having 100MB app to provide data readily available on a website.



The marketing cost to earn a single app install has steadily risen to over $10 (US) compared to the cost to earn a visit to a web site averaging less than $0.30 (US). The associated native application development and distribution costs on each platform make the web a more attractive option for businesses to pursue.

Yes, consumers do download and use native apps. Research tells us that there are a handful of apps being used. In fact, 80% of mobile time is spent using native apps, compared to the web. But 87% of that 80% time-share is dedicated to less than 3 apps: Facebook, Facebook Messenger, and Facebook’s Instagram. Do you see a trend?

The next three apps are a mixture of Snapchat, Gmail, and Google Maps. After those apps, there is a drastic drop in time used for remaining apps, in contrast to the average consumer visits over 100 different web sites in a given month on their phones. Today, over 80% of web traffic originates on a mobile device, predominately phones. The reason is simple, web sites are easier to find and access than applications.

This is known as reach, which some call the web’s super power. The ability to hyperlink is a foundational feature that made the web so useful. The ability to deep link in a web site is a distinct advantage, not common to native apps.

Consumers also see the web as a lower level of commitment. To download an app requires the effort to go through the 6 step install process, commit disk space before you can decide if the app should be kept. In contrast, a web site or page can be loaded in seconds, evaluated and abandoned without commitment.

At the same time, the web has seen significant advancements in capabilities and uses over the past decade. Today, web sites are often created as app, especially in the enterprise. There is very little to distinguish where a native app and web app differentiate. The small gap that exists today is shrinking as more and more features and hardware access is added to browsers.

This means there is a golden opportunity for the web overtake native apps as the client standard on mobile. But the web and developers must bridge the capabilities gap native apps have enjoyed.

This is where progressive web apps change the game. Progressive web apps are secure, fast, reliable and engaging. They offer experiences designed to engage user attention, while providing the infrastructure to have features and capabilities developers need to deliver world class user experiences.

The great news is any web site, existing or brand new, can be a progressive web application. By design PWAs work in any browser. When PWA features are supported the site enjoys an elevated experience. This is by design because PWAs leverage progressive enhancement to add value as features are supported.



“These apps aren’t packaged & deployed through stores, they’re just websites that took the right vitamins. …They progressively become apps…” ~ Alex Russel

Those vitamins are what I call the progressive web app technical requirements.

 

Technical Requirements

Progressive web apps have three simple requirements: HTTPS, a valid web manifest file, and a registered service worker containing a fetch event handler. These three requirements can be added to any site within 15 minutes, without breaking the existing code!

Don’t let this fool you into thinking that is all you need to do. Applying these three requirements is the start of the journey. Upgrading to HTTPS does require an audit of current links and their protocols. Any reference to http:// needs to be change to https:// or just //. You may have a third-party dependency that is not available via HTTPS. In those situations, you need to ask them to upgrade, create a hack or find an alternate solution.

Once you create a valid web manifest file and associated icons you may not need to change them for a long time. The hardest part of the manifest process is creating an array of images. You should create an array that satisfies each platform, Android, iOS and Windows to start. Until you change logos you may not need to change this file.

Developers will find themselves consumed with programming service workers. They are similar to web workers, which have been available for several years. The difference is service workers run on a background thread and can execute without the browser being open. The service worker specification also mandates the browser support Promises, the Fetch and Cache APIs.

The service worker specification was designed to allow service worker capabilities to be expanded over time or extensible by nature. Initially browsers are shipping cache, native push notification and background sync capabilities. New features are currently being debated in standards bodies, like blue tooth access.

In future articles, I will dive deeper into HTTPS, the web manifest and different aspects of service workers.

Benefits of Being a Progressive Web App

Once your site meets the minimal technical requirements, the benefits start rolling in. Progressive web applications primary goal is to encourage the best user experience. The technical requirements are a set of queues used by the browser to trigger enhanced experience and visibility benefits.

Everyone wants their icon on customer’s phones. This has long been a benefit of native apps, installed via an app store. Users have been able to add an icon for web sites manually to phone home screens and pin tiles on Windows for years, however the experience has been a second-class experience. That changes with progressive web apps.


Traditional Web Site Icons

Unless they’re prompted, users likely do not know they can pin an icon to the home screen. Browsers supporting progressive web apps dynamically display a banner, prompting the user to add the site to the home screen.

Each browser has a different heuristic triggering the prompt. In general, the prompt fires when the platform (browser) determine:

• It’s a PWA (HTTPS, web manifest, service worker with fetch event handler).
• That the user has found it engaging.

Unlike service workers and the web manifest, there is no standard specification for an add to home screen prompt. Each browser is free to determine what that experience looks like. Since this is a relatively new feature, browsers are tweaking their algorithms and experiences. For example, browsers use a loose definition of customer interest. Ultimately the prompt is triggered when the user makes a return visit within a certain period of time.

At this time Microsoft has not publicly indicated what their prompt experience will look like. We expect to see service worker support ship in a few months, and find out what this experience looks like.

What Microsoft has announced is integration in the Windows App store and extra visibility in the Bing search results. For several years web sites served via HTTPS with a valid web manifest file have been called Hosted Web Apps. HWAs have been able to be submitted to the store for consumers to download just like a native app. Some popular HWAs are Netflix and Spotify apps.



The announced plan is to allow the Bing search engine spider to identify qualified PWAs and automatically submit them to the Microsoft App Store. Site owners will be contacted via their whois information to complete the submission process.

Additionally, Microsoft shared some potential enhanced search engine listings for PWAs, similar to how Google is visually indicating AMP sites. Visual indicators like these can go a long way to encourage organic search traffic as those listings will stand out in a positive way.

PWA Success Stories

Maybe you are not quite convinced progressive web apps are the future. Many popular businesses have already migrated their web sites to progressive web apps. Some have even deprecated their native apps in favor of PWAs.

Recently Twitter relaunched their mobile experience (https://mobile.twitter.com) as Twitter Lite, a PWA.

“The Twitter Lite Progressive Web App combines the best of the modern web and native features. 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.

Twitter has seen 250,000 unique daily users launch Twitter Lite from the homescreen 4 times a day on average.” https://developers.google.com/web/showcase/2017/twitter

Twitter was able to see instant benefits, reported at this year’s Google I/O,

• 65% increase in pages per session
• 75% increase in Tweets sent
• 20% decrease in bounce rate
• 70% decrease in data consumption
• 10M push notifications/day
• 250k unique daily users/day
• < 5 second load over 3G

Ola, India’s leading ride share service, launched a progressive web app and reported these important KPIs,

• 68% increase in mobile traffic in Tier 2 and 3 cities
• In Tier 2 cities conversion rates are same as native app. In Tier 3 cities, conversion rates are 30% higher with the PWA.
• PWA application size is 200KB, which is 300x smaller than downloading an Android app and more than 500x smaller than the iOS app
• 20% of users who book in their PWA had prev. uninstalled their app

“Using just 200KB of data to install, the PWA is at least 300X smaller than downloading the Android app and 500X smaller than downloading their iOS app. Repeat visits use as little as 10KB. This low data consumption translates into a 3.4-second first visit and less than a second for repeat visits on 2G and 3G networks—an ideal solution for millions of Indians.”



Housing.com launched a PWA to combat slow loading times over mobile. They reported these significant improvements:

• 38% more conversions
• 40% lower bounce rate
• 10% longer average session
• 30% faster page load

Flipkart was an early adopter of Progressive Web Apps. They built a wonderful user experience that allows their e-commerce experience to work on and offline. They reported these initial improvements:

• Users time on site with Flipkart lite vs. previous mobile experience: 3.5 minutes vs 70 seconds.
• 3x more time spent on site
• 40% higher re-engagement rate
• 70% greater conversion rate among those arriving via Add to Homescreen
• 3x lower data usage

 

As you can see, businesses that implement progressive web application technology reap the rewards of increased user engagement, lower marketing and development costs. These companies are just a fraction of the businesses taking advantage of PWAs. Thousands more are rolling out PWA support.



Any business decision maker ignoring progressive web apps as the proper digital channel is missing the biggest opportunity to improve their business since the iPhone was announced. This means demand for developers skilled in the technical aspects are in demand.

Summary

Progressive web application technology is starting to gain momentum in the past year. Early adopters have proven the investment returns dividends many times over. The great news is existing and new sites alike can be progressive web applications. You do not need to worry about legacy browsers that don’t support these enhanced super powers, your web site will work just fine there too.

Developers need to master the skills associated with service workers to create the proper infrastructure for sites to leverage all the features offered by PWAs.

Browser vendors are enthusiastically behind progressive web application technology because it is proving level the playing field between native apps and the web. Consumers are choosing progressive by actively using sites that upgrade to PWAs. Currently there are over 2 billion consumers using mobile devices supporting progressive web application technologies. That number grows every day. Microsoft is launching full support later this year and Apple may soon follow.

The real question is - are you ready for the challenge as a developer to master these skills?

Over the next 2 weeks I will be publishing articles to help you start the journey toward creating progressive web applications your customers want to add to their home screen. You do not want to miss a single article!

• Progressive Web App – The Latest Technology Disruption Developers Must Master Today
• Making Web Sites Look Like a Native App Without the App Store
• HTTPS - Be Secure and Not Left Behind
• Service Workers - The Web's Latest Super Power
• What Everyone Ought to Know About the Service Worker Life Cycle
• Ship Instant Loading Web Sites Using Service Worker Pre-Cache
• Who Needs a Network When Your Site Uses Service Worker Caching
• Progressive Web Application Tools and Utilities