How Can I Hide The New Url Bar On Ipad Safari Webapp Fullscreen Mode, Appearing Since Ipados 13?

iPadOS 13 now shows a white/grey bar when a WebApp is installed via 'Add to Home Screen' on Safari, even when apple-touch-fullscreen meta tag is added. The bar includes a menu to r

Solution 1:

I have found out the solution to this.

iPadOS does add the url bar to web apps even if the apple-touch-fullscreen meta tag is added, but now uses the manifest.json file used with Progressive Web Apps (PWA) to detect fullscreen mode. It has supported this before version IOS 13 but only now is it required for the fullscreen experience.

In my application the manifest.json link tag <link rel="manifest" href="manifest.json"> was ONLY being added when Google Chrome is detected; updating it to add the link when Safari on the iPad is detected resulted in the grey bar being hidden completely (Note that iPad detection has changed in this version now that mobile/desktop versions can be requested)

The manifest.js file that allowed fullscreen is shown below (display: "standalone" allows fullscreen)

{"name":"MyApp","short_name":"MyApp","description":"MyApp description","version":"0.0.0.1","manifest_version":2,"default_locale":"en-GB","author":"Christopher Dean","start_url":"Home.aspx","display":"standalone","orientation":"landscape","theme_color":"#015174","background_color":"#F7F4F3","icons":[{"src":"images/app-icon-chrome.png","sizes":"128x128","type":"image/png"},{"src":"images/app-icon-tiny.png","sizes":"32x32","type":"image/png"},{"src":"images/app-icon-192.png","sizes":"192x192","type":"image/png"},{"src":"images/app-icon-512.png","sizes":"512x512","type":"image/png"}],"app":{"urls":["http://MyApp/Home.aspx"],"launch":{"web_url":"http://MyApp/"},"background":{"scripts":["chrome.js"]},"permissions":["unlimitedStorage","notifications","fullscreen"]}}