Giters

GoogleChromeLabs / bubblewrap

Bubblewrap is a Command Line Interface (CLI) that helps developers to create a Project for an Android application that launches an existing Progressive Web App (PWAs) using a Trusted Web Activity.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

URL Bar Visible on Additional Trusted Origin Domain in PWA APK

parsaM110 opened this issue · comments

commented

I'm experiencing an issue with my PWA where the URL bar is not behaving as expected across different domains. Here's the setup:

  • My PWA is hosted on: https://app.domain.com
  • My SSO (Keycloak) is hosted on: https://sso.domain.com

Problem

When accessing the PWA on https://app.domain.com, the URL bar is hidden as expected. However, when the PWA navigates to https://sso.domain.com for SSO purposes, the URL bar becomes visible. I want the URL bar to remain hidden on both domains.

Configuration

  1. Asset Links:

    • Both app.domain.com and sso.domain.com have the same assetlinks.json file with no-cache cache control, and they are accessible.
    • The assetlinks.json file includes the necessary entries for both domains.

  2. HTML Head:

    • On https://sso.domain.com, I have included the following in the <head> section: 
      <link rel="assetlinks.json file" href="https://sso.domain.com/.well-known/assetlinks.json">

Issue

Despite following the steps outlined above, the URL bar remains visible on https://sso.domain.com. I am unsure what might be wrong with the SSO additional trusted origin configuration.

Request

Could you please help me identify what might be causing this issue or guide me on any additional steps I might need to take to resolve it?

Additional Information

Let me know if there is any more information that I can provide to help diagnose this issue.

Thank you for your assistance!

I hope this helps! Feel free to modify the text as necessary to fit your specific situation.

commented

Currently trying to fix exactly the same thing. I think a few overrides/modifications are needed in the generated android source files in order to succeed enabling multiple origins in a TWA. More infos about this here https://stackoverflow.com/a/62591136

Those google repos are helpful as well:

I couldn't make it work yet, since I kinda miss the knowledge on how to edit an android project. I'll come back to you if I manage to make it work.

commented

Ok, I made it work by following the Google doc at https://developer.chrome.com/docs/android/trusted-web-activity/multi-origin

  1. Expose same assetlinks.jsonat both origins
  1. Android app sources file must be available or app must be initialized with bubblewrap command bubblewrap init
  2. Make changes to source code to support multiple origins:
    Edit android/app/src/main/res/values/strings.xml
    - by adding a new asset in origins to be validated
    - by adding new value “additional_trusted_origin” trusted origins
    - One item by supported origin

image

Edit android/app/src/main/AndroidManifest.xml
- by adding ADDITIONAL_TRUSTED_ORIGINS
- by editing activity name from “LauncherActivity” to "com.google.androidbrowserhelper.trusted.LauncherActivity” or else the appliation won't launch at all.

image

  1. Build app manually with bubblewrap bubblewrap build
    1. Make sure to increment the version in both android/twa-manifest.json and android/app/build.gradle
    2. Avoid applying manifest changes to project before building
    3. Provide both Key Store and Key passwords
    4. Upload AAB to Google Play Console (the only way to test navbar AFAIK)
      1. Make sure the version was incremented and same keystore was used when building
      2. Create a release for internal testing
      3. On your phone, make sure to delete Google Play Store cache
      4. Install latest version from Google Play Store (by double checking app version)