ExpoでWebViewを利用する

WebViewとは

WebViewとはモバイルアプリ上にブラウザを展開し Webサイトを表示する機能です。 それぞれ、iOSにはWKWebView ClassがAndroidにはWebView Classが実装されています。

参考

https://developer.apple.com/documentation/webkit/wkwebview https://developer.android.com/reference/android/webkit/WebView

react-native-webview

react-native-webviewを使うことで、React Native上でiOS/AndroidのWebViewを展開することができます。 Expoでも利用可能ですので、今回はこちらを採用します。

参考

GitHub - react-native-webview/react-native-webview: React Native Cross-Platform WebView

React Native Cross-Platform WebView. Contribute to react-native-webview/react-native-webview development by creating an account on GitHub.

github.com

WebViewコンポーネントの配置

早速Expoプロジェクトを作成し、WebViewコンポーネントを次のように配置します。

今回はFusicのコーポレートサイトを表示してみます。

export default function App() {
  const END_POINT = "https://fusic.co.jp";
  return (
    <SafeAreaView style={styles.safeArea}>
      <WebView
        style={styles.webview}
        source={{
          uri: END_POINT,
        }}
      />
    </SafeAreaView>
  );
}

たった数行でWebViewでWebサイトを表示することができました。

WebViewのエラーハンドリング

実際にモバイルアプリにWebViewを組み込む際にはネットワークエラー等のエラーハンドリングが必要です。

react-native-webviewにはonErrorのコールバックにてWebView Classのエラーコードを取得することができます。

例えば次の状態で端末をオフラインにするとiOSではcode -1009を取得することができます。

<WebView
  onError={(error) => {
    const {nativeEvent} = error;
    console.log(nativeEvent.code); // code: -1009
  }}
/>

なお、これらのエラーコードはOSのドキュメントにて参照可能です-1009はオフラインエラーと記載があります。

参考

NSURLErrorUnknown | Apple Developer Documentation

The URL Loading System encountered an error that it can’t interpret.

developer.apple.com

WebViewとReactNativeの値のやり取り

実際に開発をしているとWebView上のJavaScriptとReactNativeで値のやり取りをしたいケースが出てきます。

react-native-webviewではpostMessageというインターフェースが用意されておりますので、こちらを利用する

参考

react-native-webview/docs/Guide.md at master · react-native-webview/react-native-webview

React Native Cross-Platform WebView. Contribute to react-native-webview/react-native-webview development by creating an account on GitHub.

github.com

WebView上のJavaScriptにて window.ReactNativeWebView.postMessage を実行して 文字列を送信します。

window.ReactNativeWebView.postMessage(
  JSON.stringify({ 
    status: 'successs',
  }),
)

react-native-webview上ではonMessageを利用して文字列を受け取り JSON.parse します。

<WebView
  onMessage={(event: WebViewMessageEvent) => {
    const message = JSON.parse(event.nativeEvent.data);
    console.log(message.status); // success
  }}
/>

まとめ

今回は、react-native-webviewを用いてExpo上にWebViewコンポーネントを実装してみました。 WebViewを活用すれば、モバイルアプリ開発にてWebアプリの資産が利用できるため開発の幅が広がるかと思います。