Who still haven’t experienced the 2 years old next big thing for mobile web?
As of January 2017, there are about 3.8 billion active Internet users, about 3.5 billion active mobile Internet users. These latest data suggests that more than 90% of the world’s Internet users go on-line via a mobile device. That’s an incredible large audience that mobile web and native applications have.
How these mobile users consume Internet?
There are two basic ways; Straight to the website or using a native App.
Below is a recent breakdown comparing monthly unique visitors to top 500 native Apps and top 500 mobile websites.
For a more closer example, if you are reading this article on phone, most of you might using the native Medium App. But if you are not, you might not a regular Medium user, are you?
Why “more reach” for mobile websites?
Think about a situation when you need some information quickly. The answer is in your mobile phone’s browser. You find most of the information from web sites. And it’s less likely to search for a native App for that.
Why “less reach” for native Apps?
We can see that, the web reaches more than 2 times as many people. This is mainly because there’s a barrier before using a native App.
Take a QR code scanner native App. Following is a must do procedure before get an actual use of the App for the first time.
- Load store or a browser
- Search for “QR code scanner”
- Click install
- Accept permissions
- Download, wait…
- Use
Only few users will go through this barrier and finally use the native App.
“In a consumer mobile App, every step you make a user perform before they get value out of your App will cost you 20% of users.”- Gabor Cselle — Google
Let me convince you this more,
In the 2017 U.S. Mobile App Report, they identify that a majority of smart phone users don’t download any Apps in a month and the “average user”, downloads only two Apps in a month!
Why “less engage” in mobile websites?
It’s less likely that you will visit the same website again because, it’s a lot harder to type a URL or find the link that redirected you to that page.
And you need to wait until the website loads!
According to a recent analysis conducted by Google with 10,000+ mobile web domains, they have found that the average load time for mobile sites is 19 seconds over 3G connections.
- Over half of visits are likely to be abandoned if pages take longer than 3 seconds to load
- One out of two people expect a page to load in less than 2 seconds
- 3/4 top mobile sites take more than 10 seconds to load
With that, it’s clear that people’s expectations for mobile experiences have grown. Simply loading on a mobile device is no longer enough, mobile sites must be fast and relevant.
Why “more engage” in native Apps?
In the other hand, we can see that the average user spends 16x more time on a native App than they do on a mobile website. Because,
- native Apps have features like push notifications and icons on the home screen that engage people with the App more.
- Native Apps are faster. Once it’s installed on your phone, you get a meaningful content in few seconds for every re-launch.
2 in 3 smart phone users keep their #1 most used App front on the home screen. This indicates that an icon on home screen is an essential for a heavy user engaging App.
Last year’s (2016) increase in ‘push notification fatigue’ reversed in 2017. So this indicates that users are more engaging with native Apps with the help of push notifications.
What can we do?
With above statistics, we can clearly see an opportunity to make our mobile websites more user engageable.
Just add what’s missing from mobile websites to get that user engagement like in native Apps!
- Make it load faster
- Give it a home screen icon
- Introduce push notification facility
With that, users will get a native-like experience from the web and engage more with the website.
Is this already done in the web?
The web has evolved very fast in recent years introducing hundreds of APIs to improve the native like capabilities of web browsers. Specially, the access to hardware on your smart phone.
Here’s a screenshot of whatwebcando.today for my Chrome 60.0 stable on Android, as of August 2017.
With these emerging web capabilities, and couple of more tools (Service Worker API, Web App Manifest), Google introduced a new way of making mobile web Apps called “Progressive Web Apps” (PWA) two years back.
You can make your web experience radically better by building a PWA and that can help you engage and retain users who are already coming to you.— Sam Brich (Product Manager, Google)
Don’t think PWA is another whole new framework to build mobile Apps! It’s simply a term used to denote web Apps that use the latest web technologies. As such, this year’s PWAs will be average web Apps in a few years.
What makes a web App, progressive?
According to Google Developers a progressive web App should have following basic characteristics. I'm not going to discus too deep in to the details, but let me interpret them in to a more simpler version.
- Progressive — Works for every user, regardless of browser choice
- Responsive — Fits any form factor: desktop, mobile, tablet.
- Works offline — Load instantly and never show the dinosaur, even in uncertain network conditions.
- Feel like a natural App on the device — Never show 404 pages (use application shell architecture). After adding home screen icon, it will launch with a splash screen.
- Fresh — Always up-to-date
- Safe — Served via HTTPS to prevent snooping and to ensure content hasn't been tampered with.
- Discoverable — Search engines can find it. After added to home screen, it’s identified as ‘application’. You can find it in applications.
- Re-engageable — Makes re-engagement easy through features like push notifications.
- Installable — User can be prompted to Add to Homescreen (has less friction than the installation process of a native App)
- Linkable — Easily share the application via URL, does not require complex installation.
If you haven’t properly used a PWA before, you may wondering how you've missed this for last two years!
So, take a look at some great examples for PWAs and come back if you would like to know how to make a PWA just in few minutes. Don’t forget to use the standalone method via the icon set on home screen.
- https://airhorner.com/ 2015
- https://www.flipkart.com 2016
- https://mobile.twitter.com 2017
- Or if you like to discover more PWAs, visit https://pwa.rocks
Did you feel how fast and the native like experience of those Apps?
As an example, Twitter Lite PWA takes up less than 1MB, and has all the features as the native App, including offline support, push notifications, and more, has 30% faster launch time than the native client and can save up to 70% on data.
At the beginning of this article, I elaborated why more users reach mobile web than native Apps and engage more with native Apps than mobile web Apps. Take this QR code scan PWA App , you can get an actual use of this App in few seconds, without all the frustrating install process!
Compared to the native Apps’ frustrating process of “ install and use”, PWA has inverted that for “use and install”! As PWAs are web Apps, they already have more user reach. So with this native like experience, PWA can have both user reach and continuous user engage!
As a summary, PWAs combine the best of native Apps and websites.
How do we make a PWA?
If you’re interested in building a Progressive Web App, trying out what it’s like, there’s an easy way that I can recommend you to get started. Facebook’s Create React App team announced at Google I/O 2017, that any web Apps built with create-react-app will be Progressive Web Apps by default. And you can simply experience this in few minutes. To make it “Secure” you can host it free on Firebase which serves over HTTPS.
Looking for more? Check out this cool tutorial from Google on developing a PWA from scratch.
How to know that you just made a PWA?
It’s easy as pie! You can use a tool like Lighthouse to audit an web App for PWA features. It’s available in chrome Dev Tools ( from Chrome 60 update), as a Chrome extension or as node CLI. You can get a report on how much a web App is a PWA like below. They do the audit as specified by the baseline PWA check-list By Google.
This is the Lighthouse report for my personal PWA. https://maliththilakarathne.com
Future of PWA
According to Google Developers, 215 APIs have been shipped last year alone, to strengthen the capabilities of web browsers (web bluetooth, image capture..). So the PWAs will be more capable day by day.
This week, Google released the final version of Android 8 which is now known as Android Oreo. According to the article, “Android Oreo takes a bite out of Progressive Web Apps”, in Oreo there are few things that will add new problems to PWA icons like, long add to home screen process and App short-cut with Chrome badge.
But as the author predicts, we can hope that with the “Web APK” becomes stable in the future, most of these problems related to icons will go away.
So, that’s only about the icons! PWA will still deliver you fast, reliable and Engaging user experience in the web.
TL;DR
- Ordinary web Apps — use online (high user reach, low user engage)
- Native Apps — install and use (low user reach, high user engage)
- PWA — use and install (high user reach, high user engage)
Well… if you have recognized the need of PWAs and felt the amazing user experience of PWAs via this article, make sure to give me some “claps” 👏👏👏 and show your support.
