iOS 11 - standalone web app link opening default reversed? (Handling PDF display in web app.)

Question

There was a lot of traffic about preventing a link in a standalone web app from opening in mobile Safari, but the iOS versions quoted were much earlier (7-9?). In iOS 11, I'm having the opposite problem: in my standalone web app, I have links to PDF files that need to be displayed. When I click on them, they open inside the web app browser instead of inside Safari, no matter what options I have given. Because of standalone mode, the result is a dead-end in the web app that requires restart of the app. (Android seems to do the right thing and pass off to a pdf viewing app.)

Click handler (javascript/bootstrap/jquery):

function openDocument(docURL) {
    window.open(docURL,'_blank');
    return false;
}

Alternatively, can one turn on the navigation inside the web app for the new page so that I can avoid the dead end? (I think no from what I'm reading; I've tried some options to window.open to no avail.) Or is it possible somehow put together a (multi-page) pdf viewer and a UI element for dismissal? Suggestions welcome.

EDIT: summarizing discussion below, iOS handles internal vs external links differently in standalone web apps. Making the links appear to be external by remapping on the server side allows the link to force Safari to open.

Microampere

Answer 1

HHave an iFrame or a DIV in your page and load the PDF inside that component. Have a back button top of the iFrame to avoid dead end.

<iframe src="https://example.com/mypdf.pdf"
   width="match your parent element" height="match your parent element" >

You can see one more option here to embed PDF.

Update: If you open the PDF form a different domain or sub-domain, it will be opened in a separate window even in iOS. Say your PWA URL is https://www.example.com/myapp and if you are currently accessing pdf from "https://www.example.com/myapp/pdf/mypdf.pdf", set an alias for this URL like "https://www.pdf.example.com/myapp/mypdf.pdf".

If the domain or sub-domain changes in a PWA, it will be treated as an external link and will always open in a new window and not inside the app leading the the dead end. You can try this if the CSS hacks are not good enough.

Sawyor

Hmmm.. the iframe does display part of the pdf page; for some reason it's not interacting well with the bootstrap container and is not allowing zoom or scroll like a new window in Safari would. Can muck around with the css to see if I can figure out what's making it not display correctly. Clarification question: have you used this technique to display multiple page PDF files with zooming ability? – Microampere

I'm not sure what you mean by multiple page PDF files. I've used a PDF embedding in past though. How each browser rendered this embedded PDF will vary and its a tricky thing to implement. If you are trying to solve this only for iOS, you can make the above logic device specific, so other device-browser can work with new window which you seem to be okay with. I've added an update to the answer as well. please check that. – Sawyor

By multi-page I meant that the documents have 2 or more pages. The pdf is actually served from a different subdirectory on that domain, and I didn't observe that behavior. I thought for a moment that it might be that I was giving it a relative path, but when I prepended the domain, the same thing happened (link opened in path). I put an external site link in there (www.google.com) and it did jump to Safari. FWIW, there is also a service worker in the loop caching things, which could be complicating matters. Hmm... Can I convince the PWA to treat files like they are external origin? – Microampere

To make your PWA treat the links of external origin, it has to be external origin and that is were creating the sub domain for your PDF files will help. There is no other way you can make it external. You can exclude it from service worker cache by removing the PDF path from the scope. But that will still not make it to open in a external browser window, unless you have a sub-domain. – Sawyor

Sorry - didn't grok what you were saying the first time around. Duh. This might or might not be possible on my provider but I get what you're saying now (and this would make it look "externalish"). Will look into it. A different option would be to host somewhere else (maybe even Google Drive) rather than on the site. Will think about this -- may be easier than trying to figure out how to get pdf embedding to work on multiple platforms. – Microampere

I figured out how to do the mapping with my provider as you suggested, and all is good. Thanks for your help (and patience). – Microampere

Glad it helped. Thought "grok" is a typo until I googled to know what it means :) – Sawyor