PWA not opening in full screen mode on iphone/ipad
Question
I went through several articles related to PWA on ios but still not able to figure out why I am seeing address bar after adding an app to the home screen. I would be glad if someone could help me with this.
meta tags in my index file
<meta charset="UTF-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="manifest" href="./assets/manifest.json">
<meta name="theme-color" content="#ffffff">
Manifest File
{
"short_name": "Dashboard",
"name": "Dashboard",
"icons": [
{
"src": "logo.png",
"sizes": "512x512",
"type": "image/png"
}
],
"start_url": "/home",
"display": "standalone",
"theme_color": "#000",
"background_color": "#000"
}
1 answers
solution1
3 2020-04-26 16:44:52
In case anyone stumble on this article. As of 04-2020 iOS does not read the manifest file to set the PWA screen mode. Instead one needs to add their meta tags:
<meta name="apple-mobile-web-app-capable" content="yes">
For viewing the app in full screen mode. And:
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
For setting the status bar the same color as page <body> . There are other options available: black and white .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.