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"
}
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