响应本地Webview (camera，getUserMedia)对iOS 15的双重权限请求

Question

我们做什么？

我们正在为iOS和安卓平台构建一个React本地应用程序。该应用程序有一个外部网站与相机操作内部，打开通过react-native-webview模块。从我们的实验中我们观察到，为了使它正常工作，我们必须向终端用户询问相机的权限两次。

1. (一次)用户在设备上安装后首次打开应用程序
2. (每次)当组件被加载并在其中执行getUserMedia方法时。

这两个请求都显示给用户弹出窗口，显示文本以允许相机访问:第一个用于“application_name”，第二个用于“url_inside_webview”- 图像方案。

对我们来说是一个关键的问题，因为：

1. 每次用户打开应用程序webview组件(并且它正在执行)时，询问权限(在webview内)都是一个糟糕的UX。
2. 在苹果审查期间，我们在向苹果商店发布应用程序时遭到拒绝。审阅者的评论正是在这个时候指出的，“每次web组件加载时，都要问权限两次”。

复制问题的技术细节

操作系统: Apple iOS 15.1及更高版本

响应本机依赖关系：

"dependencies": {
  "react": "17.0.2",
  "react-native": "0.66.0",
  "react-native-permissions": "^3.0.6",
  "react-native-webview": "^11.14.0"
}

在react中的设置权限-本机：

import { request, PERMISSIONS, RESULTS } from 'react-native-permissions';
// ... //
request(PERMISSIONS.IOS.CAMERA)
    .then((statuses) => {
        if (statuses[PERMISSIONS.IOS.CAMERA] === RESULTS.GRANTED) {
            setWebviewRenderAvailable(true);
        });
    });

ios/Podfile中的配置：

target 'MyAwesomeProject' do
  # Check permissions for camera

  permissions_path = '../node_modules/react-native-permissions/ios'
  pod 'RNPermissions', :path => '../node_modules/react-native-permissions'
  pod 'Permission-Camera', :path => "#{permissions_path}/Camera"
  pod 'Permission-PhotoLibrary', :path => "#{permissions_path}/PhotoLibrary"

end

更新Info.plist:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>

  <!-- ... -->
  <key>NSCameraUsageDescription</key>
  <string>Camera Access</string>
  <!-- ... -->

</dict>
</plist>

启动webview视图：

import { WebView } from 'react-native-webview';
// ... //
<WebView
    scalesPageToFit={true}
    startInLoadingState
    useWebKit
    originWhitelist={['*']}
    allowsInlineMediaPlayback
    mediaPlaybackRequiresUserAction={false}
    source={{ uri: '<access link>' }}
    style={{marginTop: 1, width: widthWebview, height: heightWebview }}
    ref={webView}
    javaScriptEnabled={true}
    cacheEnabled={true}
    onMessage={onMessage}
    onLoadEnd={onLoaded}
  />

我们的观察

• cacheMode道具(在React本机WebView中)无助于解决显式权限请求问题。

对于本机iOS应用程序，WKWebView的持久权限出现在iOS 15中：

• Swift的类似特性请求：bug.cgi?id=220416
• 苹果用Swift解决方案更新演示文稿( 14:40)：https://developer.apple.com/videos/play/wwdc2021/10032/

理想情况下，我们希望：：

1. 对webview内部的外部URL具有永久权限，以便对本机应用程序作出反应
2. 委托/复制权限(到摄像机)从iOS应用程序级别到webview

我们想知道是否有任何选择来达到预期的行为？，甚至从根本上说，一个应用程序只请求一次许可是可能的吗？

Answer 1

步骤1:升级lib版本以响应-本机-webview@11.15.0

第2步:添加下面的支柱

mediaCapturePermissionGrantType="grantIfSameHostElsePrompt"

这使iOS能够记住权限决策，并通过从本机层继承授权来消除初始的双提示符。

参考资料：Github发布