iOS PWA standalone: how to force opening in a new window

Question

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?

Answer 1

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! 🎉

Answer 2

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.