Within the <head> of my webpage I have the:
<meta name="apple-mobile-web-app-capable" content="yes">
According to Apple developer, this is all that is needed for the app to launch in “standalone” mode. However, when clicking the bookmark that I had added to home it launches in the default safari rather than its own instance. What’s confusing me is that I copied these tags from another web page that I made last week that does work.
Am I doing anything wrong?
Thanks in advance for any answers and I am more than willing to provide any more of my html file if needed.
Full head:
<head>
<title>XXXXXX</title>
<link rel="manifest" href="manifest.json">
<link rel="icon" href="icon.jpeg">
<meta name="viewport" content="user-scalable=no">
<meta name="apple-mobile-web-app-title" content="XXXXXX">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<link rel="apple-touch-icon" href="icon.jpeg">
</head>
manifest.json:
{
"name": "XXXXXX",
"short_name": "XXXXXX",
"description": "Placeholder",
"lang": "en-GB",
"start_url": "/index.php",
"scope": "/",
"display": "standalone",
"theme_color": "#ffffff",
"icons": [
{
"src": "icon.jpeg",
"type": "image/jpeg",
}
],
}
My webpage does utilise an iframe but I’ve seen other web apps that use this and still function as expected.
The comma at the end of the manifest isn't meant to be there and is causing the manifest to be invalid, so the iPhone ignores the manifest and launches the web app as a normal bookmark.
The end of the manifest should be...
}
]
}