Standalone mode with Add To Home Screen is the final ingredient to take the mobile web page to the next level.
This final post is all about our strategy around standalone mode and our approach to leveraging the Add to Home Screen feature. Similar to our previous posts (Post 1 & Post 2), this post is broken into four sections: What, How, Challenges and Conclusion.
We wanted to take a completely different approach to Add to Home Screen, not treating it as just another bookmark, but giving users a completely different experience. Our goal was to align our Yahoo Lite web app with our new Yahoo mobile app. This meant, we needed all of the below features:
- A complete different identification and experience
- An app-like experience
- Offline support
- International launches
- Functionality across browsers
We wanted to achieve all of the above with performance improvements to our mobile web.
One of the biggest advantages of a PWA on Android is to create a WebAPK. With WebAPKs, we gave Yahoo Lite two of the most important native app features:
- Icon on the home-screen
- Notification and deep-link interception
A Manifest can be configured to use any pattern of start_url. We use start_url with unique query param for detection and configuration. Using the query param identification, we achieved the following:
- Rendered a different template for the PWA
- Enabled additional features
- Enabled service worker fetch strategy
- Loaded client library with on-boarding and offline support
We achieved offline support by uniting all of our learnings as shared in our previous two posts together.
- Use indexedDB caching for our client fetch calls (Post 1)
- Make start_url go through service worker network first strategy (Post 2)
- Use online / offline event handlers for showing offline / online prompt and for controlling toggling features
- Use service worker sync to handle offline beacons
Please refer to Yahoo Lite screenshots below:
Progressive Web App (PWA) development provided our Yahoo Lite standalone experience and performance improvements for our mobile webpages. Since our PWA launch, we are seeing following MoM (month-over-month) improvements to our mobile web.
Time spent has increased by 4%
Sessions have increased by 7%
AFT(above fold time) has decreased by 7%
Daily active users has increased by 7%
Link clicks has increased by 1%
DOM interactive time has decreased by 6.5%
Yahoo Lite is showing steady adoption.
Weekly active users has increased by 4.5%
Installs has increased by 0.1%
Sessions has increased by 4.7%
Time spent has increased by 10.4%
Link clicks has increased by 12.4%
International markets are performing much better under 3G and slower CPU.
With ample amount of learnings from our U.S. launch, we could expand Yahoo Lite globally. We have already launched Yahoo Lite experience for the following markets, with more to come soon:
Browsers are embracing progressive web app support. Without many changes, we were able to enable Yahoo Lite on the following browsers on Android:
Standalone mode challenges
We decided to take stand alone mode a step further by giving users a different experience. This meant we needed standalone mode detection on server side for customizations and A/B testing. start_url query string does the trick for the initial page, but we needed the state to be retained across page navigations (not every page is client side navigation). This has been extremely challenging as we get no signals in the request header or the user-agent to identify standalone mode on server. We can only do this on client (refer the code below), but client is often too late for what we need.
Our current solution, which is not very optimal, comprises using event delegate and update URLs during navigation to pass the query param. We hoped that service worker could expose this as part of client (https://github.com/w3c/ServiceWorker/issues/1370) or that browsers could update user agent for standalone mode. We are currently working on a different approach which we think can help us.
Yahoo Lite adoption is growing
The number of subscribers using Yahoo Lite or mobile web daily appears relatively regular. However, users are opting to use Yahoo Lite more and mobile web less, which is expected.
While overall Yahoo Lite time spent is gradually increasing, Yahoo mobile web time is decreasing over time. This trend suggests that Yahoo Lite subscribers are shifting their activity from mobile to Yahoo Lite.
Mobile web engagement is improving
Performance is directly proportional to engagement. With added benefits from PWA, our mobile web engagement is improving.
We have just started our PWA journey and still have long way to go. Our main purpose of these posts is to tell you our story. We hope you find these posts informative.
To try our Yahoo Lite experience, just visit https://www.yahoo.com/ on your android phone and add it to your Home-screen. Based on the chrome version, you would be prompted differently. For Firefox and Samsung browsers, add to home-screen is part of navigation bar.