Shipping a PWA as an Android App

Traditionally, when developers wanted to distribute their web-based apps through app stores like Google Play, there was only one option: Apache Cordova. In the meantime, Progressive Web Apps (PWA) have arrived. The life of a PWA starts in the browser, and users can choose to install the application to the home screen for faster access. Still, there are lots of reasons why developers might want to distribute their applications via app stores. With the help of Trusted Web Activities (TWA) and Bubblewrap, developers can distribute their existing PWA through the Play Store for Android and Chrome OS, combining the power of both worlds.

Transcript

1. Shipping a PWA as an Android app using Bubblewrap Blessing Krofegha Software Engineer & Technical Author @ Smashing Magazine @beveloper
2. How does a Web App get to Playstore ? Traditionally, when developers wanted to distribute their web-based apps through app stores like Google Play, there was only one option: Apache Cordova. But the configurations involved were an overkill.
3. PWA → TWA
4. What is TWA? Trusted Web Activity(TWA) is a new way to open your web-app content such as your Progressive Web App (PWA) from your Android app. A Trusted Web Activity (TWA) allows us to "package" a PWA-standard online service in a special container based on the Chrome web browser. To an average user, this package will act like a standard application. And TWAs can be published in the Google Play Store. From a technical standpoint, a TWA is a browser instance without its own graphic interface (URL bar and menu) which works in a verified mode (Trusted). It can connect solely to a specific domain to give the impression of browsing a full-fledged mobile application. In other words, an application that’s based on a PWA page can be installed on a mobile device.
5. Is TWA a Hybrid framework, similar to Cordova? No! With Cordova or other hybrid solutions like Ionic, you are typically shipping your web resources (HTML, JS, CSS, etc.) within your APK package. Also, the engine is different and isolated from the users’ browser, so no session or cache sharing. With Trusted Web Activity you don’t need to package any resource file from your PWA (only native components, in case you want them); all your resources will be downloaded and updated on the fly from your Service Worker. Your PWA will still be rendered with the installed Chrome version, sharing all storage, cache, and sessions with the browser. Therefore, if your user has a session on your website opened when the user installs the app from the Play Store, she will still be logged in. The user is just installing a shortcut to Chrome using a special mode.
6. So can we can ship PWA’s as Android Apps ?
8. With Bubblewrap(TWA) we can ship a PWA as an Android app With Trusted Web Activities(TWA) and Bubblewrap developers can reuse the same PWA deployment and create a Play Store package without writing a single line of native code. Developers can upload an almost empty APK to the app store. The APK only contains a link to the website that should be shown.
9. Pros of using a TWA ❖ Does not demand any Java/Kotlin knowledge ❖ Very cost effective(You’re the web/android developer) ❖ The onboarding process is a lot much easy ❖ Easy to manage and update ❖ Smaller Application size compared to native apps ❖ Uses all web API’s Cons of using a TWA ❖ You can only ship PWA’s to Android, no cross-platform support ❖ Montenization problem ❖ URL bar at the top of the app ❖ Must pass PWA criteria in LightHouse
10. Why Bubblewrap? Bubblewrap is a set of libraries and a command line tool (CLI) for Node.js that helps developers generate, build and run Progressive Web Apps inside Android applications, using Trusted Web Activity. It requires Node.js 10 or above, the Java Development Kit (JDK) 8, and the Android SDK installed on the system. Developers can install the CLI by calling npm i -g @bubblewrap/cli on the command line.
12. Requirements You need the following software before creating a TWA from your PWA. Install the following tools and make a note of their installation paths for the next step: • Android SDK (Windows/Linux/Mac/ChromeOS). • Node.js (version 10 or higher). • Java 8 JDK. • Setup an Android device in Developer Mode
13. Codelab session Let’s jump over to VScode
14. Question?
15. Thank You!