WebViewのpostMessageは投げたら終わり — 相関IDで要求と応答を結ぶブリッジを設計する

// bridge/protocol.ts — ネイティブ・Web で共有する型定義
export type BridgeKind = "request" | "response" | "error" | "event";
 
export interface BridgeEnvelope<T = unknown> {
  v: 1;              // プロトコルバージョン。破壊的変更に備える
  id: string;        // 相関ID（要求と応答で同一）
  kind: BridgeKind;
  type: string;      // "editor.getContent" のような操作名
  payload?: T;
  error?: { code: string; message: string };
}
 
// 許可する操作名のホワイトリスト（未知の type は捨てる）
export const ALLOWED_TYPES = [
  "editor.getContent",
  "editor.setContent",
  "editor.isDirty",
  "viewport.scrollTo",
] as const;
export type AllowedType = (typeof ALLOWED_TYPES)[number];

// bridge/useWebViewBridge.ts
import { useCallback, useEffect, useMemo, useRef } from "react";
import type { WebView, WebViewMessageEvent } from "react-native-webview";
import { ALLOWED_TYPES, type BridgeEnvelope } from "./protocol";
 
interface Pending {
  resolve: (value: unknown) => void;
  reject: (reason: Error) => void;
  timer: ReturnType<typeof setTimeout>;
}
 
export function useWebViewBridge(allowedOrigin: string) {
  const ref = useRef<WebView>(null);
  const pending = useRef(new Map<string, Pending>());
  const seq = useRef(0);
 
  const call = useCallback(
    <T = unknown>(type: string, payload?: unknown, timeoutMs = 5000): Promise<T> => {
      const web = ref.current;
      if (!web) return Promise.reject(new Error("webview-not-ready"));
 
      const id = `${Date.now()}-${seq.current++}`;
      const envelope: BridgeEnvelope = { v: 1, id, kind: "request", type, payload };
 
      return new Promise<T>((resolve, reject) => {
        const timer = setTimeout(() => {
          pending.current.delete(id);
          reject(new Error(`bridge-timeout: ${type}`));
        }, timeoutMs);
 
        pending.current.set(id, { resolve: resolve as (v: unknown) => void, reject, timer });
        // JSON を JSON にくるみ、Web 側の受信口へ渡す
        web.injectJavaScript(
          `window.__bridgeReceive(${JSON.stringify(JSON.stringify(envelope))});true;`
        );
      });
    },
    []
  );
 
  const onMessage = useCallback((e: WebViewMessageEvent) => {
    // オリジン検証：想定した URL からのメッセージだけ受ける
    if (e.nativeEvent.url && !e.nativeEvent.url.startsWith(allowedOrigin)) return;
 
    let env: BridgeEnvelope;
    try {
      env = JSON.parse(e.nativeEvent.data);
    } catch {
      return; // 壊れた文字列は無視
    }
    if (env.v !== 1 || !ALLOWED_TYPES.includes(env.type as never)) return;
 
    const p = pending.current.get(env.id);
    if (!p) return; // 対応する要求が無い＝タイムアウト済み等
    clearTimeout(p.timer);
    pending.current.delete(env.id);
 
    if (env.kind === "error") {
      p.reject(new Error(env.error?.message ?? "bridge-error"));
    } else {
      p.resolve(env.payload);
    }
  }, [allowedOrigin]);
 
  // アンマウント時に宙に浮いた要求を全て片付ける
  useEffect(() => {
    const map = pending.current;
    return () => {
      map.forEach((p) => {
        clearTimeout(p.timer);
        p.reject(new Error("bridge-unmounted"));
      });
      map.clear();
    };
  }, []);
 
  return useMemo(() => ({ ref, call, onMessage }), [call, onMessage]);
}

<!-- WebView 内の HTML に読み込む bridge-web.js -->
<script>
(function () {
  const handlers = {
    "editor.getContent": async () => ({ markdown: window.editor.getValue() }),
    "editor.setContent": async (p) => { window.editor.setValue(p.markdown); return { ok: true }; },
    "editor.isDirty": async () => ({ dirty: window.editor.isDirty() }),
  };
 
  function send(env) {
    window.ReactNativeWebView.postMessage(JSON.stringify(env));
  }
 
  window.__bridgeReceive = async function (raw) {
    let req;
    try { req = JSON.parse(raw); } catch { return; }
    if (req.v !== 1 || req.kind !== "request") return;
 
    const handler = handlers[req.type];
    if (!handler) {
      send({ v: 1, id: req.id, kind: "error", type: req.type,
             error: { code: "unknown_type", message: req.type } });
      return;
    }
    try {
      const payload = await handler(req.payload);
      send({ v: 1, id: req.id, kind: "response", type: req.type, payload });
    } catch (err) {
      send({ v: 1, id: req.id, kind: "error", type: req.type,
             error: { code: "handler_failed", message: String(err && err.message || err) } });
    }
  };
})();
</script>

const bridge = useWebViewBridge(EDITOR_ORIGIN);
 
async function handleSave() {
  try {
    const { markdown } = await bridge.call<{ markdown: string }>("editor.getContent");
    await saveToBackend(markdown);   // ここまで来て初めて保存完了
    showToast("保存しました");
  } catch (e) {
    // timeout / unmounted / handler_failed が全てここに集まる
    showToast("保存できませんでした。もう一度お試しください");
  }
}