Question

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

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

作为解决方法，我想在Mobile Safari中打开应用程序而不是全屏模式，但我不知道如何执行此操作，因为它会在检测到manifest.json后自动打开fulscreen。

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

谢谢！

Answer 1

有一种方法可以打开PWA，避免全屏模式。在manifest.json中，将display属性更改为＆＃34; browser＆＃34;。

＆＃34;显示＆＃34;：＆＃34;浏览器＆＃34;

Refer this documentation在＆＃34;显示＆＃34;部分下。你也可以考虑＆＃34; minimal-ui＆＃34;选项。请记住，当您进行此更改时，它不仅会反映在iOS中，还会反映在Android中。

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

Answer 2

我通过添加两个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";
}

Answer 3

我建议您使用文档顶部的此meta标签将apple-mobile-web-app-capable设置为no：

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

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

PWA中的getUserMedia与iOS 11上的清单

3 个答案: