问题背景:
当在Android设备上使用Angular PWA应用时,设置display: standalone
无法正常工作。这导致应用以浏览器的方式打开,而不是以全屏应用程序的方式打开。
解决方法: 要解决这个问题,你可以尝试以下步骤:
在项目根目录的src
文件夹中创建一个名为manifest.webmanifest
的文件。如果已经存在,请跳至第2步。
在manifest.webmanifest
文件中添加以下内容:
{
"name": "Your App Name",
"short_name": "Short App Name",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#000000",
"icons": [
{
"src": "assets/icons/icon-72x72.png",
"sizes": "72x72",
"type": "image/png"
},
{
"src": "assets/icons/icon-96x96.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "assets/icons/icon-128x128.png",
"sizes": "128x128",
"type": "image/png"
},
{
"src": "assets/icons/icon-144x144.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "assets/icons/icon-152x152.png",
"sizes": "152x152",
"type": "image/png"
},
{
"src": "assets/icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "assets/icons/icon-384x384.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "assets/icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
index.html
文件的
标签中添加以下内容:
angular.json
文件中找到"assets"
字段,并确保以下内容已添加到数组中:{
"glob": "manifest.webmanifest",
"input": "src",
"output": "/"
}
希望这些步骤可以帮助你解决 Angular PWA 在 Android 上 display: standalone
不起作用的问题。