Search code examples
htmliosprogressive-web-apps

PWA shows Safari controls when being redirected to other URL

I am trying to create a PWA for iOS. This is working fine. The main page of my application looks like this:

PWA1

As you can see the application fills my whole screen nicely. This page has the URL https://example.com/scanner. When the user visits this application for the first time, he gets redirected to https://example.com/scanner/login. But for some reason the PWA shows some weird Safari controls.

PWA

How do I get rid of these weird controls?

Relevant code on /scanner/

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<link rel="manifest" href="manifest.json">

Relevant code on /scanner/login

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<link rel="manifest" href="manifest.json">

manifest.json

{
  "display": "standalone",
  "scope": "/scanner/"
}
Solution

  • Solved it. It had nothing to do with the manifest. I was just linking to it wrong. https://example.com/scanner is the URL determined by the URL-routers in the server-side web-app. Files and other assets need to be linked static.

    Defining the scope in the manifest.json solves the issue described in my question.

    {
  "display": "standalone",
  "scope": "/scanner/"
  ...
}