CODEWITHSUNDEEP
iossafariprogressive-web-appsmanifest.json
qpwr
qpwr

Reputation: 458

iOS PWA opens same-domain links in overlay window instead of the same base window

I've created a progressive web app which is no single page application, but has regular links with page reloads.

I've added a manifest.json which looks like this:

{
    "name": "MyApp",
    "short_name": "MyApp",
    "theme_color": "#4FD083",
    "background_color": "#333333",
    "display": "fullscreen",
    "lang": "de-DE",
    "scope": "my_domain.tld",
    "start_url": "my_domain.tld",
    "icons": [
        /* Some icons */
    ]
}

When I visit the page in iOS Safari and add it to the home screen, the first time I open it it doesn't have a header and footer bar (which is correct). But once I click any link within the "app", it opens the content of this link in an overlay window which has a "Done" button and some icons on top (which is not correct). Looks like this:

enter image description here

I want all links on the same domain (which I would expect is defined by the scope attribute in manifest.json) to open in the same "window", respecting the "fullscreen" or "standalone" value of the "display" attribute in manifest.json.

I also tried playing around with these meta tags, but to no avail:

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">

It works as expected on Android (Chrome).

Am I doing anything wrong?

Upvotes: 2

Views: 2302

Answers (1)

qpwr
qpwr

Reputation: 458

I got it working. I basically did three things, but am not certain which of it does the trick:

  1. Add the manifest.json (code below)
  2. Add a fake webServiceWorker (code below)
  3. Add some meta tags

manifest.json

{
    "name": "AppName",
    "short_name": "AppName",
    "description": "Some Description",
    "lang": "de-DE",
    "start_url": "/",
    "scope": "/",
    "display": "standalone",
    "theme_color": "#4FD083",
    "background_color": "#4FD083",
    "icons": [
        {
            "src": "/img/apple-touch-icon-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/img/apple-touch-icon-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ]
}

webServiceWorker #1

<script type="text/javascript">
if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('js/service-worker-pwa.js');
}
</script>

webServiceWorker #2 (the actual file as referenced above)

self.addEventListener('fetch', function (e) {
});
self.addEventListener('install', function (event) {
});

meta tags

<link rel="manifest" crossorigin="use-credentials" href="<url of the application>/manifest.json">
<meta name="application-name" content="AppName">
<meta name="msapplication-starturl" content="<url of the application>">
<meta name="viewport" content="width=device-width,initial-scale=1">
<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="AppName" />

Hope this will be helpful for anyone else running into this issue.

Upvotes: 2

Related Questions