Creating your web application as a Progressive Web App (PWA) is a great way to provide app-like experiences for your users. These PWAs have offline capabilities, tend to load faster and can even send notifications to your users, increasing engagement with your product.After doing all this work, wouldn’t it be great to allow your users to install your PWA to their phones using the regular Google Play Store? You’re in luck! There is a simple way to do this using Trusted Web Activities (TWA).
TWA allows you to create an APK (a file containing your app) that can be submitted to the Play Store,containing a full-screen Chrome view of your PWA. When your app is open, your PWA’s loading screen is shown. When loaded, there is no browser UI visible.
If you have an existing PWA, there is no additional development required for your app to be available on the Play Store for people to download and install.
Benefits vs. WebViews and Custom Tabs
The two most common ways to display web content in an Android app are WebViews and Custom Tabs. Although great choices, neither lend themselves particularly well to displaying a full PWA as an app. WebViews allow some customization of the UI, but do not support many web features that PWAs require. These are useful if you have some web content embedded and delivered inside a native app (eg. an HTML manual you include with a native app). Chrome Custom Tabs are full Chrome browser tabs that are generally used to link to web content from a native app. An example of this is clicking an external link in the Facebook App that opens the site in-app. These Custom Tabs show a toolbar at the top of the screen, with an un-editable version of the URL and other browser tools.
Both options require some development and/or the use of tools such as Cordova which allow you to display your web app in a native app.
How to publish a PWA to the Play Store
Here are the steps required to get an app on the Play Store, from developing through to submitting the final app to Google.
Create and deploy a valid PWA
First of all, you need a Progressive Web Application. An easy way to set up a PWA is to use Create React App turn on the service worker . Here is a sample repo which uses Create React App to make a simple Todo app we will publish to the Play Store. The final version is hosted on Netlify, and can be accessed here.
You can check if your own PWA meets all the criteria required by running a Lighthouse test.
Bubblewrap
Google Chrome Labs provides a command line tool called Bubblewrap CLI to package up an APK which shows your web app in a full-screen Chrome browser view. Install it using by calling:
npm install -g @bubblewrap/cli
You will need to download the Java JDK 8, as Bubblewrap only works with this specific version. You do not need to install this, only have it available for Bubblewrap to use.
You will also need to download the Android command line tools if you do not have Android Studio installed, as these will give you the functionality required without having to download the full IDE.
Generate Android Project
Create a folder outside your main repo where you want your Android application files to live. It’s best to keep this outside your main repo as it can be generated when needed, alternatively you can use your .gitignore file to avoid committing the android project to source control.
Use the command line to navigate to this folder, and run the command:
bubblewrap init --manifest https://example.com/manifest.json
This should point to the manifest.json file of your deployed PWA. If this is your first time running Bubblewrap, you will be asked to point it to the Java JDK 8 and Android command line tools you downloaded previously.
You will be then asked some questions about your app (the defaults are generally good to go). You will be asked to create a password for the Key Store and a password for the Key, so don’t forget these as you will need them later.
This creates an Android project that you can open in Android Studio if you have it, and you can build and run your application from there.
Build app and validate domain
You can build your application into an APK from Bubblewrap by using the command:
bubblewrap build
Do this inside the directory you created to contain the Android project. This will then create an APK file, and also an assetlinks.json file. This file is important, as it is what validates that you are both the owner of the APK and the domain on which your PWA is deployed.
Deploy the assetlinks.json file to your website under the path https://example.com/.well-known/assetlinks.json. When the installed application loads your PWA into the TWA app, it will match up the fingerprint and confirm that you are in control of both PWA and APK and allow the installed application to run full-screen without any browser UI.
If the fingerprints don’t match up the app still runs, but it shows in a Chrome Custom Tab with browser UI visible.
Run your app
There are a couple of ways you can verify that your app works as expected. If you have Android Studio installed, you can run an Android emulator and interact with your app there. You can also install it on a real device via Bubblewrap. To do this, connect your developer-mode device to your computer and run the command bubblewrap install.
Publish to Play Store
The final step is to get your app listed on the Play Store. You will need a Developer Account (USD$25) to begin, and further instruction can be found in this helpful article. The final demo app used in this article can be found on the Play Store here.
Drawbacks
This process is not a replacement for native app development or development using tools such as React Native, as the application that the end user consumes is just a Chrome view direct to your deployed PWA. Any permissions required from the user (for things such as notifications, location access) are gathered as a regular PWA would do in Chrome, not as requested permissions when the app is installed.
Also, Notifications sent through the Notifications API have Chrome branding on them.
Wrap up
You can see how easy it is to get a PWA deployed to the Play Store. With these steps you can get an app into the store without writing any additional code, or altering the PWA in any way, or even writing any Java code for the Android solution.
Using Trusted Web Activities is an excellent way to further showcase your well-written Progressive Web App, and with the effort required to get your app on the Play Store being so minimal, it is a cost effective way to gain exposure on the store.
To learn more about creating apps through TWA, check out the main TWA page and the quick start guide on Google.