Yahoo.com PWA, Part 3: Standalone mode

5 min readDec 3, 2018

In the previous post, we discussed Service Worker, and now in this post, we share more about Standalone mode and Add To Home Screen.

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.

What

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
On-boarding
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.

How

Web APK

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

Manifest

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

Offline

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:

**Install prompt, home-screen icon and on-boarding**

Performance

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%

Lighthouse numbers

International markets are performing much better under 3G and slower CPU.

Global launches

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:

United States
India
Brazil
France
United Kingdom
Germany
Italy
Spain
Singapore

Browsers

Browsers are embracing progressive web app support. Without many changes, we were able to enable Yahoo Lite on the following browsers on Android:

Chrome
Firefox
Samsung
UC

Challenges

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.

Conclusion

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.