Features of TWA development in 2022

Introduction

Greetings. This is Deni Sergeevich, lead developer of MTS Ticketland. In this article, I will talk about my experience in developing TWA: what tools to choose, what rake I stepped on and crutches I had to do to make it work. At the end of the article I will share my findings on what to pay special attention to.

What is TWA

TWA (Trusted Web Activities) – a special browser launch mode based on custom tabs Android Custom Tab. Unlike WebViews, Google’s solution provides more web platform functionality, making the end user’s transition between native and web content smoother.

In practice, TWA provides comparable opportunities PWAs (Progressive web apps) and adds additional functionality to the Android operating system. These are publishing to the Google Play app store, integrated monetization, support for web notifications, and other less significant features, such as animation and customization of the application window.

Creation tools

You can create TWA using familiar web programming languages ​​and the application assembly generation layer. I recommend using TypeScript to create the business logic and Java to build the Android App Bundle.

Vue.js

In 2022 Vue.js finally moved to the third major version with a new faster and smaller kernel. In terms of popularity, Vue.js has long been on the heels of React.JS, offering comparable functionality with a low entry curve for beginners, thanks to the design patterns embedded in the framework.

When choosing to write code, I recommend immediately using the Composition API as a more modern solution. It has better TypeScript support, is easier to read, and doesn’t bloat code like the Options API does.

Quasar Framework

Based on Vue.js Quasar Framework provides convenient reusable Material Design style components that can be customized via CSS and extended via JavaScript methods. This framework covers more than 90% of typical solutions, offering the quasar-cli command interface for project initialization, launch, testing and building.

Quasar generates PWA out of the box using the following two tools:

Manifest

Here data for the application are set: standard icon sizes, description, colors. Read more about setting up a web application manifest here: https://developer.mozilla.org/en/docs/Web/Manifest.

Service Worker

Service Worker (hereinafter referred to as SW) is a script that runs in the background providing a mechanism for routing and caching web application resources.

There are exactly two types of SW:

• GenerateSW – The easiest way to add SW to a site, it creates a separate pre-generated configuration file.

• InjectManifest – Provides additional logic based on the Web Worker.
  You can read more about setting up here: https://developer.chrome.com/docs/workbox/modules/workbox-webpack-plugin.

The SW configuration documentation is available at: https://quasar.dev/quasar-cli-webpack/developing-pwa/configuring-pwa.

android studio

This programming environment for Android is based on the now popular cross-platform IDEA. Includes additionally necessary debuggers and compilers for Java and Kotlin, Device Manager, log monitor and other necessary software for turnkey Android programming.

You can download Android Studio here: https://developer.android.com/studio/.

Bubblewrap CLI

This tool allows you to create a ready-made Gradle build and Android Manifest from an existing web manifest located in the Quasar Framework configuration through the console. In principle, it copes with its task, but the tool itself is poorly updated and, as will be seen at the end of the article, is inconvenient to use. You can learn how to use Bubblewrap CLI here: https://developer.chrome.com/docs/android/trusted-web-activity/quick-start.

Download Bubblewrap CLI via npm: https://www.npmjs.com/package/@bubblewrap/cli.

How PWA works on iOS

Starting with iOS 15, Apple included partial PWA functionality in the Safari system browser. On the main screen, the site icon really appears, indistinguishable from native applications. Clicking on it launches the site without browser controls.

When creating a PWA for iOS, you need to be prepared that it will not work offline to use the Touch ID or Face ID functions. A crutch can be the use of the Web Authentication specification (WebAuthn) that was introduced in iOS 16, but this specification requires online access.

Push notifications also don’t work in PWA mode in mobile Safari.

Another feature of the PWA application on iOS is the impossibility of overriding the quota for IndexedDB, swearing at “QuotaExceededError: Failed to PutOrAdd in database”. However, this function works if you go through the Safari browser directly.

TWA assembly

Creating an assembly on the selected tools is performed by the following two commands.

1. Create PWA build using Quasar Framework:

quasar build -m pwa

2. Create an Android build using Bubblewrap CLI:

bubblewrap build

After that, you will have application files created that can be installed on a virtual device with the following command:

bubblewrap install

TWA testing

The testing phase is no different from testing a mobile site on a physical device. We launch the application from the main screen, select Inspect Tools and click on Remote Target. More information on how to enable testing on Android is written here: https://developer.chrome.com/docs/devtools/remote-debugging/.

It has been noticed that if the user has Firefox installed by default, then after installing TWA, you will need to run the debugger on a similar platform, that is, on the Firefox Debugger.

Publication in Google Play Market

A feature of 2022 is that the Google Play app store is not available in the Russian Federation, which can still be fixed using a VPN from another country. But since Android is open in a certain way, the App Bundle assembly files can be used for other analogues of Google Play, with the corresponding problems of web notifications and installation of advertising from Google Ads.

Installation and setup TWA in the Google Play Market is the same as a regular installation, but adds a Digital Asset Links installation under App Integrity. If you signed the application with a Google Developer Key, then simply copy the suggested keys from the section that appears. Otherwise, install the keys that the Bubblewrap CLI generated for you. The keys themselves must be stored on a server you control in the .well-known/assetlinks.json path.

To generate your own assetlinks.json file via Bubblewrap CLI and place it in the desired directory, run the command:

bubblewrap fingerprint generateAssetLinks --output=\"public/.well-known/assetlinks.json\"

Checked, 301 redirect to assetlinks.json file from site root doesn’t work. Therefore, you will have to transfer the file manually as follows:

cp public/.well-known/assetlinks.json dist/pwa/.well-known/

In 2022, publishing to the Google Play store requires filling out a lot of documents, one of which is the User Agreement. You can not fill it out yourself, but use the free service https://app-privacy-policy-generator.nisrulz.com.

Moderation took me almost five days. Make sure in advance that everything works for you and that the server is responsible for an acceptable time. It is critical for TWA to have a minimum performance rating of 80/100 in Lighthouse.

CONCLUSIONS

TWA is still a poor alternative to native apps, which can only work if you already have a good mobile site ready and don’t want to spend time and money developing a native Android version.

After a while, the choice of real instruments showed the following results:

• Vuex – better to replace with Pinia. Vuex is currently in version 4 with redundant syntax when working with the Composition API and TypeScript. I see Pinia as a fresh alternative, which is also regularly updated.

• Quasar Framework – in production showed a lot of problems on drop-down lists and complex forms. Some of them require self-fixing, some are bugs in the Safari mobile browser. Installing Material Design fonts and icons requires a connection to the Google server, which makes it impossible to open the site outside of PWA mode.

• PWA is not suitable for programming large and complex applications. Downloading a new version can take a significant amount of time, which on Android can be hidden by a picture, while iOS users will see a black browser screen. Building anything related to images, a camera, or Bluetooth devices would look just as bad today, both in terms of interface fluidity and technical feasibility. For example, the tag in Safari is capable of displaying PDF documents, but not in Chromium browsers; also noted that the navigator.share functionality does not work in Firefox at the time of this writing.

• Bubblewrap CLI – uses hardcoded versions of Gradle and Java in its generator and does not have flexible configuration settings. I decided after the initial initialization of the Android Manifest to no longer use it. Now I manually fix dependencies, update Gradle versions, and make builds through Android Studio.

• The web manifest is not all that rosy. TWA does not support the specification part of the iarc_rating_id and categories values. Also, theme_color is not supported on iOS.

• HTTP caching – you should not create caching of scripts and documents through the server, then when updating the build, loading resources will not be possible. Therefore, you have to transfer all caching to SW.

• PDF – keep in mind that the creation of Russian-language documents is exclusively in the browser on a popular library jsPDF shows glitches. Switching to the library @pdfme/generator fixes the problem.

Links