Shipping a PWA as an Android app

Key Takeaways

[Music] [Applause] [Music] hi my name is Andrew bandeja 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 petaboys combine the reach of the web with the capabilities that were almost available to native apps if you are new to petaboys read more about them on webdive slash progressive - web - apps it is natural that developers building great petaboys wants to reuse those experiences inside their Android applications in the past possible ways for 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 super experienced compared to the pdaboy it's 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 this leads to a small development cost and application size even though Tercel web activities provide a better alternative for using a PWM site and enter that developers to needs 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 pdaboy excited we have created bubble wrap emoji is projects 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 figure bubble wrap and use it to generate an application from an existing progressive web app I'm going to use Romero woods 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 who needs 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 remix tab by clicking on share then live app and then copying the link we are going to need that information soon in order to use bubble wrap we need node.js 10 or above installed on the development computer and optionally an Android device setup in developer mode so we can test the application check the link on the video description for more information on how to setup on an Android device for developer mode bubble wrap builds on top of native SDK tooling so we'll start by downloading the Android common line tools and the Java development kit or JDK version 8 to download the Android common line tools we can use the shortcut on the bubble-wrapped CLI documentation which is a linked on the video description inside the page click on the link for your operating system accept the license and click on download the bubble-wrap CLI documentation also links the corrections version of the Java development kit inside the page choose your operating system event 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 common line tools and then the Java development kits 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 penisy is now ready we can install bubble-wrap using NPM install with bubble wrap 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 bubble wrap in it and passing the URL to the web manifest to it when bubble wrap runs for the first time it will ask for the location of the JDK and the Android common line tools we downloaded previously while also automatically installing order 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 Stars URL so that we can use Google Analytics to measure how often our users are opening the pdaboy from the Android app Android applications needs to be signed with a self-generated key in order to be uploaded to the Play Store if bogu rep is unable to find an existing key it will prompt the developer to grade one so let's go ahead and create it and make sure to take note of the password you choose finally we can now invoke bubble wrap build to build the project the comment will output three important things the quality criteria for the peter blake an asset links that json file used to validate the domain open and inside the trusted web activity and assigned android application that can be uploaded to the place where bubble wrap would check the quality criteria against the URL used to launch the trusted web activity we strongly recommend the repeatable passes the called secret area the quality criteria is measured using lighthouse against the start URL and consists of a minimum performance score of 80 and getting the peelable a check in order to be shown in full-screen developers need to implement digital asset links bubble-wrap 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 asset links to JSON file to be made available on dot well-known slash asset link JSON on the root of the domain on my remix project I'll create a dot well-known slash asset links to JSON file then I'll paste the content of the file generated by bubble-wrap into it the application is now fully setup if you have an Android device in developer mode you can now connect it to the computer and run bubble wrapping start to launch the app congratulations you have built an Android app when uploading an application to the Play Store for the first time you ask if the developer wants to use app signing if opting 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 signed application will be different than the one is generated by bubble wrap to update the asset link start JSON file we needs information on the key used by the Play Store this information can be found by clicking on the add links item on the menu on the left and copying the details for the fingerprint and using is to update asset links dot 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 case to the application booboo wrap removes friction for web developers who wants to open repeatably in an android app I'm a fan of comma line tools if you are more like a graphical user interface person checkout peel away builder it uses bubble wrap as a library to power their Android application generation and that's all for bubble wrap 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 [Music] [Applause] [Music]