TWA app generated using the bubblewrap opens in browser instead of as an app

Question

Creating a PWA to publish on google play store. The apk generated using the bubblewrap cli is installing fine, but opens like a regular website in google app rather than a standalone app. It has a url bar at the top. Please refer to the screenshot.

So, how to create an app that looks like a normal android app?

Attaching the screenshot and the twa-manifest.json and website's manifest.json files

Note: The links are fake

// twa-manifest.json

{
  "packageId": "app.web.facpro.twa",
  "host": "facpro.web.app",
  "name": "FACPRO - Faculty Research Progress",
  "launcherName": "FACPRO",
  "display": "fullscreen",
  "themeColor": "#FFFFFF",
  "navigationColor": "#000000",
  "navigationColorDark": "#000000",
  "navigationDividerColor": "#000000",
  "navigationDividerColorDark": "#000000",
  "backgroundColor": "#FFFFFF",
  "enableNotifications": true,
  "startUrl": "/",
  "iconUrl": "https://facpro.web.app/logo512.png",
  "maskableIconUrl": "https://facpro.web.app/maskable_icon_x512.png",
  "splashScreenFadeOutDuration": 300,
  "signingKey": {
    "path": "/path/to/android.keystore",
    "alias": "android"
  },
  "appVersionName": "1",
  "appVersionCode": 1,
  "shortcuts": [],
  "generatorApp": "bubblewrap-cli",
  "webManifestUrl": "https://facpro.web.app/manifest.json",
  "fallbackType": "customtabs",
  "features": {},
  "alphaDependencies": {
    "enabled": false
  },
  "enableSiteSettingsShortcut": true,
  "isChromeOSOnly": false,
  "orientation": "default",
  "fingerprints": [],
  "additionalTrustedOrigins": [],
  "retainedBundles": [],
  "appVersion": "1"
}

manifest.json

{
  "short_name": "FACPRO",
  "name": "FACPRO - Faculty Research Progress",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "logo192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "logo512.png",
      "type": "image/png",
      "sizes": "512x512"
    },
    {
      "src": "maskable_icon_x512.png",
      "type": "image/png",
      "sizes": "512x512",
      "purpose": "any maskable"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#ffffff",
  "background_color": "#ffffff"
}

Answer 1

You need to add something like below to https://example.com/.well-known/assetlinks.json

[{
  "relation": ["delegate_permission/common.handle_all_urls"],
  "target": {
    "namespace": "android_app",
    "package_name": "com.example",
    "sha256_cert_fingerprints":
    ["14:6D:E9:83:C5:73:06:50:D8:EE:B9:95:2F:34:FC:64:16:A0:83:42:E6:1D:BE:A8:8A:04:96:B2:3F:CF:44:E5"]
  }
}]

Reference: https://developer.android.com/training/app-links/verify-site-associations