Search code examples
iosipadsafariprogressive-web-appsios13

Fullscreen PWA on Safari iOS13 iPad has URL bar with reader and "Done" button, unable to hide


I have a web app that I've added to the homescreen on my iPad as a PWA. All was fine prior to the iOS13 update, in which now there is a small URL toolbar at the top the has "Done" on the left (refreshes/reloads page to initial start URL) and a Reader/Settings "Aa" button on the right.

The URL bar only appears when a user logs in, in which their session data is encrypted and added at the end of the URL, so it goes from "https://mysite/Home/" to "https://mysite/Home/encryptedsessionurl". As far as I know, having the scope in my manifest (below) be "https://mysite/Home/" should be alerting Safari that this is the same site, but it is not.

I have read multiple posts trying to figure this out-- I've checked my meta tags, and created a manifest.json file which looks like this:

{
  "name": "My App Name",
  "short_name": "My App",
  "lang": "en-US",
  "display": "standalone",
  "orientation": "landscape",
  "start_url": "https://mysite/Home/",
  "scope": "https://mysite/Home/",
  "permissions": [ 
    "unlimitedStorage",
    "fullscreen"
   ]
}

My meta-tags looked like this, which were functioning fine before:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-status-bar-style" content="black" />

I've tried removing the meta-tags and only having the manifest, as another post suggested, and have even tried changing display: "standalone" to "fullscreen" in the manifest which also has not worked.

I'm just not sure what's wrong here, and any other suggestions would be greatly appreciated.


Solution

  • Maybe a silly mistake, but hopefully it will help others as well-- I didn't realize that I had to keep creating a new PWA for the site every time I updated my manifest.

    It started working perfectly the moment I created a new PWA (via "Add to Homescreen" shortcut).