React Native と WebView を堅実に連携させる

Transcript

1. ©HEARTBEATS Inc.All rights reserved React Native と WebView を 堅実に連携させる 株式会社 HEARTBEATS（旧商号：株式会社 ventus） 岩田風多 (cm-ayf)
2. ©HEARTBEATS Inc.All rights reserved 電子トレカ®コレクションサービス ORICAL® をガワネイティブでストアに配信 • ウェブアプリとして活発に運用されているサービス ◦ 御歳6歳のレガシーなコードベース ◦ 20以上あるコンテンツごとに UI をカスタマイズ ◦ Weekly のリリーススケジュール • iOS / Android アプリとして配信したい ◦ ストアで配信したい ◦ アプリ内課金・リワード広告などを実装したい ◦ （昔は React Native で二重実装していた） • ガワネイティブにしよう ◦ WebView で Web アプリを表示 ◦ アプリ側から Web アプリに 安定したインターフェースを提供
3. ©HEARTBEATS Inc.All rights reserved React Native でアプリを実装して WebView と型を共有しながら連携 • React Native と bridge.js、bridge.js と Web アプリの間で型を共有 ◦ React Native が WebView に注入する bridge.js も型チェック • React Native のツールチェーンで bridge.js もビルド ◦ Babel プラグインで import によってコード文字列を得る ◦ Metro の dev サーバーでちゃんとリロードできる • 実際に Firebase Auth を簡単・安全に連携している ◦ bridge.js から Persistence を提供するだけで連携
4. ©HEARTBEATS Inc.All rights reserved • 環境の境界とリポジトリの境界を別の場所に置いている ◦ 環境の境界は型が安定していない ◦ リポジトリ・リリースの境界は安定したインターフェースが必要 • 下図の全体で1つの型定義を共有することができる React Native と bridge.js、bridge.js と Web アプリの間で型を共有 React Native bridge.js Web アプリ アプリのリポジトリ Web のリポジトリ WebView 上で実行 Hermes で実行 リポジトリ・リリースの境界 （安定したインターフェース ） 環境の境界 (Comlink over postMessage)
5. ©HEARTBEATS Inc.All rights reserved • bridge.js は React Native 内では文字列として扱う ◦ WebView の injectedJavaScript に渡すため ◦ default import で文字列が得られるように Babel でトランスパイルする • Reload on save や *.{ios,android}.js に対応 ◦ import はあくまで Metro が解決するため React Native のツールチェーンで bridge.js もビルド // window.AppBridge を定義 import './bridge'; window.AppBridge.LoggerService .addListener((level, log) => { console[level](log); }); // window.AppBridge を定義 import $1 from './bridge'; export default $1 + `window.AppBridge.LoggerService .addListener((level, log) => { console[level](log); });`; アプリのリポジトリに commit injectedJavaScript に変換
6. ©HEARTBEATS Inc.All rights reserved • Firebase Auth の認証情報ストアを React Native に委託する ◦ React Native 側と同じ認証情報を参照・永続化 ◦ https://firebase.google.com/docs/auth/web/auth-state-persistence?hl=ja • bridge.js で interface Persistence を実装するクラスを提供 ◦ Web アプリ側では global に生えているクラスを指定するだけ ◦ Comlink だけでは同期的に new Persistence() できない 実際に Firebase Auth を簡単・安全に連携 // bridge.js /** @implements PersistenceInternal */ class ProxiedPersistence { async _isAvailable() { /* call bridge */ } async _get(key) { /* call bridge */ } async _set(key, value) { /* call bridge */ } async _remove(key) { /* call bridge */ } } window.AppBridge.ProxiedPersistence = ProxiedPersistence; // Web アプリ側 if (window.AppBridge?.ProxiedPersistence) { initializeAuth(app, { persistence: window.AppBridge.ProxiedPersistence, }) }
7. ©HEARTBEATS Inc.All rights reserved • これまで：細々と保守してまいりました ◦ 2024年9月リリースから安定して稼働中 ◦ 2025年2月に古い React Native 製アプリをリプレース • これから：欲しいと言われたらすぐにアプリを提供できます ◦ 2026年3月にも新しいアプリをリリース ◦ 短いリードタイム・少ない工数で新しいアプリをリリースできる これまでとこれから
8. ©HEARTBEATS Inc.All rights reserved • 当アプリの保守・新規アプリリリース等 ◦ https://collection.ultraman-cardgame.com/ など • 別の「普通の」React Native アプリの新規開発・保守 • 採用窓口：　https://hrmos.co/pages/heartbeats/jobs/0022059 ↓ • 技術ブログ：https://zenn.dev/p/ventus ◦ 私が全然 React Native じゃない記事を上げてます アプリエンジニアを募集しています！