メインコンテンツへスキップ

新しいiOS WebViewの導入

·3分で読めます
Ramanpreet Nara
Facebook ソフトウェアエンジニア

以前からAppleはUIWebViewの使用を推奨せず、WKWebViewの使用を勧めていました。今後数ヶ月でリリースされるiOS 12では、UIWebViewは正式に非推奨となります。React NativeのiOS WebViewの実装はUIWebViewクラスに大きく依存しています。そのため、これらの進展を踏まえ、WKWebViewを使用するWebView React Nativeコンポーネント用の新しいネイティブiOSバックエンドを構築しました。

これらの変更の最終段階はこのコミットで取り込まれ、0.57リリースで利用可能になります。

この新しい実装を選択するには、useWebKitプロパティを使用してください。

<WebView
  useWebKit={true}
  source={{url: 'https://www.google.com'}}
/>

改善点​

UIWebViewには、WebViewで実行されているJavaScriptとReact Native間の通信を容易にする正当な方法がありませんでした。WebViewからメッセージが送信される場合、それらをReact Nativeに配信するためにハックに頼っていました。簡単に言うと、メッセージデータを特殊なスキームのURLにエンコードし、WebViewをそこにナビゲートしていました。ネイティブ側では、このナビゲーションをインターセプトしてキャンセルし、URLからデータを解析して、最終的にReact Nativeを呼び出していました。この実装はエラーが発生しやすく、安全ではありませんでした。WKWebViewの機能を活用してこれを完全に置き換えることができたことをお知らせできることを嬉しく思います。

WKWebViewがUIWebViewよりも優れている点としては、JavaScriptの実行速度が速いこと、およびマルチプロセスアーキテクチャが挙げられます。詳細については、2014年のWWDCをご覧ください。

注意点​

コンポーネントが以下のプロパティを使用している場合、WKWebViewに切り替えると問題が発生する可能性があります。当面の間、これらのプロパティの使用は避けることをお勧めします。

動作の不整合

automaticallyAdjustContentInsets および contentInsets (コミット)

WKWebViewにcontentInsetsを追加しても、WKWebViewのビューポートは変更されません。ビューポートはフレームと同じサイズを維持します。UIWebViewでは、ビューポートのサイズが実際に変更されます（コンテンツインセットが正の場合、小さくなります）。

backgroundColor (コミット)

WebViewの新しいiOS実装では、このプロパティを使用すると背景色がちらつく可能性があります。さらに、WKWebViewは透明な背景をUIWebviewとは異なる方法でレンダリングします。詳細については、コミットの説明をご覧ください。

非サポート

scalesPageToFit (コミット)

WKWebViewはscalesPageToFitプロパティをサポートしていなかったため、WebView React Nativeコンポーネントではこれを実装できませんでした。