Web app no longer opening as standalone (iOS 13)

355 Views Asked by At

Until about iOS11, my simple web app was running fine in standalone mode. In iOS13 it has stopped working as a PWA completely and I can't figure out why. When I add it to the home screen and click on its icon, the web page is opened in iOS Safari, and no longer standalone as a native app. Can anyone see why?

I have tried different advice found on the web, but have found nothing that has helped: Neither removing the apple-specific tags and relying on the manifest file, nor specifying fullscreen, scope or start_up in the manifest, nor reordering the head tags.

Very grateful for any help!

Here is the relevant code:

<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, height=device-height, user-scalable=no, shrink-to-fit=no">

        <link rel="manifest" href="manifest.json">

        <meta name="mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-title" content="OC bønnebok">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">

        <!-- iphone retina 6 funker med denne -->
        <link rel="apple-touch-icon" href="oc-applogo-192.png">
        <!-- ipad nonretina ios pre 7 -->
        <link rel="apple-touch-icon" sizes="72x72" href="oc-applogo-72.png">
        <!-- iphone non-retina pre ios 7 -->
        <link rel="apple-touch-icon" sizes="57x57" href="oc-applogo-57.png">
        <link rel="apple-touch-icon" sizes="60x60" href="oc-applogo-57.png">
        <!-- something android -->
        <link rel="icon" sizes="128x128" href="oc-applogo-128.png">
...

Here is my manifest file, though iOS seems not to care too much (at least it picks the shortcut name from the tag and not from the manifest:

{
    "short_name": "OC Bpnnebok",
    "name": "Bpnnebok for Ordo Crucis",
    "icons": [
        {
            "src": "oc-applogo-120.png",
            "sizes": "96x96",
            "type": "image/png"
        },
        {
            "src": "oc-applogo-152.png",
            "sizes": "144x144",
            "type": "image/png"
        },
        {
            "src": "oc-applogo-192.png",
            "sizes": "192x192",
            "type": "image/png"
        }
    ],


    "display": "standalone"

}
0

There are 0 best solutions below