ios PWA How to open external link on mobile default safari(not In app browser)

Published

I’m making a PWA in IOS 13.2.

I need to launch another PWA on my app by clicking the external link for that PWA.

The problem is that my PWA opens all external links on the in-app browser.
As you know, we can not add PWA to Home screen on In-app browser.

How can I force the PWA to open external links in mobile default safari?

Source: Ios

Published
Categorised as css, html, ios, javascript, progressive-web-apps

Answers

It’s a bit hard to answer this question (and all the comments) as the use case isn’t overly clear, but here goes…

On mobile devices, an “in-app browser” is NOT the same thing as a Progressive Web App running in full-screen mode.

If an iOS app runs and then displays HTML content inside of it, it’s utilizing UIWebView or WKWebView. However, in the case of a PWA it’s already running in Safari as a “full screen” experience. Defining which you’re trying to break links out of is extremely important as they function differently.

target="_blank" will typically break a link out of a page using WebView. I believe this is the default functionality for links outside the current domain as well.

An “installed” PWA is running in something called “Stand Alone” mode. This makes it full screen and removes navbars, etc. As of this writing, Safari doesn’t support the fullscreen API that other browsers are implementing. Chrome uses the App manifest file to determine this functionality. Safari basically ignores the manifest in favor of proprietary meta tags.

In this case <meta name="apple-mobile-web-app-capable" content="yes"> tells Apple to make the page a stand-alone app. Try setting content="no" (Safari caches things heavily so you might need to force a refresh) on the pages that should break out of stand-alone mode. You can check to see what mode the page thinks it’s in by using this javascript boolean window.navigator.standalone.

Or you can use javascript to force a “new window” in Safari as long as you’re targeting a different subdomain or HTTP instead of HTTPS.

// if app is hosted from https://example.com
if (("standalone" in window.navigator) || window.navigator.standalone ) {
    window.open('http://example.com/page', '_blank');
}

Finally, Apple uses some special URL strings to cause native apps to handle some actions like emails, phone numbers, and youtube videos. You might be able to “hack” that functionality to get safari to open your link.


Delphine Schneider

Leave a Reply

Your email address will not be published. Required fields are marked *

Still Have Questions?


Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us
faq