今までCapacitor(=WebViewのみ)で実装されていたユビーのモバイルアプリ(Android/iOS)を、React NativeとWebViewを組み合わせたハイブリッドアプリとして刷新しています。その過程で、WebView内で実行されるJavaScriptから、React Native側で定義した関数を型安全に呼び出せるライブラリを実装しました。その使用例と仕組みを紹介します。

使い方

React Native側の実装

まずライブラリをインストールします。Peer dependenciesであるreact-native-webviewとcomlinkも入れてください。

npm install @react-native-webview-rpc/native
npm install react-native-webview comlink # peer dependencies

次に、WebViewから実行したい関数を実装します。ここではネイティブのアラートを出す関数を実装します。

加えて、関数の型をエクスポートしておきます。これは後述するWeb側の実装で参照します。

rpcs.tsx

import { Alert } from "react-native";

const rpcs = {
  async alert(title: string, body: string) {
    Alert.alert(title, body);
    return "ok";
  },
};

export type WebViewRpcs = typeof rpcs;

最後に、useWebViewRpcHandlerを用いてメッセージイベントのハンドラを取得します。これをreact-native-webviewが提供するWebViewコンポーネントのプロパティに渡してください。

App.tsx

import { useRef } from "react";
import WebView from "react-native-webview";
import { useWebViewRpcHandler } from "@react-native-webview-rpc/native";
import { rpcs } from "./rpcs";

export default function App() {
  const ref = useRef<WebView>(null);
  const onMessage = useWebViewRpcHandler(ref, rpcs);

  return (
    <WebView
      ref={ref}
      onMessage={onMessage}
      source={{ uri: "http://localhost:5173" }}
    />
  );
}

Web側の実装

まずは同じくライブラリをインストールします。@react-native-webview-rpc/nativeではなく@react-native-webview-rpc/webであることと、react-native-webviewが不要であることに注意してください。

npm install @react-native-webview-rpc/web
npm install comlink # peer dependencies

次にwrapを用いて、React Nativeの関数を実行するためのプロキシオブジェクトを生成します。型引数には、先述のrpcs.tsxからエクスポートしたWebViewRpcsを渡します。

import { wrap } from '@react-native-webview-rpc/web';
import type { WebViewRpcs } from "../native/rpcs";

const rpcs = wrap<WebViewRpcs>();

このrpcsオブジェクトを通して、React Native側で定義した通りのシグネチャで関数を実行することができます。

const result = await rpcs.alert("Hello", "World");

仕組み

Peer dependenciesでお察しかもしれませんが、Comlinkを使って実装しています。Comlinkは元々はWeb Worker内のオブジェクトや関数を透過的に扱えるようにするライブラリですが、Web Worker相当のインターフェースがEndpointという概念に抽象化されていて、postMessageでメッセージを送ってonmessageイベントでメッセージを受け取るようなメッセージングの仕組みがあれば応用することができます。

例えば、iframeのようにwindowオブジェクトを持つものは window.postMessage() と window.addEventListener() でメッセージングができます。それに対応するEndpointがビルトインで提供されています。

では、WebViewをこのインターフェースで扱うにはどうしたらよいでしょうか。

WebView -> React Native のメッセージ

まずは関数呼び出しを伝えるメッセージです。

react-native-webviewはWebView内のwindowオブジェクトにpostMessageを生やしてくれます。Web側でこれを叩いて WebView から React Native にメッセージを送ります。

このメッセージを React Native 側のonMessageプロパティで受け取り、Comlinkが登録するリスナーに流します。メッセージの中身を解釈して関数を実行するのはComlinkがやってくれます。

React Native -> WebView のメッセージ

次に関数呼び出しのレスポンスを伝えるメッセージです。

React Native からは injectJavaScript を用いて、WebView内でメッセージイベントを発火させます。JSONはJavaScriptのサブセットですから、JSON.stringifyしたメッセージをinjectするといい具合にオブジェクトとして解釈されます。

Web側ではこのイベントに対して素直にリスナーを登録します。メッセージの解釈は同様にComlinkがやってくれます。

このように、React Native, Webの両方でEndpointインターフェースに合わせてメッセージングの実装をするだけで、残りはComlinkの仕組みを使いまわせます。Proxyを駆使した透過的呼び出しやメッセージのシリアライズなどについて考えなくて済むのでとっても楽です。

おわりに

Comlinkのイケてる抽象化によって、WebViewからReact Nativeの関数を型安全に呼び出せた事例を紹介しました。ユビーではWeb技術を駆使したモバイルアプリの開発も加速しています。少しでも興味持ってくださった方はぜひお話しましょう！DMでもpittaでも何でもご連絡ください。

https://pitta.me/matches/ctRgxKmjoujl

Discussion