ios PWA 如何在移动默认 safari 上打开外部链接(不是在应用程序浏览器中) [英] ios PWA How to open external link on mobile default safari(not In app browser)

问题描述

我正在 IOS 13.2 中制作 PWA.

I'm making a PWA in IOS 13.2.

我需要通过单击外部链接从我的应用启动另一个 PWA.

I need to launch another PWA from my app by clicking an external link.

问题是我当前的 PWA 在应用内浏览器中打开所有外部链接，而不是常规 safari，并且在应用内浏览器中没有添加到主屏幕选项.

The problem is that my current PWA opens all external links in the in-app browser instead of regular safari and there is no add to Home screen option in the in-app browser.

如何强制 PWA 在常规 safari 而不是应用内 safari 中打开外部链接?

How can I force the PWA to open an external link in regular safari instead of in-app safari?

行不通的事情

• 更改清单文件中的范围
• 使用rel="noreferrer"
• 使用target=_blank"

推荐答案

回答这个问题(以及所有评论)有点困难，因为用例不是很清楚，但是这里...

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

在移动设备上，应用内浏览器"与在全屏模式下运行的渐进式 Web 应用程序不同.

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

如果 iOS 应用程序运行并在其中显示 HTML 内容，则它正在使用 UIWebView 或 WKWebView.但是，在 PWA 的情况下，它已经在 Safari 中作为全屏"运行.经验.定义您尝试断开链接的内容非常重要，因为它们的功能不同.

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" 通常会使用 WebView 断开页面的链接.我相信这也是当前域外链接的默认功能.

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.

已安装"PWA 运行在称为独立"的东西中模式.这使它全屏并删除导航栏等.在撰写本文时，Safari 不支持 全屏 API 其他浏览器正在实现.Chrome 使用应用清单文件来确定此功能.Safari 基本上会忽略清单，转而使用专有元标记.

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.

在这种情况下 告诉 Apple 使页面成为一个独立的应用程序.尝试在应该脱离独立模式的页面上设置 content=no"(Safari 缓存大量内容，因此您可能需要强制刷新).您可以使用这个 javascript boolean window.navigator.standalone 来检查页面认为它处于什么模式.

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.

或者您可以使用 javascript 强制新窗口"；在 Safari 中，只要您的目标是不同的子域或 HTTP 而不是 HTTPS.

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');
}

最后，Apple 使用了一些 特殊 URL 字符串 使本机应用程序处理某些操作，例如电子邮件、电话号码和 YouTube 视频.你也许能够破解"使 safari 打开您的链接的功能.

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.

这篇关于ios PWA 如何在移动默认 safari 上打开外部链接(不是在应用程序浏览器中)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！