8

我创建了一个 PWA，它使用 WebRTC 的 getUserMedia 来获取实时摄像头流。PWA 使用 manifest.json，在 Android 上运行良好。

然而，在 iOS 上，如果我直接在 Mobile Safari 中打开链接，该应用程序也可以工作，但如果我将它添加到主屏幕，它是未定义的（因为 iOS 只允许在 Safari 上下文中使用它）。

作为一种解决方法，我想在 Mobile Safari 中打开应用程序而不是全屏模式，但我不知道该怎么做，因为它会在检测到 manifest.json 后自动打开全屏。

有谁知道如何在 Safari 中打开带有清单的应用程序？

谢谢！

4

3 回答 3

3

我通过添加两个 manifest.json 来解决这个问题，一个默认用于非 ios 设备，一个用于 ios 设备，我还创建了一个 detect.js 脚本来检测 ios 设备是否正在访问 pwa 并更改清单。 html 上的 json 引用。有代码：

// Detects if device is on iOS 
const isIos = () => {
    const userAgent = window.navigator.userAgent.toLowerCase();
    return /iphone|ipad|ipod/.test( userAgent );
  }

// change manifest.json
if (isIos()) {
    document.getElementById("manifest").href = "ios-manifest.json";
}
于 2018-08-19T21:03:53.763 回答
3

有一种方法可以打开 PWA 避免全屏模式。在 manifest.json 中，将显示属性更改为“浏览器”。

“显示”：“浏览器”

请参阅“显示”部分下的本文档。您还可以考虑“minimal-ui”选项。请记住，当您进行此更改时，它不仅会反映在 iOS 中，还会反映在 Android 中。

关于访问 getUserMeida 的实际问题，我不明白为什么它不能在全屏模式下工作。它只是一个HTML5 功能，并没有特定于 PWA。所以理想情况下，它也应该在全屏模式下工作。当您以全屏模式打开时，尝试捕获任何错误，如果发现任何错误，请在此处发布。这也可能是由于权限问题，我建议在全屏模式下解决问题以获得更好的用户体验。

于 2018-06-14T19:06:32.957 回答
0

我建议您在文档头部设置apple-mobile-web-app-capable这个no元标记：

<meta name="apple-mobile-web-app-capable" content="no">

这将避免 iOS 将您的 Web 应用程序理解为 PWA。

于 2018-10-23T14:11:12.420 回答