Bubblewrap Apps in Android Studio

Bubblewrap is a convenient tool to generate an Android app from a Progressive Web App. I used it to bundle my PWA recently.

It’s run from the command line:

bubblewrap init --manifest "https://muteswan.dbushell.com/manifest.webmanifest"

Bubblewrap generates the build config and assets for the app. Continuing with bubblewrap build results in an .apk if you’ve installed the Android build tools.

I opted to open the project in Android Studio and poke around. I was able to build a signed .aab bundle — something the Google Play store shows a preference for. I also took the app for a spin on various device emulators.

App Icons

Following a small design refresh of Mute Swan I needed to update and fix the generated icons. On some devices they were clipped awkwardly.

I could use Bubblewrap again to re-generate the icons but that wouldn’t fix the clipping. I found the offending assets in this directory:

app/src/main/res

There is an awful lot of size variations to edit by hand. Has no one heard of vector graphics? Anyway, after some trial and error I learnt that editing them all at once in Android Studio is effortless.

Control/right-click on the res directory and select “New > Image Asset”.

You’ll see this UI:

In this modal you can configure the “Background Layer”. I entered a solid colour to match my icon. When you click “Next” you’ll see a list of files that will be overwritten — confirm to save the new icons.

And that’s it!

The new icons are used in the next build. The app version number should be bumped up. This can be edited in app/build.gradle — or found under “File > Project Structure > Modules > Default Config” tab if you prefer a GUI.

The fun continues…

Once a TWA/PWA is built there aren’t many reasons to re-build it. Other than updating icons. The app is still a website and can be updated at will. I pushed my new design live whilst waiting for Google to approve the store release. An app with more than one user might require a more sophisticated, timed update!

Test Devices

Another neat thing you can do with the Android dev tools is install an app on a real device via USB.

I’ve an old Nexus 7, and a new Fire 7 — which feels like the 7 year-old device – both rooted with custom Android ROMs. Developer mode and USB debugging needs to be activated on the device. I don’t think rooting is necessary, that was another project.

After connecting via USB run:

adb install app/release/app-release.apk

The app is install as it would be via the store. Test away!

I’ll continue to explore Android Studio and look for other opportunities to improve the PWA experience.

Related articles

• Bundle a PWA as an Android App
• Debugging a Todo App
• Bubblewrap Apps in Android Studio
• PWA Encryption and Auto Sign-in

Last updated: June 2020.