ios PWA 如何在移动默认 safari 上打开外部链接（不在应用浏览器中）

Question

我正在 IOS 13.2 中制作 PWA。

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

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

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

不起作用的东西

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

Answer 1

这个问题（以及所有 cmets）有点难以回答，因为用例不是很清楚，但是这里......

在移动设备上，“应用内浏览器”与在全屏模式下运行的渐进式 Web 应用不同。

如果 iOS 应用程序运行并在其中显示 HTML 内容，则它使用的是 UIWebView 或 WKWebView。但是，对于 PWA，它已经在 Safari 中作为“全屏”体验运行。 定义您要从中断开链接非常重要，因为它们的功能不同。

target="_blank" 通常会使用 WebView 将链接从页面中断开。我相信这也是当前域外链接的默认功能。

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

在这种情况下，<meta name="apple-mobile-web-app-capable" content="yes"> 告诉 Apple 将页面设置为独立应用程序。尝试在应该脱离独立模式的页面上设置content="no"（Safari 会大量缓存内容，因此您可能需要强制刷新）。您可以使用此 javascript boolean window.navigator.standalone 来检查页面认为它处于什么模式。

或者您可以使用 javascript 在 Safari 中强制打开“新窗口”，只要您的目标是不同的子域或 HTTP 而不是 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 使用了一些 special URL strings 来让原生应用处理一些操作，例如电子邮件、电话号码和 youtube 视频。您或许可以“破解”该功能，让 Safari 浏览器打开您的链接。

Answer 2

经过相当彻底的调查，我认为目前（在 iOS 13.X 和 iOS 14.1 之间）这是不可能的。

以下 javascript API 将使用应用内浏览器：

• window.open()
• window.location.href =

使用锚标记也将使用应用内浏览器，无论它被分配什么属性。更改清单中的范围也无济于事。

但是我确实找到了一种方法，至少可以提示用户他们在应用内浏览器中，以使用户体验不那么混乱。

有两种方法（也许更多？）来检测浏览器是否独立：window.matchMedia("(display-mode: standalone)").matches 和 window.navigator.standalone 。这是奇怪的部分：

// regular safari
window.navigator.standalone -> false
window.matchMedia("(display-mode: standalone)").matches -> false

// full screen apps (only pwas, weirdly enough this doesn't apply to pre-pwa web apps on iOS)
window.navigator.standalone -> true
window.matchMedia("(display-mode: standalone)").matches -> true

// in-app browsers launched from within a PWA 
window.navigator.standalone -> true
window.matchMedia("(display-mode: standalone)").matches -> false

我假设 window.navigator.standalone 代表 pwa 的父上下文，window.matchMedia("(display-mode: standalone)").matches 代表应用内浏览器的上下文。

所以一个简单的实现来检查您的应用是否在 iOS 上的应用内浏览器中运行：

function isIOSInAppBrowser() {
  // Check if device is iPad, iPhone or iPod (this bit is naive and should probably check additional stuff)
  if (Boolean(window.navigator.userAgent.match(/iPad|iPhone|iPod/)) === false) return false;

  // Check if navigator is standalone but display-mode isn't
  if (window.navigator.standalone === true && window.matchMedia("(display-mode: standalone)").matches === false) {
    return true;
  } else {
    return false;
  }
}

请注意，此实现并不可靠，并且在未来的 iOS 版本中很容易产生误报

Answer 3

@IBAction func openURL(_ sender: Any) {
// check if website exists
guard let url = URL(string: "https://apple.com") else {
    return
}

let safariVC = SFSafariViewController(url: url)
    present(safariVC, animated: true, completion: nil)
}

Answer 4

我会亲自尝试target="_blank" 到href 链接。我还将添加一个rel="noreferrer external" 以确保这在不同的 webview 实现中是一致的。虽然我不完全确定它在 iOS 中是如何工作的，但也应该有一种方法可以通过清单文件执行此操作。

Answer 5

这将在所有支持 PWA 的 iOS 版本上完美运行。 （我知道这一点是因为我是 iOS 的老用户）：

将target="_blank" 添加到您拥有的所有链接中。这将在移动默认 Safari 中打开它们。

例如：

<a href="/page" target="_blank">Page</a>

Answer 6

您的应用的工作方式取决于您在 manifest.json 文件中的配置。

在manifest 文件中，scope 键将决定在 PWA 中打开哪个链接以及在浏览器中打开哪个链接。

例如myapp 下的路由将在 PWA 内部打开，其他将在外部。

{
  "name": "My App",
  "start_url": "/myapp",
  "scope": "/myapp",
  "display": "standalone"
}