通知をタップしたのに目的の画面に飛ばない——Rorkアプリのルーティングを起動状態ごとに設計する

// lib/notificationRouting.ts
type PendingTarget = { type: string; id: string };
 
let pending: PendingTarget | null = null;
const handledIds = new Set<string>();
 
export function setPending(target: PendingTarget) {
  pending = target;
}
 
export function consumePending(): PendingTarget | null {
  const t = pending;
  pending = null;
  return t;
}
 
// 同じタップを killed 経路とリスナー経路で二重処理しないための番兵
export function markHandled(notificationId: string): boolean {
  if (handledIds.has(notificationId)) return false;
  handledIds.add(notificationId);
  return true;
}

// app/_layout.tsx の中で使うフック
import { useEffect } from 'react';
import { router, useRootNavigationState } from 'expo-router';
import * as Notifications from 'expo-notifications';
import { setPending, consumePending, markHandled } from '../lib/notificationRouting';
import { resolveRoute } from '../lib/resolveRoute';
 
export function useNotificationRouting() {
  const navState = useRootNavigationState();
 
  // 1) コールドスタート時に一度だけ「最後のレスポンス」を預かる
  useEffect(() => {
    let mounted = true;
    Notifications.getLastNotificationResponseAsync().then((response) => {
      if (!mounted || !response) return;
      const id = response.notification.request.identifier;
      if (!markHandled(id)) return;
      const data = response.notification.request.content.data as any;
      if (data?.type && data?.id) setPending({ type: data.type, id: String(data.id) });
    });
    return () => { mounted = false; };
  }, []);
 
  // 2) 起動中のタップはリスナーで預かる
  useEffect(() => {
    const sub = Notifications.addNotificationResponseReceivedListener((response) => {
      const id = response.notification.request.identifier;
      if (!markHandled(id)) return;
      const data = response.notification.request.content.data as any;
      if (data?.type && data?.id) setPending({ type: data.type, id: String(data.id) });
    });
    return () => sub.remove();
  }, []);
 
  // 3) ナビゲーターが準備できたら、預かったものを消化する
  useEffect(() => {
    if (!navState?.key) return; // まだ準備できていない
    const target = consumePending();
    if (!target) return;
    const path = resolveRoute(target.type, target.id);
    router.push(path);
  }, [navState?.key]);
}

// lib/resolveRoute.ts
import type { Href } from 'expo-router';
 
const FALLBACK: Href = '/';
 
export function resolveRoute(type: string, id: string): Href {
  // id の形も検証する（想定外の文字列を弾く）
  const safeId = /^[A-Za-z0-9_-]{1,40}$/.test(id) ? id : null;
  if (!safeId) return FALLBACK;
 
  switch (type) {
    case 'order':
      return `/order/${safeId}`;
    case 'message':
      return `/messages/${safeId}`;
    case 'promo':
      return '/promotions';
    default:
      return FALLBACK; // 知らない type は安全に握りつぶす
  }
}

Notifications.setNotificationHandler({
  handleNotification: async () => ({
    shouldShowBanner: true,
    shouldShowList: true,
    shouldPlaySound: false,
    shouldSetBadge: true,
  }),
});