iOS 13.1 - Problem URL Bar

Question

Created Sep ’19

Replies 8

Boosts 0

Views 8.8k

Participants 7

I’m having an issue that is showing the URL Bar with the "Done" button in a case that shoudn't (Webapp created with Safari), it is happening only in iOS 13.1 (in the 13.0 it was ok). I have a Webapp, with manifest and apple-mobile-web-app-capable meta tag working fine, but the problem seem to happen when the app "navegates" to another page.

I was able to reproduce this behavior with the Starbucks Webapp too, in this case the initial domain of the app is “https://www.starbucks.com/" and when you click in the option “STORIES” in the top menu of the page, the URL changes to “https://stories.starbucks.com/" and shows the Safari URL Bar! Note that it changes only the sub-domain, the domain remains starbucks.com, and yet the top panel appears.

It seems that Safari "detect" it is going to another page and show the URL with the "Done" button do go back to the initial page. In my case, it is happening because my Web App has a initial page with “data:text/html;base64,”, that I need to redirect to my system address (IP address for example), using “window.location = …”. And when I do that, the URL bar appears. I already try many combinations with manifest and apple-mobile-web-app-capable, still got the same problem. I also tried to use an iframe inside my initial page (and not change the top URL), the page loads ok without the bar, but it does not execute any javascript inside the iframe.

I need this initial page to be a base 64 because I need to check the access in a local IP device or redirect to an external IP (and this procces need to work even without internet). I tried to use some cache manifet to create an offline page, but it didn't reproduce the desired effect, and even if the first access worked ok, if the system detects it need to change the access to a local or external IP, it changes the domain URL and the Address Bar shows up again.

Could you please point me to a solution for this case?

Thanks in advance.

Rodrigo

Boost

Answer 1

benninger OP

Sep ’19

Same problem here. It’s really annoying!

0

Answer 2

svinios OP

Oct ’19

I have the same problem. I tried to create a manifest.json file and set the scope, but no luck. when my app goes to another page within my app, it's behaving like I left my app. I also had to turn off the popup blocker to get from my login page to the next page. This all worked until I upgraded to iPadOS 13. I tried reporting as a bug, but it has been 2 weeks and they haven't even acknowledged my report.
I'm also unable to find documentation on exactly what Safari supports with PWAs.

0

Answer 3

ronnilin OP

Oct ’19

Same here. In my case there is even no done button. Only th URL and button to resize font. It breaks our webapp.

Why is there a bug again in the fullscreen webapp part? It is hard to imagine this did not show up in the testing fase.

0

Answer 4

Phil_S OP

Oct ’19

Had a similar problem yesterday. With iOS 12 it was fine, with iOS 13 the additional toolbar came up and the layout of my Ionic app wasn't ideal anymore (the header wasn't visible).

I had the problem when I used the old mechanism to make a "webapp" (by only using `<meta name="apple-mobile-web-app-capable" content="yes"/>`). Now I'm using a minimal webmanifest and with that, the behaviour is as expected.

{
  "name": "My Super App",
  "short_name": "My App",
  "display": "standalone",
  "scope": "/my-app-path/",
  "start_url": "/my-app-path/"
}

This mechanism may be a bit different in my case, because my app does a client side redirect right away to `/my-app-path/login` and after adding it to the homescreen iOS may use that path as base path. After the login (which is an URL like `/my-app-path/dashboard`) the additional bar got displayed. With the manifest the generated app may know better where the base path is. Just a theory.

Hope that helps someone.

0

Answer 5

svinios OP

Oct ’19

Thank you, Phil. Your post really did help me. I had to do two things to get Safari to pick up my manifest. Per your suggestion, I removed my old Apple meta tags, but I also had to switch to testing with the web site on a secure server (https). I saw posts that said Progressive Web Apps should use https, but I didn't realize they meant that it only works on https. Thanks again for your post.

0

Answer 6

svinios OP

Nov ’19

Today, I happened to notice that if I change "location.href = myURL" to "location.replace(myURL)", the Done button disappears but I still have the URL bar. That must be why you don't have the Done button. This is the best I've been able to do when running my webapp from an unsecured server. It looks like I'm just going to have to live with that URL bar at the top of the screen. I've still not received any information from Apple regarding my bug report. I have no idea if it is something they even consider a bug.

0

Answer 7

Mowd OP

Jan ’20

Thanks for the information, after add manifest on my web app it solved the tool bar problem.

The main idea is tell safari about the scope of the webapp.

PS. For people have this issue, after add manifest on your webapp, you need to re-add to your home screen again.

0

Answer 8

yiotix OP

Feb ’23

My workaround was to create a main HTML as a container to the main webapp and I used an iFrame to server the webapp. The window URL never changes even though the iFrame would switch between the various routed URLs. This worked for my needs, but I imagine that this solution would probably not work for many cases. Just sharing it here in case anyone else finds this useful.

0