Transformations Of The Modern Mobile Web And PWA- Google I/O 2017
I am overwhelmed with information right now. Day one of Google I/O 2017 had so much in store about mobile web and especially on Progressive Web Apps, that Google IO 2017 was truly worth the wait. The amazing new capabilities, clearly show that web is the future. Believe it or not, 5 Billion devices are connected to the web. Chrome alone runs 2 billion devices for phone, tab and laptop!
Here is a sneak- peek into Google I/O 2017, Day One –
Why build Progressive Web Apps?
-Web reaches 3X more peoplee
– Deeply engaging experiences from first touch point
In 2011 Financial Times abandoned native apps and build a PWA and have never looked back ever since.
– 43% increase in session duration
– 3X in scroll depth due to personalization
– 100% more engagement
In this era, the audience is as knowledgeable as they can be. There exists an never ending need for them to be understood by brands.
After using PWA, Forbes witnessed a 43% increase in per user session and a 100% increase in the session duration thus doubling the length if taken an average!
Google I/O 2017 – What’s new ?
Improving add to home screen feature
Initially, web apps could only be added to the mobile homescreen. Now is is possible to add it in other parts of the android system. Eg – app drawer and system settings, just like native apps.
“Users will be able to find web apps in many places that were formerly reserved just for apps.” said Sam Birch, (Product Manager), in the Google I/O 2017.
PWA provide users with a splash screen like experience, similar to native apps. No element of Chrome gets displayed these days once the web app is opened. Even intents can be handled on all other apps and not just on Chrome. The toolbar saw some improvements, supporting the jumping back, carrying and opening a Chrome tab.
A conservative approach was undertaken in sending notifications so as not to appear pushy and spammy. This resulted in a 48% more engagement level. Thus the magic mantra of pushing notifications after a few minutes along with a couple of visits.
The whole point in showing the notification prompt later was to target the user after he/she becomes a bit more engaged and hence would be willing to take any step in your favour. Flipkart delayed prompting until user made a purchase, a moment where the user is satisfied from their service.
As soon as chrome realizes the site you are visiting is a progressive web app, it fires a prompt before the install.
If you had visited the event earlier on that page, the default prompt gets suppressed and a trigger would follow with a user action.
PWA on desktop?
Yes, you read it right. It was officially announced at Google I/O 2017 that PWA would now spread its tentacles onto larger screens with Chrome Android. After a PWA is added to the desktop, a new shelf item gets created but upon opening, it acts like a stand alone item with a splash screen.
Samsung internet web app
The bookmark option that we very well know, will automatically turn into a ‘+’ sign once Chrome recognizes it as a PWA. Tapping in the + button, will option to bookmark and Add to the home screen.
PWA in Windows play store
Since PWAs are like a partial app, Microsoft Edge in the Build Conference announced that they would be soon appearing on Playstore. Users would be easily able to search of them, install and uninstall just like a regular app. A live demo for this was shown at Google I/O 2017.
What’s even better is that standard features of web apps like push notifications can actually follow you from browser-to-browser on your Android device!
You can test all these on your site with the flag for now – chrome://flags#enable
Ola riding towards progress
Ola, India’s largest ridesharing service, is using PWA. It gets 1 million rides on a daily basis, is active in 110 cities and has over 600k drivers.
The time taken by the Ola PWA is between 1-3 seconds as it fetches only those components that are essential when the user launches it. This fetching happens in the background and after all components get loaded, the repeat load time actually stays under a second.
This resolves any network issues and also uses quite low data bandwidth. After using PWA, the mobile traffic for Ola has accelerated to a whopping 63% thus expanding its reach further. Its an amazing re- targeting tactic too, as it was noted that 20% of the PWA bookings were from users who had earlier uninstalled the app!
One of the reasons why PWAs are wildly successful is because they have multiple browsers committed to them. “If a browser you care about is not on the list supporting PWA…yet, PWAs are designed to work well everywhere.” said Rahul Roy Chowdhary, VP, Product Management Google, throwing some hope to the iOS users.
Lancome has 65% of its mobile web users on iPhone. The fact that a few PWA features are not yet supported by iOS hadn’t stopped them from using it which is why a 53% hike in increased session duration did not come as a surprise!
With the advent of payment API, users are able to fill in credit card and Google forms information faster and more easily. Since now it supports payments from PayPal, Samsung Pay and Alipay, it makes your website even more robust and yet flexible when it comes to accepting payments. In US alone, $123 billion was spent on mobile e-commerce in 2016!
70% bytes of intent traffic is only for video. Using PWAs, videos can be played instantly by prefetching the initial couple seconds of that video. After the phone is flipped to a horizontal mode, full screen along with all the custom controls become visible. Media properties can appear even on the lock screen and work in the offline mode too after it had been saved.
It helps to track page performance, page efficiency, accessibility and gives a score between 0 – 100, showing where you are falling behind. It Shows your offline score and how fast your website loads in flaky networks.
Work Box enables to get the most out of the service workers. It can be integrated to the existing tools. Work Box provides common patterns, best practices like flexible catching, backing sync or usage stats when the user is offline.
Accelerated Mobile Apps
A lot was talked about the capabilities of AMP in Google IO 2017. AMP provides content focused experiences for modern mobile webs. It is based on web components. On an average, a page loads less than a second to send 10 times less data. People are engaged better as they can access content faster.
Twitter, Tumbler, Welbo, QZone are linking to AMP. AMP is also seeing success in Ecommerce to improve interaction and to create an engaging UX. Twitter lite links to AMP pages and uses less mobile data. 70% data saving for users on data saving mode.
This has personally happened to me many a times – the web page opens, I start reading the content and whoop, the page jumps! Not once but quite a few times as the off screen content loads. Well, say goodbye to this irritating issue! With the arrival of scroll anchoring, the position of the scroll gets locked down to a visible element on the screen. This way, the user stays on the same position even when the content is still loading.
After an amazing Day 2 of Google IO 2017, which was an knowledge package of its own. Looking forward to Google I/O 2017, day 2. PWA is doing wonders; things we thought were unimaginable. More power to Google I/O 2017! More updates your way.