There’s been a lot of buzz lately regarding Progressive Web Apps and how they will replace native mobile apps.
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.
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|
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.
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
|Browser||Mobile Share %||Desktop Share %|
|Microsoft Internet Explorer||1.64||25.60|
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.
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.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 is one of India’s top startups
• 38% more conversions
• 40% lower bounce rate
• 40% lower bounce rate
• 30% faster page load
• 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
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
- service workers
- web development