Convert Progressive Web App (PWA) to Android App (APK)

Progressive Web App or PWA is an excellent way enabling your website visitors adding an icon on their mobile device desktop for quick and easy access. In addition to other benefits, PWA offers native app-like experience while still being a website just with manifest like this added. But it's much more difficult to engage user to hit Add to home while visiting your website on regular browser than to ask him/her to install an app from Play Store. Let's look into how to convert PWA to full-blown Android app that can be distributed as APK or via regular app store.

First we need to introduce ourselves to Trusted Web Activity or TWA:

Trusted Web Activity is a new way to open your web-app content such as your Progressive Web App (PWA) from your Android app using a protocol based on Custom Tabs.

So essentially whatever will be presented to user screen is website content which would look exactly the same opened in usual browser. Afterall, most apps need internet connection to work, right?

TWA can be built into APK or prepared as Android App Bundle (AAB) which is required by Play Sore following this guide or by walking this step-by-step post available to web monetization subscribers below.

Install Node

Make sure NodeJS v.16 in installed in your system. On Ubuntu it goes like this:

# Using Ubuntu
curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash -
sudo apt-get install nodejs

Install npm

Node Package Manager is installed using this command:

sudo apt install npm

Make npm user directory based

To avoid permission errors such as:

Error: EACCES: permission denied, access '/usr/local/lib'

Let's setup npm in user's local directory:

mkdir ~/.npm-global

npm config set prefix '~/.npm-global'

Now edit user's shell config file ~/.profile by adding:

export PATH=~/.npm-global/bin:$PATH

And propagate these changes:

source ~/.profile

In case needed to install up-to-date npm, run:

npm install -g npm@7.20.6

Install Bubblewrap

Bubblewrap will build our PWA / TWA into APK. Install:

npm i -g @bubblewrap/cli

Build your APK: initialize project

Now it's time to build. Have your PWA manifest file URL ready – in my case it is https://inretio.dev/superpwa-manifest.json – you will be asked for it to initiate the process.

Initialize project providing URL as manifest parameter:

bubblewrap init --manifest=https://inretio.dev/superpwa-manifest.json

Script will ask to install JDK 8 and Android SDK to ~/.bubblewrap – make sure to allow it.

Here is how wizard will look like:

bubblewrap init --manifest=https://inretio.dev/superpwa-manifest.json
,-----.        ,--.  ,--.  ,--.
|  |) /_,--.,--|  |-.|  |-.|  |,---.,--.   ,--,--.--.,--,--.,---.
|  .-.  |  ||  | .-. | .-. |  | .-. |  |.'.|  |  .--' ,-.  | .-. |
|  '--' '  ''  | `-' | `-' |  \   --|   .'.   |  |  \ '-'  | '-' '
`------' `----' `---' `---'`--'`----'--'   '--`--'   `--`--|  |-'
                                                           `--'    
Initializing application from Web Manifest:
	-  https://inretio.dev/superpwa-manifest.json
WARNING: Trusted Web Activities are currently incompatible with applications
targeting children under the age of 13. Check out the Play for Families
policies to learn more.
https://play.google.com/console/about/families/

Web app details (1/5)

The application generated by Bubblewrap will open a Progressive Web App when
started from the Android launcher. Please enter the following details about
the PWA:
  
	- Domain: the domain / origin where the PWA is hosted. 
	  Example: example.com

	- URL path: an URL path relative to the root of the origin,
	  opened when the application is started from the home screen.
	  Examples:

		- To open https://example.com/: /
		- To open https://example.com/path-to-pwa/: /path-to-pwa/

? Domain: inretio.dev
? URL path: /

Android app details (2/5)

Please, enter details regarding how the Android app will look when installed
into a device:

	- Application name: the name used in most places,
	  including the App information screen and on the Play Store.

	- Short name: an alternate name for the app, limited to
	  12 characters, used on a device launch screen.

	- Application ID: also known as Package Name, this is
	  the unique identifier for the application on an Android device or
	  the Play Store. The name must contain at least two segments,
	  separated by dots, each segment must start with a letter and all
	  characters must be alphanumeric or an underscore (_).

	- Display mode: how the app will be displayed on the
	  device screen when started. The default mode, used by most apps,
	  is standalone. fullscreen causes the device status bar and
	  navigation bars to be removed and is suitable for games or media
	  players. For more information on the status bars and navigation
	  bar on Android, go to:
	   - https://material.io/design/platform-guidance/android-bars.html.

	- Status bar color: sets the status bar color used when the
	  application is in foreground. Example: #7CC0FF

? Application name: Inretio Services
? Short name: Inretio
? Application ID: dev.inretio.twa
? Starting version code for the new app version: 1.0.0
? Display mode: standalone
? Orientation: any
? Status bar color: #2D5016

Launcher icons and splash screen (3/5)

The Android app requires an image for the launcher icon. It also displays a
splash screen while the web content is loading, to avoid displaying a flash of
a blank white page to users. 

	- Splash screen color: sets the background colour used for the
	  splash screen. Example: #7CC0FF

	- Icon URL: URL to an image that is at least 512x512px. Used to
	  generate the launcher icon for the application and the image for
	  the splash screen.

	- Maskable Icon URL (Optional): URL to an image that is at least
	  512x512px to be used when generating maskable icons. Maskable
	  icons should look good when their edges are removed by an icon
	  mask. They will be used to display adaptive launcher icons on the
	  Android home screen.

? Splash screen color: #CAE5C7
? Icon URL: https://inretio.dev/wp-content/uploads/2021/08/inretio_chip_512x512.png
? Maskable icon URL: https://inretio.dev/wp-content/uploads/2021/08/inretio_chip_512x512.png

Optional Features (4/5)

	- Include app shortcuts: This question is only prompted if a
	  'shortcuts' section is available on the input Web Manifest. When
	  answered “yes”, Bubblewrap uses the information to generate
	  shortcuts on the Android app. Read more about app shortcuts at
	  https://web.dev/app-shortcuts/.

	- Monochrome icon URL: URL to an image that is at least 48x48px to
	  be used when generating monochrome icons. Monochrome icons should
	  look good when displayed with a single color, the PWA's
	  theme_color. They will be used for notification icons.

? Monochrome icon URL: https://inretio.dev/wp-content/uploads/2020/04/inretio-chip_48x48.png
? Include support for Play Billing (this relies on alpha dependencies)? No
? Request geolocation permission? No

Signing key information (5/5)

Please, enter information about the key store containing the keys that will be used
to sign the application. If a key store does not exist on the provided path,
Bubblewrap will prompt for the creation of a new keystore.

	- Key store location: The location of the key store in the file
	  system.

	- Key name: The alias used on the key.

Read more about Android signing keys at:
	 https://developer.android.com/studio/publish/app-signing

? Key store location: /home/gytis/inretio_pwa_app/android.keystore
? Key name: android
Generating Android Project.
 >> [████████████████████████████████████████] 100%

Signing key creation

An existing key store could not be found at "/home/gytis/inretio_pwa_app/android.keystore".

? Do you want to create one now? Yes
? First and Last names (eg: John Doe): Gytis Repecka
? Organizational Unit (eg: Engineering Dept): IT
? Organization (eg: Company Name): Inretio, MB
? Country (2 letter code): LT
? Password for the Key Store: ******
? Password for the Key: ******
keytool Signing Key created successfully

Project generated successfully. Build it by running bubblewrap build

Notice signing key is greated in android.keystore – this will be important later.

Build app

Now build app by running bubblewrap build – process will look like this:

bubblewrap build
,-----.        ,--.  ,--.  ,--.
|  |) /_,--.,--|  |-.|  |-.|  |,---.,--.   ,--,--.--.,--,--.,---.
|  .-.  |  ||  | .-. | .-. |  | .-. |  |.'.|  |  .--' ,-.  | .-. |
|  '--' '  ''  | `-' | `-' |  \   --|   .'.   |  |  \ '-'  | '-' '
`------' `----' `---' `---'`--'`----'--'   '--`--'   `--`--|  |-'
                                                           `--'    
Please, enter passwords for the keystore /home/gytis/inretio_pwa_app/android.keystore and alias android.

? Password for the Key Store: ******
? Password for the Key: ******

Building the Android App...
	- Generated Android APK at ./app-release-signed.apk
	- Generated Android App Bundle at ./app-release-bundle.aab

Failed to run the PWA Quality Criteria checks. Skipping.

Install app

To check if APK works, install it onto Android device using adb:

adb devices
List of devices attached
xxxxxxxxxxxxxxxxxxxx	device

adb install app-release-signed.apk
Success

Now app should be available on the phone. Note: to make sure it does not display browser bar, set up Digital Assets Links.

Publish to Play Store

To publish app on Play Store you will need to setup developer account, pay $25 and submit your app-release-bundle.aab file via Play Console.

Few words about app signing:

If you opt in to Play App Signing, then the signing key that Bubblewrap generated and used to sign your app becomes the “upload key”. Whether you choose to use the Bubblewrap generated key as your signing or upload key, you should guard and keep the key private. We don't recommend committing it to version control. Instead, limit the number of individuals with access to it.

Have fun!

#development #android #app #apk #play #aab #pwa #twa


My name is Gytis Repečka, I am Solution Architect and data professional. I enjoy using, promoting and contributing to open source software and love communicating about tech to both advanced and non-tech people. Visit Inretio for consulting services. Comment by mentioning me @gytisrepecka@social.gyt.is on Fediverse.