• Blog >
  • Delight your users with progressive web apps

I recently took part in a few days training at Google’s London Academy to learn more about the rapidly developing area of Progressive Web Apps (PWAs). PWAs are a collection of technologies being promoted by Google and adopted by more and more forward-thinking organisations.

IMG_20171114_155226.jpg

Me at Google's London Academy

In this post, I’ll be exploring why it’s time for PWAs to take the limelight, and why the value of native apps needs to be evaluated more critically.

 

What happened to web apps?

The iPhone was originally launched with Steve Jobs’ intention that all of its third-party applications would run within Safari as self-contained web pages, also known as web apps. The idea proved to be unpopular and was quickly put to one side with the launch of the App Store in 2008. Since then, we’ve seen an explosion in the development of native apps, with many organisations considering an iOS and Android app an essential part of their digital strategies.

In 2015, mobile device users spent 87% of their time using native apps, and only 13% of their time browsing web apps (comScore Mobile Metrix, U.S., Age 18+, June 2015). But the same research found 80% of the average user’s time spent in native apps was hogged by just three apps. A huge amount of native apps are available, but many are installed then quickly forgotten about.

Native app development can require specialist skills for each platform, the duplication of planning, development, testing effort, and requires money to be poured into promoting each app to compete for the thinly scattered attention of users.

Web apps, however, are easily and instantly accessed via a URL and can be developed using the same web technologies and developers as your existing website. They start life as regular web pages but can be installed on a user’s home screen to elevate them to ‘app status’, meaning they can be launched and updated instantly without waiting for App Store approval from Apple or Google. So why aren’t web apps everyone’s default option?

 

Progressive Web Applications and the capability gap

Our instructor at the Google Academy (hi Edsel! 👋🏻) explained the popularity of native apps with the concept of a ‘capability axis’:

  1. Native apps have typically scored well when it comes to capabilities; they launch quickly and feel snappy, they can work offline, have access hardware like the user’s camera or GPS, and they benefit from an engagement boost provided by being able to send push notifications to users.
  2. Web apps have historically been slow to gain the above capabilities, but they benefited from a high score on another axis, reach. Web apps are easily discovered via URLs and search engine results, and access is frictionless - you click a link and the content loads, with no redirecting to an App Store and waiting for a download.

Progressive Web Apps close this capability gap - a PWA is easily shared via URLs, requires no App Store usage, loads near instantly, and it benefits from access to features previously only available to native apps. A PWA is capable enough to deserve its ability to be installed to a user’s home screen or to send notifications to their notification tray. 

IMG_20171113_093130.jpg

Edsel hosting a lecture on PWAs at Google's London Academy

 

What exactly is a PWA?

The PWA term is a handy way of describing a collection of features and characteristics. Some PWA features have been recently enabled by new technologies, while others build on existing best practice.

In general, a perfect PWA would be:

  • Progressive, the app should work for each browser, with users with the latest browsers receiving all the bells and whistles, but other users still getting an excellent experience.
  • Served over HTTPS, to ensure security and get access to the latest browser features.
  • Responsive, so the application can adapt to any device, past or present.
  • Connectivity independent, so they work offline or on a flaky connection.
  • Fast. The app should be responsive within seconds of its first load, and subsequent loads even quicker. Page transitions should feel ‘app-like’, and be as close to instant as possible.
  • Re-engaging, through features like push notifications.
  • Installable to the user’s home screen. The PWA should provide the correct information to prompt the user to add the PWA to their home screen. This is key, as once the PWA has been installed on the home screen it will launch full-screen, and feel much more like an app than a web page.
  • Each page should be discoverable and shareable via a URL. This is a key advantage compared to native apps. Content should be deep linkable for sharing, opening in new tabs, and indexing in search engines.

 

Progressive Web Apps use modern web capabilities to deliver an app-like user experience. They evolve from pages in browser tabs to immersive, top-level apps, maintaining the web's low friction at every moment.

Addy Osmani, Google

 

A quick note on browser support

The development of PWA associated technologies has been spearheaded by Google. Chrome currently has the widest support, with Firefox coming in at a very close second. Opera and the Samsung browser have good support, while Safari and Edge are currently working on support for service workers, a key PWA technology.

While Safari may not support the full set of PWA features, the P (for progressive) in PWA means that Safari users will still benefit from some of them. When AliExpress switched to a PWA, conversions from their iOS users still increased by 82%. Safari is likely to eventually receive service worker support, and until then the one billion worldwide Chrome users (plus Firefox and Opera users) will be delighted by the experience that a PWA can offer.

 

Who’s using PWAs already, and what are the benefits?

  • AliExpress, a huge Chinese eCommerce player, relaunched their mobile site as a PWA. They saw a 74% increase in time spent on their website, a 2x increase in the number of pages visited, and a 104% increase in conversion rates.
  • The Washington Post built a simple PWA version of their headlines feed as a proof-of-concept and achieved a page load time of 80 milliseconds.
  • Luxury cosmetics brand Lancôme launched a PWA and saw a 17% increase in conversions.
  • Twitter switched their default mobile web experience to a PWA in April 2017. They saw a 65% increase in pages per session and a 75% increase in Tweets sent. The web app rivals the performance of Twitter’s native apps but requires less than 3% of the device storage space compared to Twitter for Android.
  • Flipkart, India’s largest e-commerce site, switched from a native app-only mobile strategy to a PWA and saw a 70% increase in conversions, a 3x increase in time spent on the site, and a 40% higher re-engagement rate.

 

What’s next?

We’ll be implementing PWAs as a future development solution to some of the challenges and opportunities that our clients experience. If you feel your website’s mobile experience could be improved, or the benefits of PWAs have piqued your interest, then please get in touch through our contact form to find out how CTI can help.

 

What the Public Sector can learn from how disruptive brands use Open Source

 

● ● ●