What’s new for web apps in Play

(upbeat music) - Chrome 86 introduced changes to the Trusted Web Activity quality criteria. The Play billing API will soon be available to PWAs with a Trusted Web Activity. And PWAs can now be uploaded to the Play Store on ChromeOS. I’m André Bandarra. - And I’m Adriana Jara. And let us show you how to prepare your app and take advantage of the new features. - We recently launched Bubble Wrap, a command link tool that helps web developers to use their PWA in an Android app.

00:40 - We continue to improve the tool, and we’re happy to say that external dependencies are now downloaded automatically when running the tool for the first time. No more messing around with downloading files, unzipping, or typing in paths. The app creation flow was also improved, with more helpful description of the input fields and better validation. A frequent request from developers of game and media applications was to be able to start apps in immersive mode and lock them to a specific orientation from the home screen, and Bubble Wrap now supports exactly that. It is possible to choose the start-up modes when initializing the application.

01:21 - Users expect applications installed on their devices to have consistent behavior, regardless of technology. When inside the Trusted Web Activity, the geolocation permission can now be delegated to the operating system. When enabled, users will see the same dialogues as apps built with Kotlin or Java, and find controls to manage the permission in familiar places. One of the advantages of using Trusted Web Activity is that the output binaries are small. Bubble Wrap has been optimized and now generates binaries that are 800K smaller.

01:54 - That’s less than half the size generated by previous versions. Bubble Wrap is also now capable of generating app bundle files, which is a different format to package an app when publishing to the Play Store. Developers should now prefer this format, as it will be required by the Play Store starting in the second half of 2021. As a developer creating an Android app, you will need to update your app on the Play Store from time to time. Reasons might include new Trusted Web Activity features or changes to the Android ecosystem.

02:26 - To update an application, start by ensuring you have the latest version of Bubble Wrap, then run Bubble Wrap updates to apply the latest application template to an existing project. Finally, run bubblewrap build to generate the application binary. The quality criteria has changed on Chrome 86, and errors in the web app are now delegated to the Android app. This ensures that developers are either handling those errors properly in the web app or that the application crashes in a way that is consistent to other applications on the device, regardless of technology. It’s implemented for three different situations.

03:06 - First, when validation of the relationship between the web app and the Android app fails. Second, when the app fails to handle the offline scenario and the Chrome dinosaur would be displayed. Finally, when opening pages that cause the server to return a 404 or 500 error. The best way to handle those errors is to prevent them from happening in the first place, and you can use a service worker to do just that. This snippet shows a Workbox plugin that handled those scenarios.

03:38 - Learn more about creating custom strategies for Workbox on the Extending Workbox talk by Jeff Posnick. Finally, for more information on the quality criteria changes, check out the linked blog post. We received feedback from developers worried about devices where Chrome is not installed or is not the user’s preferred browser. With Samsung internet adding support for Trusted Web Activity from version 13 and above, we are happy to say that most browsers on Android now support Trusted Web Activity. Besides meeting requirements when selling digital goods, Google Play billing enables developers to remove friction from purchase flows.

04:20 - And we are happy to announce that, starting on Chrome 88, developers building with Trusted Web Activity will be able to combine the payment request API and the digital goods API to implement purchase flow via Google Play billing. My colleague Adriana will tell us more about how to use the digital goods API on the web app and configure it on the Play Store. Over to you, Adriana. - Thank you, André. As André mentioned, the digital goods API gives you access to tools in the Play Store that make managing digital goods purchases easier for you and for your users. To use the Play billing payment flow, you’ll need to configure your catalog on the Play Store, as well as connect the Play Store as a payment method from your PWA. To walk you through the process, let’s say I have an app to create the perfect digital banana bread.

05:13 - I have created the Trusted Web Activity and added the listing to the Play Store. Let’s start by configuring our product catalog. In the Play Console on the left-side menu, find the Monetize section, and then go to Products. There, we can create in-app products or subscriptions. For our example, in-app products would be things like bananas or nuts for the bread. Here, you can see a list of existing products and use the Create Product button to add a new one. We’ll need a product ID, a name, a description, as well as a price. It’s important to create meaningful and easy-to-remember product IDs. You’ll need them later, and IDs cannot be changed once created. For the product to be available for purchase, after creating it, you will also need to activate it.

06:13 - We could also offer special features like secret ingredients via a subscription. Subscriptions are also set up in the products section. You’ll need to add product ID, name, description, price, and a billing period. You can also list the subscription benefits, and if you want, you can add a trial period, an introductory price, and a grace period for your subscription. You could also insert and manage products using the Play developers API.

06:53 - Check out the link on the screen for more information. When the user is ready to purchase the product, you’ll need to use the web payments API. When creating the payment request, you’ll need to specify the Play Store information in the supportedMethods field and provide the product ID in the data.sku field. Once the transaction is complete, the response from the payment request submission will provide purchase details. That includes a purchase token. To complete the transaction, you must acknowledge the purchase with a snippet like this.

07:36 - The acknowledgement lets the Play Store know you received a successful purchase and have given the user the corresponding entitlement. Note that the purchase token received from the Play Store is not automatically associated with the user. The developer must handle giving entitlement for the purchases and saving the token linked with the user to their back end. This token will be used to verify if the purchase is still valid or if their subscription is still active and give the user the appropriate entitlement. I just described only the basic flow. Look out for a companion blog post with more details about Play billing for web.

08:23 - It will include details about managing your subscriptions, using real time developer notifications, and more information about Google Play Developers API. In other news, from Chrome 85, Trusted Web Activities can also be installed on Chromebooks. For the best experience on ChromeOS, your Trusted Web Activity should not include any native Android code. If you want to restrict your app to be installable only on Chromebooks, you can manually add this flag to your Android manifest. And if you use Bubble Wrap, we have an option that will add the configuration for you. One last reminder.

09:05 - Every app that is listed on the Play Store must comply with the Google Play Policy. Check out this video for more information. Capabilities like handling full screen and delegating geolocation, as well as new features in Bubble Wrap, make integrating your PWA with the Play Store better than ever, and Play billing gives users a familiar and easy-to-use checkout flow. We hope you give them a try and send our way your comments or questions. Thank you. (upbeat music) .