Navigate to page without exposing Safari UI

vaid 0
Viewed 18

I'm trying to get my PWA to navigate to a new route (i.e /login) but every time I navigate, the standard Safari UI is exposed as a form of new page with a back button, refresh button and a "Done" button at the top.

Is there a way to navigate without exposing the native UI of Safari?

Here is what I've tried:

window.location.replace('/login')
window.open('/login', '_blank') //this one is same but different
window.location.href  = '/login'
window.location.assign('/login', '_blank')
progressive-web-apps ios javascript
1 Answers

The native browser UI is exposed due to incomplete PWA definitions, treating a loaded webpage as a normal web page.

What you want to do is to treat the website as a native app (impossible) but can be "simulated" by properly defining how the loaded web page should be treated.

You do this by creating a manifest.json file and host it on your site.

Inside the manifest file you can define how the page that includes said manifest should be treated.

In order to treat your site as a standalone app, you must define display: standalone inside the manifest, as such:

{"display": "standalone"}

Inside the HEAD tag of your web page you simply load the manifest as such:

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

The standalone value of the display property will tell the app to treat it as a close to a native app as possible, thus ignoring the native browser UI.

Here are a few links to read more:

https://developer.mozilla.org/en-US/docs/Web/Manifest/display https://spicefactory.co/blog/2019/10/18/native-like-pwas/ https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html https://firt.dev/ios-14/

vaid0
Related