Bringing your PWA to the Google Play Store with Trusted Web Activities

A Trusted Web Activity (TWA) displays a full screen Chrome browser inside of an Android app with no browser UI. Although Android apps routinely include web content using a Chrome Custom Tab (CCT) or WebView, a TWA offers unique advantages when you need Chrome’s performance and features in your app in full screen mode. This talk will cover how to get started using a Trusted Web Activity, case studies and quality criteria for inclusion in the Play store.

Google Slides:
https://docs.google.com/presentation/d/16w1c_usoHB0DqIdz7zHww2gzhNvBtbfmw64cQCmk24g/edit?usp=sharing

Presented at:
- I/O Extended Bangkok, 1 June 2019
- I/O Extended Kuala Lumpur, 16 June 2019

Credit:
- Peter McLachlan, @b1tr0t
- Andre Bandarra, @andreban
- Pete LePage, @petele

Transcript

1. Bringing your PWA to the Google Play Store with Trusted Web Activities Henry Lim Google Developer Expert @henrylim96
3. We’ve had the web on Android for a while The Web has always been an important part of Android development through WebView. The problem is, if you need advanced functionality, you basically need to write a web browser around it. Turns out, writing web browsers is hard.
4. Property Webview CCT ??? Native development effort High Low ??? Mixed Web & Native components Yes No ??? Web/Native bridge Yes Limited ??? Full screen Yes No ??? Safe browsing No Yes ??? Data saver No Yes ??? Form auto-fill No Yes ??? Complete Chrome APIs No Yes ??? Native Chrome Performance No Yes ???
5. Trusted Web Activity Overview
6. Property Webview CCT TWA Native development effort High Low Low Mixed Web & Native components Yes No No Web/Native bridge Yes Limited Limited Full screen Yes No Yes Safe browsing No Yes Yes Data saver No Yes Yes Form auto-fill No Yes Yes Complete Chrome APIs No Yes Yes Native Chrome Performance No Yes Yes
7. Trusted Web Activity web content Trusted Web Activity web content Chrome Custom Tabs Trusted Web Activity
8. Does not permit other content to draw on top of it Trusted Web Activity web content A Trusted Web Activity
9. Is Trusted because it cryptographically verifies that the app owner is the content owner using Digital Asset Links A Trusted Web Activity
10. Trusted Web Activity web content [ fixed footer with generic app-like native controls ] X Trusted Web Activity web content Shares storage with the Chrome browser, including cookies & origin settings such as notification opt-in status A Trusted Web Activity
11. A Trusted Web Activity (TWA) is the best way to display full screen web content in your Android app. It’s faster than a WebView, feature complete, evergreen and easier to use. Fast, full screen web content in an Android App
12. Where you’re using a WebView today! Here’s a few examples: What can you use a Trusted Web Activity for? Journeys where you don’t have APIs ready to use for native, for example some shopping carts & checkout flows New journeys in your app where your team is doing rapid iteration & testing Views for supporting documents such as FAQs or contact forms
13. Getting Started with a Trusted Web Activity 1. Import the Support Library 2. Configure Digital Asset Links 3. Launch a Trusted Web Activity
14. build.gradle (module: app) dependencies { //... implementation 'com.github.GoogleChrome.custom-tabs-client:customtabs:d08e93fce3' }
15. Adding Digital Asset Links to Android <resources> <string name="app_name">Example TWA</string> <string name="asset_statements"> [{ \"relation\": [\"delegate_permission/common.handle_all_urls\"], \"target\": { \"namespace\": \"web\", \"site\": \"https://example.com\"} }] </string> </resources>
16. Adding Digital AssetLinks to the Web Hosting site domain Android Package name SHA 256 Fingerprint
17. > keytool -list -v \ -keystore ~/.android/debug.keystore \ -alias androiddebugkey \ -keypass android \ -storepass android | grep SHA256 > SHA256: BD:92:64:B0:1A:B9:08:08:FC:FE:7F:94:B2...
19. developers.google.com/digital-asset-links/tools/generator
20. MainActivity.java @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mTwaLauncher = new TwaLauncher(this); } public void buttonClick(View view) { Uri url = Uri.parse("https://www.example.com"); mTwaLauncher.launch(url); }
21. How it works
22. The Android Intent System Activity A Android System Activity B startActivity() onCreate() Intent Intent 1 2 3
23. Native Activity Android System launchTWA() https://... Intent Intent 1 2 3 Trusted Web Activity Intent from Native to Web
24. Android System Native Activity my-app://... onCreate() Intent Intent 1 2 3 Trusted Web Activity Intent from Web to Native
25. Supported on 95% of Android Devices!
26. Chrome not Installed?
27. Navigating to a different origin
28. Trusted Web Activity Android Launcher Native Activity Opening a TWA from the App Launcher
29. Trusted Web Activity Android Launcher Opening a TWA from the App Launcher
30. AndroidManifest.xml <manifest> ... <application> ... <activity android:name="android.support.customtabs.trusted.LauncherActivity" android:theme="@style/Theme.LauncherActivity" android:label="@string/app_name"> ... </activity> </application> </manifest>
31. Trying out TWAs With the SVGOMG demo github.com/GoogleChromeLabs/svgomg-twa
32. app/build.gradle defaultConfig { applicationId "org.chromium.twa.svgomg" minSdkVersion 16 targetSdkVersion 28 versionCode 3 versionName "1.1.1" manifestPlaceholders = [ hostName: "svgomg.firebaseapp.com", defaultUrl: "https://svgomg.firebaseapp.com", launcherName: "SVGOMG TWA", assetStatements: '[{ "relation": ...}]' ] resValue "color", "colorPrimary", "#303F9F" }
33. don't feel like doing anything ~ Feeling lazy?
34. Convert your PWA With PWA2APK appmaker.xyz/pwa-to-apk/
35. How to detect if the website is running inside a Trusted Web Activity? 1. When opening the page, the Referral will be android-app://<twa.package.name>, where twa.package.name is the package name used on the Android side of the TWA. 2. Adding an URL parameter. Append a query string to the end of the URL that is launched with the PWA. 3. Using Request-Headers. When creating the TWA Intent, add a Bundle containing the key/values for the a request header.
36. That’s it!!
37. Rules for web content in your TWA
38. A great Progressive Web App consists of three parts. 1. Loads and interacts instantly 2. Works reliably even with intermittent connectivity 3. Enhances to device features, looks and feels like it belongs on the user’s device First, build a great PWA!
39. Lighthouse is a Chrome browser extension that helps you improve the performance, quality & correctness of your web content. Lighthouse will help you fulfill the checklist to build a great PWA, and help you understand the steps you need to take to improve your performance score. Learn more at What is lighthouse?
40. Criteria for TWA use in Play The Play store expects developers to continuously improve. Those expectations apply to web content in TWAs. The criteria for using your web content in Play using a Trusted Web Activity is that (1) your web content must light up the PWA badge in Lighthouse and (2) achieve a performance score greater than 80. As with all Play listing criteria, these requirements will change over time.
41. [ play policies ] [ screenshot of Play policy page w/URL ] Learn more at
42. TWA Case Studies
43. Remote for Slides is a Progressive Web App + Chrome Extension that allows user to control Google Slides without any extra hardware. Remote for Slides
44. Web/Native Bridge Play Store’s policies doesn’t allow any third-party payment other than Google Play’s payment system. Hence, Remote for Slides uses a web/native bridge to solve this issue. When the user clicked on the “Donate” button, it will launch an Android Activity. W ork in Progress
45. Myntra is a leading Indian fashion e-commerce site. Myntra used a TWA as a building block in a “Lite” app to retain users with storage anxiety.
46. OYO Rooms is India’s largest hospitality company. Their Play audience represents their most engaged user segment, and these users convert more than twice as as often.
47. Other top brands testing TWAs instead of WebViews
48. What’s next
49. Trusted Web Activity roadmap The most important thing to know: TWAs will always have access to the latest Chrome features & APIs because they are Chrome, and Chrome auto-updates.
50. Shipping in Chrome 75 Android apps can be composed with a mix of native & web tech. You might start your app with a web experience and transition to native views later. It can be complicated to know when web content has painted for hiding the splash screen, so we’re making it easy. Trusted Web Activities will display a splash screen for you when used as your launch activity. Learn more:
51. If you use push notifications from your web content, Trusted Web Activities can match behavior of native Android apps and auto-enroll users in web push notifications. You’ll need to update your project to use this feature. Shipping in Chrome 75
52. Trusted Web Activities in other browsers Since they’re based on the Android Intent system, TWAs can be implemented by other browsers. The Custom Tabs API is already supported by Firefox & Samsung Internet browser. We hope to see TWAs offered by other browsers in the future.
53. A Trusted Web Activity is the best way to include web content in your Android app. It’s a replacement for WebView anywhere you have full screen content. They’re fast, featureful, and always up to date. Use Trusted Web Activities.
54. Henry Lim Thank you! Google Developer Expert @henrylim96 Peter McLachlan @b1tr0t Andre Bandarra @andreban Pete LePage @petele Helpful after-event resources • Build a great PWA: http://web.dev • TWA getting started guide: http://bit.ly/2FOJJch • TWA on Stack Overflow: http://bit.ly/2WLOYjx