close

The future of websites is progressive web apps

go

There’s been a lot of buzz lately regarding Progressive Web Apps and how they will replace native mobile apps. 

We’re all using our smartphones more than ever before so it seems like a natural progression but from the conversations I’ve been having, there seems to be a bit of confusion as to what a Progressive Web App actually is. The simplest way to think of a Progressive Web App is as a website that has all of the capabilities you would expect from a site, but it looks and responds like an app. Progressive Web Apps are not a HTML, CSS and Javascript tool or framework to build hybrid or native mobile apps, like PhoneGap or React Native. It’s simply a website that uses modern techniques and tools to improve the overall user experience. 

The line between what makes a website and a web app are already blurred and Progressive Web Apps take this one step further, by blurring the line between the web and native apps. They merge the best of the modern web with the experiences users have become used to on native apps, meaning that websites and web apps are essentially the same thing in 2016. 

TL;DR Progressive Web Apps are a good practice in building websites in 2016. The website will work offline and will be indistinguishable from a native app on the device.

What is a Progressive Web App?

A Progressive Web App is:

  • Progressive - works for every user (regardless of browser choice) because it's built with progressive enhancement as a core tenet.

  • Responsive - fits any form including desktop, mobile, tablet and 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 - doesn’t require complex installation, you can easily share via a URL.


Source https://developers.google.com/web/fundamentals/getting-started/codelabs/your-first-pwapp/


Installable websites

The way you install Progressive Web Apps on a device might be different to what you expect. They don’t need to go through an app store. Instead, they’re installed from the website straight to the device. The site install isn’t immediate and a user can’t be prompted to install when they first access the page. To be able to install, the user has to engage with the site first and then after 5 minutes a banner is shown enabling you to install onto the device. (You can defer the banner to a more appropriate time if you need to). 

The capability of modern browsers on mobile devices has improved accessibility and allows you to access features you might not have been able to before. Head to https://whatwebcando.today/ to see a list of what your browser is capable of today.
These are the features available on my Samsung Galaxy 5 for Chrome (at the time of writing). The bundled Android browser has similar support.

Push Notifications Foreground Detection Permissions Offline Mode
Home Screen Installation Background Sync Touch Gestures Speech Recognition
Clipboard (Copy & Paste) Point Device Adaption Bluetooth Audio & Video Capture
Recording Media Real-time Communication Geolocation Device Orientation
Device Motions Online State Vibration Battery Status
Fullscreen  Screen Orientation & Lock Presentation Features Offline Storage
File Access Storage Quotas    

 

Re-engaging websites

Push notifications can notify a website when a resource changes and notifications work like native notifications, with action buttons. This is great for using customised and relevant content to engage with the user. Once the user accepts notifications they’ll be sent to the device. It’s not even necessary to have the browser open to receive notifications and unlike native mobile push notifications, it also works on desktops too.

What makes a good notification?

Timely - a timely notification is one that appears when users want it and when it matters to them.
Precise - a precise notification is one that has specific information that can be acted on immediately.
Relevant - a relevant message is one about people or subjects that the user cares about.

cc-good.png

 

flight-delayed-good.png

Source https://developers.google.com/web/fundamentals/engage-and-retain/push-notifications/good-notification

Offline Websites

The backbone of  Progressive Web Apps are service workers. A service worker is a script that runs on a separate thread from the site and intercepts network requests. It’s the service worker that enables the site to work offline when there is no network connection. It works by caching assets and/or data in the browser. So when there is no connection, the browser will load data from the cache storage. You can also have different strategies for your service workers based around how it retrieves assets and data e.g. you can have a cache first strategy, where the browser will first check the cache before attempting a network request, making page loads super fast. Or you could have a strategy that returns whichever is fastest, the cache or the network. 

Service workers are not yet implemented in all browsers but you can use it on Firefox, Chrome and Opera. It’s in development in Edge but isn’t supported in Safari - it’s in their 5 year plan. When I first heard of service workers, as there wasn’t cross browser support I immediately dismissed it. But a rough search on smartphones and online browsers shed some light on why it was worth investing in.

Smartphone Market Share

Browser Market Share
Android 87.6%
iOS 11.7%
Windows Phone 1.8
Other 1

Source https://www.idc.com/prodserv/smartphone-os-market-share.jsp
Browser Market Share

Browser Mobile Share % Desktop Share %
Chrome 53.60 53.92
Safari 27.10 4.04
Android Browser 8.68 0.01
Opera Mini 6.27 -
Microsoft Internet Explorer 1.64 25.60
Firefox 0.65 9.56
Microsoft Edge 0.56 5.17
Opera 0.46 1.33
BlackBerry 0.15 -
Other 0.89 0.37

Source https://www.netmarketshare.com/browser-market-share.aspx?qprid=0&qpcustomb=&qpsp=70&qpnp=2&qptimeframe=Q&qpcustomd=0 - 2016 Q4

Android has 87% of the smartphone market and Chrome has 53% of both the mobile and desktop browser markets. That’s a significant share of the market, which is only going to increase as more countries that can’t afford the high-end devices we are used to in the west come online. Google and the other major browser vendor (with the exception of Apple) are aggressively pushing Progressive Web Apps. It’s something which can and should be used now but it’s still early days for Progressive Web Apps. As patterns emerge, I think they’ll become the standard way to build websites.

Conclusion

If you’re still not convinced, watch Building Progressive Web Apps Today with Thao Tran at the Chrome Web Summit, who gives insights on how Progressive Web Apps have already helped many businesses worldwide.

Google also has some case studies https://developers.google.com/web/showcase/2016/ highlighting some of the benefits companies have seen since switching to Progressive  Web Apps.

Alibaba

Alibaba.com is the world’s largest online business-to-business (B2B) trading platform, serving 200+ countries and regions.

    •    76% higher conversions across browsers

    •    14% more monthly active users on iOS; 30% on Android

    •    4X higher interaction rate from Add to Homescreen


Housing.com

Housing.com is one of India’s top startups

    •    38% more conversions

    •    40% lower bounce rate

    •    40% lower bounce rate

    •    30% faster page load


AliExpress

    •    104% for new users across all browsers; 82% increase in iOS conversion rate

    •    2X more pages visited per session per user across all browsers

    •     74% increase in time spent per session across all browsers


Konga

Launched in 2012, Konga is a leading e-commerce website in Nigeria, selling everything from books to fridges to mobile phones.

    •    92% less data for initial load, vs. native app

    •    82% less data to complete first transaction, vs. native app

    •    63% less data for initial load, vs. previous mobile web experience

    •    84% less data to complete first transaction, vs. previous mobile web experience


Source https://developers.google.com/web/showcase/2016/
 

Author:

screen_shot_2016-08-19_at_12.41.06
Otis
  • pwa
  • javascript
  • service workers
  • progressivewebapps
  • front-end
  • web development

Get in Touch