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

Slide 1

Slide 1 text

Bringing your PWA to the Google Play Store with Trusted Web Activities Henry Lim Google Developer Expert @henrylim96

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

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.

Slide 4

Slide 4 text

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 ???

Slide 5

Slide 5 text

Trusted Web Activity Overview

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

Trusted Web Activity web content Trusted Web Activity web content Chrome Custom Tabs Trusted Web Activity

Slide 8

Slide 8 text

Does not permit other content to draw on top of it Trusted Web Activity web content A Trusted Web Activity

Slide 9

Slide 9 text

Is Trusted because it cryptographically veriﬁes that the app owner is the content owner using Digital Asset Links A Trusted Web Activity

Slide 10

Slide 10 text

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 notiﬁcation opt-in status A Trusted Web Activity

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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 ﬂows New journeys in your app where your team is doing rapid iteration & testing Views for supporting documents such as FAQs or contact forms

Slide 13

Slide 13 text

Getting Started with a Trusted Web Activity 1. Import the Support Library 2. Conﬁgure Digital Asset Links 3. Launch a Trusted Web Activity

Slide 14

Slide 14 text

build.gradle (module: app) dependencies { //... implementation 'com.github.GoogleChrome.custom-tabs-client:customtabs:d08e93fce3' }

Slide 15

Slide 15 text

Adding Digital Asset Links to Android Example TWA [{ \"relation\": [\"delegate_permission/common.handle_all_urls\"], \"target\": { \"namespace\": \"web\", \"site\": \"https://example.com\"} }]

Slide 16

Slide 16 text

Adding Digital AssetLinks to the Web Hosting site domain Android Package name SHA 256 Fingerprint

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

developers.google.com/digital-asset-links/tools/generator

Slide 20

Slide 20 text

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); }

Slide 21

Slide 21 text

How it works

Slide 22

Slide 22 text

The Android Intent System Activity A Android System Activity B startActivity() onCreate() Intent Intent 1 2 3

Slide 23

Slide 23 text

Native Activity Android System launchTWA() https://... Intent Intent 1 2 3 Trusted Web Activity Intent from Native to Web

Slide 24

Slide 24 text

Android System Native Activity my-app://... onCreate() Intent Intent 1 2 3 Trusted Web Activity Intent from Web to Native

Slide 25

Slide 25 text

Supported on 95% of Android Devices!

Slide 26

Slide 26 text

Chrome not Installed?

Slide 27

Slide 27 text

Navigating to a different origin

Slide 28

Slide 28 text

Trusted Web Activity Android Launcher Native Activity Opening a TWA from the App Launcher

Slide 29

Slide 29 text

Trusted Web Activity Android Launcher Opening a TWA from the App Launcher

Slide 30

Slide 30 text

AndroidManifest.xml ... ... ...

Slide 31

Slide 31 text

Trying out TWAs With the SVGOMG demo github.com/GoogleChromeLabs/svgomg-twa

Slide 32

Slide 32 text

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" }

Slide 33

Slide 33 text

don't feel like doing anything ~ Feeling lazy?

Slide 34

Slide 34 text

Convert your PWA With PWA2APK appmaker.xyz/pwa-to-apk/

Slide 35

Slide 35 text

How to detect if the website is running inside a Trusted Web Activity? 1. When opening the page, the Referral will be android-app://, 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.

Slide 36

Slide 36 text

That’s it!!

Slide 37

Slide 37 text

Rules for web content in your TWA

Slide 38

Slide 38 text

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!

Slide 39

Slide 39 text

Lighthouse is a Chrome browser extension that helps you improve the performance, quality & correctness of your web content. Lighthouse will help you fulﬁll 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?

Slide 40

Slide 40 text

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.

Slide 41

Slide 41 text

[ play policies ] [ screenshot of Play policy page w/URL ] Learn more at

Slide 42

Slide 42 text

TWA Case Studies

Slide 43

Slide 43 text

Remote for Slides is a Progressive Web App + Chrome Extension that allows user to control Google Slides without any extra hardware. Remote for Slides

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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.

Slide 46

Slide 46 text

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.

Slide 47

Slide 47 text

Other top brands testing TWAs instead of WebViews

Slide 48

Slide 48 text

What’s next

Slide 49

Slide 49 text

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.

Slide 50

Slide 50 text

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:

Slide 51

Slide 51 text

If you use push notiﬁcations from your web content, Trusted Web Activities can match behavior of native Android apps and auto-enroll users in web push notiﬁcations. You’ll need to update your project to use this feature. Shipping in Chrome 75

Slide 52

Slide 52 text

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.

Slide 53

Slide 53 text

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.

Slide 54

Slide 54 text

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 Overﬂow: http://bit.ly/2WLOYjx