我创建了一个 PWA，它使用 WebRTC 的 getUserMedia 来获取实时摄像头流。 PWA 使用 manifest.json，在 Android 上运行良好。
然而，在 iOS 上，如果我直接在 Mobile Safari 中打开链接，该应用程序也可以工作，但如果我将它添加到主屏幕，它是未定义的（因为 iOS 只允许在 Safari 上下文中使用它）。
作为一种解决方法，我想在 Mobile Safari 中打开应用而不是全屏模式，但我不知道该怎么做，因为它会在检测到 manifest.json 后自动全屏打开。
有人知道如何在 Safari 中打开带有清单的应用程序吗？
谢谢！
【问题讨论】：
标签： javascript ios getusermedia manifest.json pwa
有一种方法可以避免全屏模式打开 PWA。 在 manifest.json 中，将显示属性更改为“浏览器”。
“显示”：“浏览器”
Refer this documentation 在“显示”部分下。 您还可以考虑“minimal-ui”选项。 请记住，当您进行此更改时，它不仅会反映在 iOS 中，还会反映在 Android 中。
关于访问 getUserMeida 的实际问题，我不明白为什么它不能在全屏模式下工作。它只是一个HTML5 feature，并没有特定于 PWA。所以理想情况下，它也应该在全屏模式下工作。当您以全屏模式打开时，尝试捕获任何错误，如果发现任何错误，请在此处发布。这也可能是由于权限问题，我建议在全屏模式下解决问题以获得更好的用户体验。
【讨论】：
我通过添加两个 manifest.json 来解决这个问题，一个默认用于非 ios 设备，一个用于 ios 设备，我还创建了一个 detect.js 脚本来检测 ios 设备是否正在访问 pwa 并更改html 上的 manifest.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";
}
【讨论】：
我建议你将apple-mobile-web-app-capable 设置为no，并在文档头部使用此元标记：
<meta name="apple-mobile-web-app-capable" content="no">
这将避免 iOS 将您的网络应用理解为 PWA。
【讨论】：