WIP: Add PWA/TWA required files

[bagage]

This aims to make BRouter a Progressive Web App (PWA) and Trusted Web App (TWA).

There are various things to finalize:

• mobile version could be improved (#296), not mandatory
• have a proper logo (#286). For now and test purposes, I'm using my placeholder. The maskable icon was made with https://web.dev/maskable-icon/
• define BRouter theme and background colors. For now I've set both to #343a40.
• I deployed manifest.json and .well-known/assetlinks.json to my instance. You can try TWA from this APK (generated via https://www.pwabuilder.com/publish)
• the best (I think) solution would be to integrate the TWA directly into the existing BRouter application. But a separate app can be used too (you only have to update assetlinks.json accordingly)
• to generate the APK, you can use pwabuilder.com but I believe it's better to use bubblewrap directly and commit required files in brouter or brouter-web repository
• some files might be removed from the repository, or not, I'm unsure yet.

[nrenner]

This aims to make BRouter a Progressive Web App (PWA) and Trusted Web App (TWA).

When you write "BRouter" in the description and also in the manifest, that should probably be "BRouter-Web"?

I have a rough idea what a PWA is, but I'm not familiar yet with TWA. So a PWA can install on the home screen but not go full screen, for that you need a TWA installed as an APK?

You can try TWA from this APK

That link doesn't work.

mobile version could be improved (#298), not mandatory

You proabably mean #296?

the best (I think) solution would be to integrate the TWA directly into the existing BRouter application.

What files would need to be integrated there, would that be a one-time thing or for every BRouter-Web release? Do we need a separate icon when using a single APK?

Do all those files need to be in the root folder? We already have too many files in the project root and I would prefer to put anything that doesn't need to be there into some subfolder, e.g. the images into a resources subfolder.

[bagage]

When you write "BRouter" in the description and also in the manifest, that should probably be "BRouter-Web"?

Yes indeed. Will rename it accordingly.

I have a rough idea what a PWA is, but I'm not familiar yet with TWA. So a PWA can install on the home screen but not go full screen, for that you need a TWA installed as an APK?

I think there are 2 main differences:

• a TWA can be published on the play store or alternative apps markets, so you can have a "native experience" with the app.
• PWA/TWA are webviews, so it's basically Chrome or Firefox which run underneath. If you use a TWA, the browser navigation bar is hidden, allowing to gain some height space:

You can try TWA from this APK

That link doesn't work.

Indeed, my bad. Here it is.

mobile version could be improved (#298), not mandatory

You proabably mean #296?

Yes indeed.

the best (I think) solution would be to integrate the TWA directly into the existing BRouter application.

What files would need to be integrated there, would that be a one-time thing or for every BRouter-Web release? Do we need a separate icon when using a single APK?

The APK can be (re)generated from the manifest.json (which itself links to icons that must be accessible online). Rebuilding the APK is only required when the manifest and/or icons change. Otherwise the APK is basically a webview pointing to the website, so whenever a new BRouter-web release is deployed, the APK is just up-to-date as well.

Do all those files need to be in the root folder? We already have too many files in the project root and I would prefer to put anything that doesn't need to be there into some subfolder, e.g. the images into a resources subfolder.

No they can be put elsewhere. Some have to be embedded in Brouter releases (pwabuilder-sw.js, maybe favicon.ico), the others can be put in a separate resources subfolder.

[mjaschen]

There are some hardcoded things (namespace/fingerprint) in assetlinks.json.

What does that mean for BRouter-Web instances which are deployed elsewhere?

[bagage]

@mjaschen I'm not 100% sure about all PWA related stuff, but from what I understand:

assetlinks.json is meant to be deployed on websites (here for my instance). It lists apps that are trusted for this website, eg. any APK with identifier net.damsy.brouter and signed with 9F:...:D1 (which is the APK I generated above) hash signature is a trusted app (the only consequence I know is that the browser nagivation bar is hidden). But if you do not deploy assetlinks.json on your website and/or if you remove that entry from the file, then my APK won't be trusted on your instance and thus it will simply be a PWA. You can list many apps in that file - but this file could also be out of brouter-web repository, I don't know best practice about that yet.

[mjaschen]

Thanks for the clarification :-)

I think only a template for assetlinks.json should be added to the repository instead of a file with actual data for a specific deployment (similar to config.template.json or keys.template.json).

[nrenner]

If you use a TWA, the browser navigation bar is hidden, allowing to gain some height space

Doesn't the "display": "standalone" or fullscreen in the PWA manifest already do that (without TWA)? https://web.dev/add-manifest/#display

[bagage]

From my tests, at least with Firefox, it does not hide the navigation bar without TWA, but I might be missing something.

[Phyks]

From my tests, at least with Firefox, it does not hide the navigation bar without TWA, but I might be missing something.

As far as I know, Firefox support for PWA can be quite limited on Android devices. Sadly, Chrome should be better for tests here.

[bagage]

Closing this as I don't plan to finish it anytime soon.