5

I have a PWA saved on the home screen, this opens up standardly without search bar nor the bottom buttons (share, tabs, etc..).

So every link gets opened inside the PWA, and that is expected.

I have a problem when showing pdfs as they normally open in Safari with the "share" button and all the bottom bar, but in the PWA they open up without bottom bar and without any share button.

So my idea is to open the PDF link (http://www.mywebsite.com/download/pdf/12345) in a new safari window,.

I tried putting target="_blank" on the PDF link but this did not solve the problem.

I also tried forcing the iOS behavior by opening the app in safari with safari://http://www.mywebsite.com/download/pdf/12345 but with no luck.

How do I open a New Safari window to a link?

Mr.Web
  • 6,992
  • 8
  • 51
  • 86

2 Answers2

3

OK, the ONLY working solution is to tell iOS you are going onto another domain.

PWA stays in your app frame ONLY if you stay in the same domain. To open a link within your domain in an EXTERNAL window (or inside the PWA but with Safari standard controls) you have to send it to an external/different domain.

So the PWA is on https://www.mywebsite.com/ and you want to open a PDF with all Safari control buttons, you just create a SUB domain and point the link to it, like https://media.mywebsite.com/download/pdf/12345 at this point the PWA thinks you are on a different domain and does the correct rendering!

Mr.Web
  • 6,992
  • 8
  • 51
  • 86
  • At the time of your answer yes, now it is no more possible to open a link outside – Fabio Ricci Nov 03 '20 at 15:28
  • @FabioRicci if you do as I wrote with an external sub domain it still works as they are seen as different domains – Mr.Web Nov 03 '20 at 15:29
  • But is this working for files only? I try to open an external link on another domain, which is an audio stream and still open this damn in-app-browser. Still the audio plays ok, but the background audio is not supported https://bugs.webkit.org/show_bug.cgi?id=198277 I am in the middle of an infernal loop... – Fabio Ricci Nov 03 '20 at 15:38
  • Ok, the app will open an internal browser within the PWA, it will not open a new Safari window but it will have all Safari toolbars. If doubts we can continue this over telegram (user: @mrweb87) – Mr.Web Nov 03 '20 at 15:41
1

You can try to use window.open(url).

But, remember to put it in an element with onclick event attribute.

For example, 

<button class='btn' onclick='window.open("https://www.google.com", "_blank");'>Open Google search</button>

Reference: window.open(url, '_blank'); not working on iMac/Safari

EDIT

You can set a scope in manifest.json to customize where to open an external link.

You can refer https://developers.google.com/web/fundamentals/web-app-manifest on the property scope.

brendan
  • 3,062
  • 3
  • 12
  • 16
  • Unfortunately this does not work. I Used the exact same code you gave (copy-paste)... I think there is no way as of now. – Mr.Web Jan 08 '20 at 19:34
  • 1
    @Mr.Web now i understand what you need. I found out a way to customize that. you can see my edit answer. – brendan Jan 09 '20 at 01:19
  • My app is in `www.mysite.com/live/index.html` and I tried "scope" as `live/` or `/live/` but it does the same exact thing, not working. Works fine on Android tho – Mr.Web Jan 10 '20 at 10:51