Works only in iOS 17, I couldn't find a way to do it in earlier versions of iOS.
window.location = `x-safari-${window.location.href}`;
So the URL should look like x-safari-https://domain
It looks like the in-app browser also blocks the second attempt (if a user clicks 'don't open safari' the first time), so rendering a link with this URL instead might be a better solution.
Answer from Victor Trusov on Stack OverflowWorks only in iOS 17, I couldn't find a way to do it in earlier versions of iOS.
window.location = `x-safari-${window.location.href}`;
So the URL should look like x-safari-https://domain
It looks like the in-app browser also blocks the second attempt (if a user clicks 'don't open safari' the first time), so rendering a link with this URL instead might be a better solution.
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.
PWA on iOS
Safari iOS Extensions in PWAs? Any trick to getting them to be functional?
Why is a Progressive Web App (PWA) not do… - Apple Community
PWA showing white screen on IOS 16.4 when… - Apple Community
Videos
Hey all, I'm considering going fully on React and use PWA for both iOS and Android.
It seems Android makes it a bit easier, do you happen to know by any chance the pitfalls of using PWA on iOS? Specifically in these areas:
- User installation.
- Notifications.
- Geolocation.
Any insight is appreciated
I found a previous thread talking about Safari Extensions in PWAs and the feedback seemed to centre around Ad Blocking, which isn’t really what I’m interested in. I’m currently building a radio scrobbling app and wanted to leverage the Web Scrobbler extension to handle the authentication and scrobbling. It works beautifully in Safari, but when I add the PWA to my homescreen it doesn’t do anything. I wasn’t sure if anyone had any insight on how extensions could function within a PWA and whether there’s some secret sauce to doing it. I contribute to Web Scrobbler, so feel like if I had some direction to offer on the topic I could see about asking about getting that compatibility included.