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"
}
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"
}
-
You may check the workaround given in this link. Since you are already using
"display": "standalone"in the manifest file, you may try"display": "fullscreen"and see if it works. – abielita Commented Oct 31, 2018 at 16:18
1 Answer
Reset to default 5In 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.