This content originally appeared on web.dev and was authored by Ankit Jain
Founded in 2013, OYO Rooms has become one of India's largest hospitality companies, with hotels across hundreds of cities in more than 80 countries. That success came in part from making their online reservation experience as fast and easy as possible.
Until recently, the OYO team was offering both a Progressive Web App (PWA) and an Android app to achieve that goal. The Android app had significantly higher engagement: users converted three times as often as those using the PWA. But users also tended to uninstall the Android app over time because of concerns about storage space.
To reduce the Android app's footprint on users' devices while keeping the benefits of the Android experience, the team decided to turn to Trusted Web Activities (TWAs).
What's a TWA?
Before Chrome 72, Android developers who wanted to display web content in their platform-specific apps had to use WebView, which came with some meaningful limitations: it's not as fast as Chrome and doesn't include all of Chrome's APIs and features. So, if you wanted behavior that WebView's rendering engine didn't support, you had to build your own browser around it—which isn't exactly trivial!
Trusted Web Activities (TWAs) address those limitations by showing web content directly in Chrome. Breaking down the TWA name helps explain its features:
- An activity is one screen or view in an Android app's user interface.
- TWAs use Chrome to display web content for the app's activities.
- A TWA's content is trusted because it uses Digital Asset Links to verify that the same person created the Android app and the web content that it's displaying.
It's easy to confuse PWAs and TWAs. PWAs use web technologies to create experiences comparable to Android/iOS/desktop apps. TWAs allow you to display a PWA in an Android app wrapper that can be downloaded from the Google Play Store.
Why create a TWA rather than a platform-specific app?
More and more Android apps are delivering content from developers' own websites. TWAs acknowledge that reality by offering the best of the platform-specific and web app worlds:
- They have all the expected functionality of Android apps, including a launcher icon, push notifications, and fullscreen display.
- They offer the performance and features of Chrome.
- They use the version of Chrome installed on the device, so they always have the latest APIs and features.
- They use significantly less storage than a platform-specific app, which is a concern for many users, especially those with lower-end devices.
Running in Chrome also has a number of handy perks. For example, TWAs share Chrome's storage, including cookies, passwords, and anything stored using the Web Storage API. One benefit of this setup is that users stay logged in across the browser and the TWA app.
TWA support will soon be available in several Android browsers; both Samsung and FireFox have committed to TWA. You can specify what browser you want your app to use, though it's best to select the user's default browser.
Building OYO Lite
The OYO team wanted to give their users a full-featured app experience without having to compromise on device storage, so they decided to create OYO Lite, a TWA built on their existing PWA.
Starting with a PWA is essential. Users expect a full-featured experience in an app they run from the Android launcher, so web content served in a TWA must provide that experience, including:
- Fast load and response times
- Reliability when the user has limited or no connectivity
- A unified look and feel (by providing, for example, a splash screen and app color)
Meeting the Lighthouse requirements for a PWA is actually a prerequisite for TWAs. To learn more about building a PWA, see the Installable collection.
If you already have a PWA, the steps for creating a basic TWA are designed to be low-effort, even if you've never developed for Android before. Here's what the OYO team did:
- Created an
Android manifest file
containing a
DEFAULT_URLand intent filters to allow the app to display content from oyorooms.com. - Removed the browser's URL bar using Digital Asset Link verification.
- Created a launcher icon.
- Created a custom splash screen.
And here's the result:
For a more detailed walkthrough of building a basic TWA, check out Peter McLachlan and Andre Bandarra's TWA talk from Google I/O 2019.
To learn more about how the OYO team created OYO Lite—including a deep dive into their approach for creating a splash screen that's accessible to all Android users—take a look at Ankit Jain's post on Medium.
How a TWA helped OYO meet the needs of its users
By storing most of their app assets in Chrome's cache, the OYO team was able to get the initial download size for OYO Lite down to a svelte 850 KB. That's just 7% the size of their Android app!
That small footprint combined with the amenities of an Android app downloadable from the Google Play Store led to significant gains in user engagement:
- A conversion rate three times higher than the PWA's rate
- Three times more logged-in users than the PWA, on average
- A 4.1 rating on the Google Play Store
And aside from the user-facing benefits, going with a TWA meant the team had only one codebase, which they could easily update without having to wait for users to download the latest version of the app.
Build your own TWA
OYO's online reservation platform is only one use case for TWAs. They can be a great fit for many projects currently built as platform-specific apps or web pages, from shopping carts and checkout flows to FAQs and contact forms.
Check out these links to get started with TWAs:
- Using Trusted Web Activities
- Taking Chrome Full Screen with Trusted Web Activities (YouTube)
- A complete guide to Trusted Web Activity (TWA): OYO case study
This content originally appeared on web.dev and was authored by Ankit Jain
Ankit Jain | Sciencx (2019-11-07T00:00:00+00:00) OYO Lite: a TWA with the best of web and Android apps. Retrieved from https://www.scien.cx/2019/11/07/oyo-lite-a-twa-with-the-best-of-web-and-android-apps/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.