Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Capacitor製のWebViewアプリからReact Native製のハイブリッドアプリへ

Capacitor製のWebViewアプリからReact Native製のハイブリッドアプリへ

Yuku Kotani

May 30, 2024
Tweet

More Decks by Yuku Kotani

Other Decks in Technology

Transcript

  1. 小谷 優空 / @yukukotani ・SWE / VP of Technology @

    Ubie, Inc. ・React Native 1年生 ・Student @ Univ. Tsukuba 自己紹介
  2. 移行前: Capacitorアプリの構成 ・全画面が単一のWebViewでリモート参照 → シンプルにOTAアップデート ・既存のWebアプリをモバイルアプリ向けにビルドし、別ドメインで配信 ・モバイルアプリ向けのビルドからは Capacitor API でネイティブ機能を利用

    Web向け サーバー Mobile App向け サーバー Capacitor Web Browser アクセス Capacitor API でネイティブ機能呼び出し ビルド ビルド WebViewでアクセス Next.js 単一コードベースだけど 別ビルド・別インスタンス
  3. 移行後: React Nativeアプリの構成 ・基本はCapacitorをReact Nativeに置き換えただけ ・一部の画面はReact Nativeで実装しつつ、WebViewも引き続き利用 ・Capacitor APIを代替するブリッジを自作 Web向け

    ビルド Mobile App向け ビルド Expo (React Native) Web Browser アクセス ビルド ビルド Next.js 自作のブリッジ でネイティブ機能呼び出し 一部画面のみ WebViewでアクセス
  4. なぜ移行したか:MVPを超えて本格開発するため エコシステ% ユーザー体( i Ionic/Capacitorに投資している大企業が少な‰ i 結果としてか、メンテナンスが滞っているものが多‰ i OTAアップデートの仕組みもあるにはあるが、枯れていな‰ i

    ネイティブ側SDKとWebViewの整合性問題など i WebView 1枚に閉じた表現力の限h i Ionicはよくできているが、言語化しにくい細かい「アプリっぽくなさ」があ… i オフライン対応を進めるために、全面リモートWebViewをやめたい ・体調が悪いユビーのユーザーには、小さな違和感でも引っかかってほしくない
  5. なぜReact Nativeハイブリッドアプリか エコシステ s Meta, Microsoft, Amazon, Shopify といったテックジャイアントの安心C s

    3rd-partyライブラリも比較的よくメンテナンスされている Expƒ s EASの出来がかなり良€ s さらにRSC対応して最高になると賭けた(実際進んでるっぽくて嬉しいm s Expo SDKも豊富、かつ Managed Workflow でアプデも困りにくい TypeScripš s 引き続きWeb版の資産を生かしたハイブリッドアプリにしたかっÊ s WebViewと言語が揃うことは認知負荷が減る以外のメリットも大きい(後述)
  6. 仕組み:WebWorkerとWebViewのアナロジー Comlink は postMessage によるメッセージングを隠蔽する → WebViewもメッセージングできるので応用可能 ブラウザ メインスレッド Web

    Worker postMessage postMessage WebView React Native postMessage injectJavaScript App→WebはJS埋め込みで 無理やりメッセージを送る
  7. おさらい:構成 Web向け ビルド Mobile App向け ビルド Expo (React Native) Web

    Browser アクセス ビルド ビルド Next.js 自作のブリッジ でネイティブ機能呼び出し 一部画面のみ WebViewでアクセス ・既存のWebアプリをモバイルアプリ向けにビルドし、別ドメインで配信 ・WebViewからブリッジ(RPC)でReact Nativeの関数を呼び出し