 Hi, my name is André Bandaja, and in this video, I'm going to show you how to use your progressive web app inside an Android application without writing a single line of native code. Progressive web apps, or PWAs, combine the reach of the web with the capabilities that were also available to native apps. If you are new to PWAs, read more about them on web.dev.progressive-web-apps. It is natural that developers building great PWAs want to reuse those experiences inside their Android applications. In the past, possible ways for a developer to use their progressive web app inside an Android application included using the Android WebView or embedding a browser engine. The WebView doesn't provide support for many of the new capabilities on the web, like push notifications or web Bluetooth. So the output can be a support or experienced compared to the PWAs built on. Creating and maintaining an app with an embedded browser requires a considerable amount of engineering effort and produces an app that's larger than a native app equivalent. At last year's Google I.O., we announced trusted web activities, which allow developers to use their progressive web app inside an Android app in a full-screen tab that is powered and has the same features and capabilities as the browser providing it. This leads to a small development cost and application size. Even though trusted web activities provide a better alternative for using a PWAs inside an Android app, developers still need some knowledge about native application tooling and development. So to create an easier path for developers who want to create their Android app using their PWAs inside it, we have created Bubblewrap, a Node.js project that contains both a library and a common line interface developers can use to generate and build their Android application. In the next few minutes, I'd like to guide you on how to configure Bubblewrap and use it to generate an application from an existing progressive web app. I'm going to use Roman Merwood's Persistence app as a starting point, but you can use any existing progressive web app. Check the video description for the link to the Persistence app. We'll need to modify the application later. So I'll open the app, scroll down, and click on the code link. Then I'm going to remix the project so we can modify it. We can get the link to the remixed app by clicking on Share, then Live App, and then copying the link. We are going to need that information soon. In order to use Bubblewrap, we need Node.js stand or above installed on the development computer and, optionally, an Android device set up in developer mode so we can test the application. Check the link on the video description for more information on how to set up an Android device for developer mode. Bubblewrap builds on top of native SDK tooling. So we'll start by downloading the Android Commonline Tools and the Java Development Kit, or JDK version 8. To download the Android Commonline Tools, we can use the shortcut on the Bubblewrap CLI documentation, which is linked on the video description. Inside the page, click on the link for your operating system, accept the license, and click on Download. The Bubblewrap CLI documentation also links to the correct version of the Java Development Kit. Inside the page, choose your operating system, then architecture, then download the compressive tar file for the JDK. In our terminal, we now create a directory where we can place both dependencies. Then we unzip the Commonline Tools and then the Java Development Kit. Make sure to take note of the directories where those files were decompressed, as we're going to need them later. I like to rename the JDK folder to just JDK, as it's easier to remember. With the dependencies now ready, we can install Bubblewrap using NPM install. With Bubblewrap and its dependencies now installed, we can start the creation of the Android app itself. Let's start by creating a folder for it. And now, we can initialize the Android project by calling Bubblewrap in it and passing the URL to the web manifest to it. When Bubblewrap runs for the first time, it will ask for the location of the JDK and the Android Commonline Tools we downloaded previously, while also automatically installing other dependencies. Then the CLI will ask you to confirm values read from the web manifest and fill in any missing required values needed to create the Android app. We can, for instance, change the start URL so that we can use Google Analytics to measure how often our users are opening the PWA from the Android app. Android applications need to be signed with a self-generated key in order to be uploaded to the Play Store. If Bubblewrap is unable to find an existing key, it will prompt the developer to create one. So let's go ahead and create it and make sure to take note of the passwords you choose. Finally, we can now invoke Bubblewrap build to build the project. The command will output three important things, the quality criteria for the PWA and that's the links.json file used to validate the domain opened inside the terrestrial web activity and assigned the Android application that can be uploaded to the Play Store. Bubblewrap will check the quality criteria against the URL used to launch the terrestrial web activity. We strongly recommend that your PWA passes the quality criteria. The quality criteria is measured using Lighthouse against the start URL and consists of a minimum performance score of 80 and getting the PWA check. In order to be shown in full screen, developers need to implement digital asset links. Bubblewrap takes care of the configuration of the Android application, but there is one extra step that needs to be done in the web app. The content of the assetlinks.json file needs to be made available on .wellknown slash assetlinks.json on the root of the domain. On my remix project, I'll create a .wellknown slash assetlinks.json file. Then I'll place the content of the file generated by Bubblewrap into it. The application is now fully set up. If you have an Android device in developer mode, you can now connect it to the computer and run Bubblewrap installed to launch the app. Congratulations, you have built an Android app. When uploading an application to the Play Store for the first time, it will ask if the developer wants to use app signing. If opting in into app signing, the Play Store will manage the signing key for you, making sure it's not lost. This is important, as losing the key means it's not possible to update the application on the store anymore. But it also means that the final key used to sign the application will be different than the one generated by Bubblewrap. To update the assetlinks.json file, we need information on the key used by the Play Store. This information can be found by clicking on the app link site on the menu on the left and copying the details for the fingerprint and using its top date assetlinks.json file on the web app. It is possible to use both fingerprints in the application. Check out the video description for a link on how to add both keys to the application. Bubblewrap removes friction for web developers who want to open their PWA in an Android app. I'm a fan of commonline tools. If you are more like a graphical user interface person, check out PWA Builder. It uses Bubblewrap as a library to power their Android application generation. And that's all for Bubblewrap today. Make sure to check the GitHub repo and drop us some feedback. And if you're watching this live, jump into our live chat and tell us what you think. Thanks for watching.