From 169b6b5a6d693a923d7889ce90c3aca9d3c2703b Mon Sep 17 00:00:00 2001
From: kuu13580 <13580kuu@gmail.com>
Date: Thu, 30 Jul 2026 19:05:38 +0000
Subject: [PATCH 1/9] =?UTF-8?q?feat(#207):=20SW=20notificationclick=20?=
 =?UTF-8?q?=E3=81=A7=20trip=20/=20block=20=E3=81=B8=20deep=20link=20?=
 =?UTF-8?q?=E9=81=B7=E7=A7=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

通知タップ時の挙動を Firebase デフォルトから明示ハンドラに置き換え、既存
PWA/tab を単一 tab のまま該当 block まで scroll できるようにする。

- SW: notificationclick で clients.matchAll → focused > visible > 任意
  の優先度で client を選び、postMessage で SPA navigate。無ければ
  clients.openWindow。別 origin URL は payload 経路含め弾く
- client 側: useFcmNavigationListener が SW message を受け React Router
  で navigate。WindowClient.navigate() のフルリロードを避けて atom /
  SWR / scroll 位置を保持
- useFocusBlockOnMount: ?focusBlock={id} を useBlock で解決 → pageId
  切替 → data-block-id の DOM を rAF 待機して scrollIntoView (center)
  → replaceState で query 除去。404 / 非数値ゴミは黙って掃除
- useBlocks: list fetch 時に個別 key を populate し useBlock の重複
  fetch を回避 (楽観更新値がある場合は skip して巻き戻し防止)
- View block 2 種に data-block-id を付与 (edit モードは対象外)
---
 frontend/public/firebase-messaging-sw.js      | 56 +++++++++++++
 frontend/src/App.tsx                          |  2 +
 .../blocks/view/BlockScheduleView.tsx         |  1 +
 .../blocks/view/BlockTransportationView.tsx   |  1 +
 frontend/src/hooks/useBlocks.ts               | 13 ++-
 .../src/hooks/useFcmNavigationListener.ts     | 40 +++++++++
 frontend/src/hooks/useFocusBlockOnMount.ts    | 84 +++++++++++++++++++
 frontend/src/pages/TripPage.tsx               |  2 +
 8 files changed, 198 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/hooks/useFcmNavigationListener.ts
 create mode 100644 frontend/src/hooks/useFocusBlockOnMount.ts

diff --git a/frontend/public/firebase-messaging-sw.js b/frontend/public/firebase-messaging-sw.js
index 21174839..58492481 100644
--- a/frontend/public/firebase-messaging-sw.js
+++ b/frontend/public/firebase-messaging-sw.js
@@ -1,6 +1,62 @@
 // biome-ignore-all lint/correctness/noUndeclaredVariables: firebase / importScripts は SW context の global
 // biome-ignore-all lint/correctness/noUnusedFunctionParameters: onBackgroundMessage の signature は Firebase 規定
 
+// notificationclick handler は Firebase SDK の import / init より前に登録する必要がある。
+// Firebase Messaging SDK は内部で notificationclick リスナーを付け stopImmediatePropagation
+// することがあり、後付けで addEventListener すると invocation されないケースがある。
+// (`firebase-js-sdk/packages/messaging/src/listeners/sw-listeners.ts` の実装参照)
+
+// Firebase Admin SDK の WebpushFCMOptions.link は data.FCM_MSG.fcmOptions.link に入る。
+// フォアグラウンド通知 (useForegroundNotificationToast) の自前 showNotification 経由は data.link。
+const extractDeepLink = notification => {
+  const data = notification?.data ?? {};
+  return data?.FCM_MSG?.fcmOptions?.link ?? data?.link ?? null;
+};
+
+// PWA / ブラウザ tab 両方 push 登録している端末で、ユーザが今触ってる方を選ぶための優先度。
+const pickTargetClient = clientsList => {
+  return (
+    clientsList.find(c => c.focused) ?? clientsList.find(c => c.visibilityState === 'visible') ?? clientsList[0] ?? null
+  );
+};
+
+self.addEventListener('notificationclick', event => {
+  event.notification.close();
+
+  const link = extractDeepLink(event.notification);
+  if (!link) return;
+
+  // payload 経路経由の open-redirect を防ぐ (別 origin URL は捨てる)。
+  let targetUrl;
+  try {
+    targetUrl = new URL(link, self.location.origin);
+  } catch {
+    return;
+  }
+  if (targetUrl.origin !== self.location.origin) return;
+
+  event.waitUntil(
+    (async () => {
+      const clientsList = await self.clients.matchAll({ type: 'window', includeUncontrolled: true });
+      const target = pickTargetClient(clientsList);
+
+      if (target) {
+        // WindowClient.navigate() を使うとフルリロードで atom / SWR / scroll 位置が飛ぶので、
+        // 代わりに client 側で React Router の navigate を呼んでもらう。
+        target.postMessage({ type: 'FCM_NAVIGATE', url: targetUrl.href });
+        try {
+          await target.focus();
+        } catch {
+          // focus はユーザ操作起源でないと reject されるが、postMessage は届いてるので許容
+        }
+        return;
+      }
+
+      await self.clients.openWindow(targetUrl.href);
+    })()
+  );
+});
+
 importScripts('https://www.gstatic.com/firebasejs/12.16.0/firebase-app-compat.js');
 importScripts('https://www.gstatic.com/firebasejs/12.16.0/firebase-messaging-compat.js');
 
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index b93d72e7..932faece 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -3,6 +3,7 @@ import { Route, Routes } from 'react-router-dom';
 import { isOfflineReadAtom } from './atoms/network';
 import { NoIndex } from './components/NoIndex';
 import { Title } from './components/Title';
+import { useFcmNavigationListener } from './hooks/useFcmNavigationListener';
 import { useForegroundNotificationToast } from './hooks/useForegroundNotificationToast';
 import { useNetworkToast } from './hooks/useNetworkToast';
 import { usePageTracking } from './hooks/usePageTracking';
@@ -19,6 +20,7 @@ const App = () => {
   useNetworkToast();
   usePageTracking();
   useForegroundNotificationToast();
+  useFcmNavigationListener();
 
   return (
     <>
diff --git a/frontend/src/components/blocks/view/BlockScheduleView.tsx b/frontend/src/components/blocks/view/BlockScheduleView.tsx
index 061858c9..1153a842 100644
--- a/frontend/src/components/blocks/view/BlockScheduleView.tsx
+++ b/frontend/src/components/blocks/view/BlockScheduleView.tsx
@@ -55,6 +55,7 @@ export function BlockScheduleView({ block, isNow, className }: BlockScheduleView
   return (
     <div
       ref={resizeRef}
+      data-block-id={block.id}
       className={cn(
         'relative flex w-full flex-col gap-2 rounded-lg bg-linear-to-r from-teal-400 px-4 py-2',
         isHovered ? 'to-teal-400' : 'to-teal-500',
diff --git a/frontend/src/components/blocks/view/BlockTransportationView.tsx b/frontend/src/components/blocks/view/BlockTransportationView.tsx
index e52e9e5c..ba839ee9 100644
--- a/frontend/src/components/blocks/view/BlockTransportationView.tsx
+++ b/frontend/src/components/blocks/view/BlockTransportationView.tsx
@@ -45,6 +45,7 @@ export function BlockTransportationView({ block, isNow, className }: BlockTransp
   return (
     <div
       ref={resizeRef}
+      data-block-id={block.id}
       className={cn(
         'relative flex w-full flex-col gap-2 rounded-lg bg-gradient-to-r from-sky-50 px-2 py-2 sm:px-4',
         isHovered ? 'to-sky-50' : 'to-sky-100',
diff --git a/frontend/src/hooks/useBlocks.ts b/frontend/src/hooks/useBlocks.ts
index c3003d07..7af384f0 100644
--- a/frontend/src/hooks/useBlocks.ts
+++ b/frontend/src/hooks/useBlocks.ts
@@ -14,11 +14,22 @@ const BLOCKS_BASE_PATH = '/blocks';
  * pageId に紐づく Block をすべて取得するフック
  */
 export const useBlocks = (pageId: number | null, options?: Pick<SWRConfiguration, 'refreshInterval'>) => {
+  const { mutate: globalMutate, cache } = useSWRConfig();
   const { data, error, isLoading } = useSWR<Block[]>(
     pageId ? `${PAGES_BASE_PATH}/${pageId}/blocks` : null,
     async (url: string) => {
       const res = await fetcher(url);
-      return z.array(blockFromApi).parse(res);
+      const parsed = z.array(blockFromApi).parse(res);
+      // list fetch で得た block を個別 key にも撒いて useBlock(id) の重複 fetch を避ける
+      // (通知タップの deep link 解決経路で効く)。ただし既存値は上書きしない:
+      // 楽観更新中の値を list revalidation の古いサーバ値で巻き戻すのを防ぐため。
+      for (const block of parsed) {
+        const individualKey = `${BLOCKS_BASE_PATH}/${block.id}`;
+        if (cache.get(individualKey)?.data === undefined) {
+          globalMutate(individualKey, block, { revalidate: false });
+        }
+      }
+      return parsed;
     },
     options
   );
diff --git a/frontend/src/hooks/useFcmNavigationListener.ts b/frontend/src/hooks/useFcmNavigationListener.ts
new file mode 100644
index 00000000..d9b77f5d
--- /dev/null
+++ b/frontend/src/hooks/useFcmNavigationListener.ts
@@ -0,0 +1,40 @@
+import { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+/**
+ * firebase-messaging-sw.js の notificationclick が postMessage する
+ * `{ type: 'FCM_NAVIGATE', url }` を受けて React Router で navigate する。
+ * App.tsx で 1 回のみ呼ぶ (Router の内側必須)。
+ */
+export const useFcmNavigationListener = () => {
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    // 参照を effect スコープに固定: cleanup 時に navigator.serviceWorker が消えていても
+    // (テスト環境で差し替えると起こる) removeEventListener で crash させない。
+    const sw = typeof navigator !== 'undefined' ? navigator.serviceWorker : undefined;
+    if (!sw) return;
+
+    const handler = (event: MessageEvent) => {
+      if (event.data?.type !== 'FCM_NAVIGATE') return;
+      const rawUrl = event.data.url;
+      if (typeof rawUrl !== 'string') return;
+
+      let parsed: URL;
+      try {
+        parsed = new URL(rawUrl, window.location.origin);
+      } catch {
+        return;
+      }
+      // SW 側でも弾いているが、payload 経路の open-redirect 対策として二重防御。
+      if (parsed.origin !== window.location.origin) return;
+
+      navigate(`${parsed.pathname}${parsed.search}${parsed.hash}`);
+    };
+
+    sw.addEventListener('message', handler);
+    return () => {
+      sw.removeEventListener('message', handler);
+    };
+  }, [navigate]);
+};
diff --git a/frontend/src/hooks/useFocusBlockOnMount.ts b/frontend/src/hooks/useFocusBlockOnMount.ts
new file mode 100644
index 00000000..afc16b44
--- /dev/null
+++ b/frontend/src/hooks/useFocusBlockOnMount.ts
@@ -0,0 +1,84 @@
+import { useSetAtom } from 'jotai';
+import { useEffect, useRef } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { selectedPageIdAtom } from '@/atoms/tripPage';
+import { useBlock } from '@/hooks/useBlocks';
+
+/**
+ * `?focusBlock={id}` を消費して該当 block まで scroll する。
+ *
+ * block が 404 (通知送信 → タップ間で削除) や非数値ゴミの場合は黙って query param 掃除だけ行う。
+ * urlId は URL path で保持されているので trip 画面自体は通常表示される。
+ */
+
+const FOCUS_BLOCK_PARAM = 'focusBlock';
+const SCROLL_WAIT_MAX_MS = 3000;
+
+const waitForBlockElement = (blockId: number, maxMs: number, isCancelled: () => boolean): Promise<HTMLElement | null> =>
+  new Promise(resolve => {
+    const selector = `[data-block-id="${blockId}"]`;
+    const start = performance.now();
+    const tick = () => {
+      if (isCancelled()) return resolve(null);
+      const el = document.querySelector<HTMLElement>(selector);
+      if (el) return resolve(el);
+      if (performance.now() - start > maxMs) return resolve(null);
+      requestAnimationFrame(tick);
+    };
+    tick();
+  });
+
+export const useFocusBlockOnMount = () => {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const rawFocusBlock = searchParams.get(FOCUS_BLOCK_PARAM);
+  const focusBlockId = rawFocusBlock != null && /^\d+$/.test(rawFocusBlock) ? Number(rawFocusBlock) : null;
+  const hasInvalidParam = rawFocusBlock != null && focusBlockId == null;
+
+  const setSelectedPageId = useSetAtom(selectedPageIdAtom);
+  const { block, error } = useBlock(focusBlockId);
+  // TripPage は unmount せず SPA navigate で URL だけ差し替わるため、boolean 一度きりゲートだと
+  // 通知連続タップ (42 → 99) の 2 回目が無視される。値ゲートにして rawFocusBlock が変わったら再処理する。
+  const consumedKeyRef = useRef<string | null>(null);
+
+  useEffect(() => {
+    if (consumedKeyRef.current === rawFocusBlock) return;
+
+    const clearParam = () =>
+      setSearchParams(
+        prev => {
+          const next = new URLSearchParams(prev);
+          next.delete(FOCUS_BLOCK_PARAM);
+          return next;
+        },
+        { replace: true }
+      );
+
+    if (hasInvalidParam) {
+      consumedKeyRef.current = rawFocusBlock;
+      clearParam();
+      return;
+    }
+    if (focusBlockId == null) return;
+    if (error) {
+      consumedKeyRef.current = rawFocusBlock;
+      clearParam();
+      return;
+    }
+    if (!block) return;
+
+    consumedKeyRef.current = rawFocusBlock;
+    setSelectedPageId(block.pageId);
+
+    let cancelled = false;
+    (async () => {
+      const el = await waitForBlockElement(focusBlockId, SCROLL_WAIT_MAX_MS, () => cancelled);
+      if (cancelled) return;
+      el?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+      clearParam();
+    })();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [rawFocusBlock, focusBlockId, hasInvalidParam, block, error, setSelectedPageId, setSearchParams]);
+};
diff --git a/frontend/src/pages/TripPage.tsx b/frontend/src/pages/TripPage.tsx
index 6b3c4c19..c9d0397f 100644
--- a/frontend/src/pages/TripPage.tsx
+++ b/frontend/src/pages/TripPage.tsx
@@ -14,6 +14,7 @@ import { TimelineSkeleton } from '@/components/timeline';
 import { Button } from '@/components/ui/button';
 import { useActivePage } from '@/hooks/useActivePage';
 import { useDragAutoScroll } from '@/hooks/useDragAutoScroll';
+import { useFocusBlockOnMount } from '@/hooks/useFocusBlockOnMount';
 import { usePages } from '@/hooks/usePages';
 import { useTripByUrlId } from '@/hooks/useTrips';
 import { useVisitedTrips } from '@/hooks/useVisitedTrips';
@@ -44,6 +45,7 @@ const TripPage = () => {
   const { pages, error: pagesError, isLoading: isPagesLoading } = usePages(trip?.id ?? null, { refreshInterval });
   const { addVisitedTrip } = useVisitedTrips();
   const { storedPageId, isActivePageInitialized, saveActivePageId } = useActivePage(trip?.id ?? null);
+  useFocusBlockOnMount();
 
   const isLoading = isTripLoading || isPagesLoading || !minLoadingComplete;
   const isError = tripError || pagesError;

From 0226aeb61686e7bd36eaae8abc57d8b4872358e6 Mon Sep 17 00:00:00 2001
From: kuu13580 <13580kuu@gmail.com>
Date: Thu, 30 Jul 2026 19:05:48 +0000
Subject: [PATCH 2/9] =?UTF-8?q?test(#207):=20deep=20link=20=E7=B3=BB=20hoo?=
 =?UTF-8?q?k=20=E3=81=AE=20unit=20test=20=E3=82=92=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- useFcmNavigationListener: FCM_NAVIGATE 受信で navigate 呼び出し / 別
  origin & 非 http scheme & 型不正 payload の無視 / unmount cleanup /
  serviceWorker 未定義環境
- useFocusBlockOnMount: block ロード成功で selectedPageId 切替 +
  scrollIntoView + query 除去 / 404 → query 除去のみ / 非数値 → API
  も叩かず query 除去 / focusBlock 無 → no-op
---
 .../hooks/useFcmNavigationListener.test.tsx   | 110 ++++++++++
 .../src/hooks/useFocusBlockOnMount.test.tsx   | 196 ++++++++++++++++++
 2 files changed, 306 insertions(+)
 create mode 100644 frontend/src/hooks/useFcmNavigationListener.test.tsx
 create mode 100644 frontend/src/hooks/useFocusBlockOnMount.test.tsx

diff --git a/frontend/src/hooks/useFcmNavigationListener.test.tsx b/frontend/src/hooks/useFcmNavigationListener.test.tsx
new file mode 100644
index 00000000..01465b07
--- /dev/null
+++ b/frontend/src/hooks/useFcmNavigationListener.test.tsx
@@ -0,0 +1,110 @@
+import { renderHook } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+const mockNavigate = vi.fn();
+vi.mock('react-router-dom', () => ({
+  useNavigate: () => mockNavigate,
+}));
+
+import { useFcmNavigationListener } from '@/hooks/useFcmNavigationListener';
+
+type SwEventListener = (event: MessageEvent) => void;
+
+const swListeners = new Set<SwEventListener>();
+
+const swStub = {
+  addEventListener: (type: string, listener: SwEventListener) => {
+    if (type === 'message') swListeners.add(listener);
+  },
+  removeEventListener: (type: string, listener: SwEventListener) => {
+    if (type === 'message') swListeners.delete(listener);
+  },
+};
+
+const dispatchSwMessage = (data: unknown) => {
+  const event = { data } as MessageEvent;
+  for (const listener of swListeners) listener(event);
+};
+
+describe('useFcmNavigationListener', () => {
+  beforeEach(() => {
+    swListeners.clear();
+    mockNavigate.mockClear();
+    Object.defineProperty(navigator, 'serviceWorker', {
+      configurable: true,
+      value: swStub,
+    });
+  });
+
+  afterEach(() => {
+    Object.defineProperty(navigator, 'serviceWorker', {
+      configurable: true,
+      value: undefined,
+    });
+  });
+
+  it('FCM_NAVIGATE メッセージ受信で navigate() を pathname+search+hash 付きで呼ぶ', () => {
+    renderHook(() => useFcmNavigationListener());
+
+    dispatchSwMessage({ type: 'FCM_NAVIGATE', url: 'http://localhost:3000/trip/abc?focusBlock=42#top' });
+
+    expect(mockNavigate).toHaveBeenCalledExactlyOnceWith('/trip/abc?focusBlock=42#top');
+  });
+
+  it('FCM_NAVIGATE 以外のメッセージは無視する', () => {
+    renderHook(() => useFcmNavigationListener());
+
+    dispatchSwMessage({ type: 'SOME_OTHER', url: 'http://localhost:3000/trip/xxx' });
+
+    expect(mockNavigate).not.toHaveBeenCalled();
+  });
+
+  it('別 origin の URL は無視する (open-redirect 対策)', () => {
+    renderHook(() => useFcmNavigationListener());
+
+    dispatchSwMessage({ type: 'FCM_NAVIGATE', url: 'https://evil.example.com/trip/abc' });
+
+    expect(mockNavigate).not.toHaveBeenCalled();
+  });
+
+  it('非 http scheme (javascript:) は同 origin にならず遷移しない', () => {
+    renderHook(() => useFcmNavigationListener());
+
+    dispatchSwMessage({ type: 'FCM_NAVIGATE', url: 'javascript:alert(1)' });
+
+    expect(mockNavigate).not.toHaveBeenCalled();
+  });
+
+  it('url が string でなければ無視する', () => {
+    renderHook(() => useFcmNavigationListener());
+
+    dispatchSwMessage({ type: 'FCM_NAVIGATE', url: 42 });
+
+    expect(mockNavigate).not.toHaveBeenCalled();
+  });
+
+  it('data が undefined でも throw しない', () => {
+    renderHook(() => useFcmNavigationListener());
+
+    expect(() => dispatchSwMessage(undefined)).not.toThrow();
+    expect(mockNavigate).not.toHaveBeenCalled();
+  });
+
+  it('unmount 時に listener を解除する', () => {
+    const { unmount } = renderHook(() => useFcmNavigationListener());
+
+    expect(swListeners.size).toBe(1);
+    unmount();
+    expect(swListeners.size).toBe(0);
+  });
+
+  it('navigator.serviceWorker が無い環境では何もしない', () => {
+    Object.defineProperty(navigator, 'serviceWorker', {
+      configurable: true,
+      value: undefined,
+    });
+
+    expect(() => renderHook(() => useFcmNavigationListener())).not.toThrow();
+    expect(swListeners.size).toBe(0);
+  });
+});
diff --git a/frontend/src/hooks/useFocusBlockOnMount.test.tsx b/frontend/src/hooks/useFocusBlockOnMount.test.tsx
new file mode 100644
index 00000000..793117a8
--- /dev/null
+++ b/frontend/src/hooks/useFocusBlockOnMount.test.tsx
@@ -0,0 +1,196 @@
+import { act, render, waitFor } from '@testing-library/react';
+import { Provider as JotaiProvider } from 'jotai';
+import { HttpResponse, http } from 'msw';
+import type { ReactNode } from 'react';
+import { BrowserRouter, MemoryRouter, Route, Routes, useLocation, useNavigate } from 'react-router-dom';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { selectedPageIdAtom } from '@/atoms/tripPage';
+import { useFocusBlockOnMount } from '@/hooks/useFocusBlockOnMount';
+import { appStore } from '@/lib/store';
+import { server } from '../../tests/msw/server';
+
+// jsdom は scrollIntoView を提供しないので prototype に stub を生やす
+const scrollIntoViewMock = vi.fn();
+Element.prototype.scrollIntoView = scrollIntoViewMock as unknown as Element['scrollIntoView'];
+
+const scheduleBlockJson = (id: number, pageId: number) => ({
+  id,
+  page_id: pageId,
+  block_type: 'event' as const,
+  title: 'schedule block',
+  start_time: '2026-01-01T09:00:00',
+  end_time: '2026-01-01T10:00:00',
+  detail: null,
+  location_id: null,
+  location: null,
+});
+
+const LocationCapture = ({ onLocation }: { onLocation: (search: string) => void }) => {
+  const location = useLocation();
+  onLocation(location.search);
+  return null;
+};
+
+const HookHost = () => {
+  useFocusBlockOnMount();
+  return <div data-block-id='42'>target</div>;
+};
+
+const renderWithRouter = (initialPath: string, onLocation: (search: string) => void) => {
+  const Wrapper = ({ children }: { children: ReactNode }) => (
+    <JotaiProvider store={appStore}>
+      <MemoryRouter initialEntries={[initialPath]}>
+        <LocationCapture onLocation={onLocation} />
+        <Routes>
+          <Route path='*' element={children} />
+        </Routes>
+      </MemoryRouter>
+    </JotaiProvider>
+  );
+  return render(<HookHost />, { wrapper: Wrapper });
+};
+
+describe('useFocusBlockOnMount', () => {
+  beforeEach(() => {
+    appStore.set(selectedPageIdAtom, undefined);
+    scrollIntoViewMock.mockReset();
+  });
+
+  it('?focusBlock が無ければ何もしない', async () => {
+    let currentSearch = '';
+    renderWithRouter('/trip/abc', s => {
+      currentSearch = s;
+    });
+
+    // マウント直後に副作用が完了する
+    await waitFor(() => {
+      expect(currentSearch).toBe('');
+    });
+    expect(scrollIntoViewMock).not.toHaveBeenCalled();
+    expect(appStore.get(selectedPageIdAtom)).toBeUndefined();
+  });
+
+  it('非数値の focusBlock は block fetch せず query param のみ掃除する', async () => {
+    let apiCalled = false;
+    server.use(
+      http.get('*/blocks/*', () => {
+        apiCalled = true;
+        return HttpResponse.json({});
+      })
+    );
+
+    let currentSearch = 'initial';
+    renderWithRouter('/trip/abc?focusBlock=abc', s => {
+      currentSearch = s;
+    });
+
+    await waitFor(() => {
+      expect(currentSearch).toBe('');
+    });
+    expect(apiCalled).toBe(false);
+    expect(scrollIntoViewMock).not.toHaveBeenCalled();
+    expect(appStore.get(selectedPageIdAtom)).toBeUndefined();
+  });
+
+  it('block ロード成功時に selectedPageId 切り替え + scrollIntoView + query param 掃除を行う', async () => {
+    server.use(http.get('*/blocks/42', () => HttpResponse.json(scheduleBlockJson(42, 7))));
+
+    let currentSearch = 'initial';
+    renderWithRouter('/trip/abc?focusBlock=42', s => {
+      currentSearch = s;
+    });
+
+    await waitFor(() => {
+      expect(appStore.get(selectedPageIdAtom)).toBe(7);
+    });
+    await waitFor(() => {
+      expect(scrollIntoViewMock).toHaveBeenCalledWith({ behavior: 'smooth', block: 'center' });
+    });
+    await waitFor(() => {
+      expect(currentSearch).toBe('');
+    });
+  });
+
+  it('block が 404 の場合は selectedPageId を変えず query param のみ掃除する', async () => {
+    server.use(http.get('*/blocks/999', () => new HttpResponse(null, { status: 404 })));
+
+    let currentSearch = 'initial';
+    renderWithRouter('/trip/abc?focusBlock=999', s => {
+      currentSearch = s;
+    });
+
+    await waitFor(() => {
+      expect(currentSearch).toBe('');
+    });
+    expect(scrollIntoViewMock).not.toHaveBeenCalled();
+    expect(appStore.get(selectedPageIdAtom)).toBeUndefined();
+  });
+
+  it('同一マウント中に focusBlock が 42→99 と変わったら 2 回目も再処理する', async () => {
+    server.use(
+      http.get('*/blocks/42', () => HttpResponse.json(scheduleBlockJson(42, 7))),
+      http.get('*/blocks/99', () => HttpResponse.json(scheduleBlockJson(99, 11)))
+    );
+
+    // SW → postMessage → useFcmNavigationListener の navigate() で同一マウント中に
+    // URL の focusBlock が差し替わるフローを再現するため、テスト内で navigate を外に取り出す。
+    const navigateHandle: { current: ((to: string) => void) | null } = { current: null };
+    const NavigateHandle = () => {
+      navigateHandle.current = useNavigate();
+      return null;
+    };
+
+    const searchRef = { current: '' };
+    const captureSearch = (s: string) => {
+      searchRef.current = s;
+    };
+
+    // 初期 URL を含めて BrowserRouter に載せる (window.history 経由で navigate 可能)
+    window.history.replaceState({}, '', '/trip/abc?focusBlock=42');
+
+    const Wrapper = ({ children }: { children: ReactNode }) => (
+      <JotaiProvider store={appStore}>
+        <BrowserRouter>
+          <NavigateHandle />
+          <LocationCapture onLocation={captureSearch} />
+          <Routes>
+            <Route path='*' element={children} />
+          </Routes>
+        </BrowserRouter>
+      </JotaiProvider>
+    );
+
+    render(
+      <>
+        <HookHost />
+        <div data-block-id='99'>target-99</div>
+      </>,
+      { wrapper: Wrapper }
+    );
+
+    // 1 回目: focusBlock=42 の処理完了を待つ
+    await waitFor(() => {
+      expect(appStore.get(selectedPageIdAtom)).toBe(7);
+    });
+    await waitFor(() => {
+      expect(searchRef.current).toBe('');
+    });
+    expect(scrollIntoViewMock).toHaveBeenCalledTimes(1);
+
+    // 2 回目: SPA navigate で URL に別の focusBlock を差し込む
+    scrollIntoViewMock.mockClear();
+    act(() => {
+      navigateHandle.current?.('/trip/abc?focusBlock=99');
+    });
+
+    await waitFor(() => {
+      expect(appStore.get(selectedPageIdAtom)).toBe(11);
+    });
+    await waitFor(() => {
+      expect(scrollIntoViewMock).toHaveBeenCalledWith({ behavior: 'smooth', block: 'center' });
+    });
+    await waitFor(() => {
+      expect(searchRef.current).toBe('');
+    });
+  });
+});

From c22d5ce1544ab805d931a37408feec6192d780fd Mon Sep 17 00:00:00 2001
From: kuu13580 <13580kuu@gmail.com>
Date: Thu, 30 Jul 2026 19:05:55 +0000
Subject: [PATCH 3/9] =?UTF-8?q?docs(#207):=20=E9=80=9A=E7=9F=A5=E3=83=89?=
 =?UTF-8?q?=E3=82=AD=E3=83=A5=E3=83=A1=E3=83=B3=E3=83=88=E3=81=AB=20deep?=
 =?UTF-8?q?=20link=20=E5=AE=9F=E8=A3=85=E3=82=92=E5=8F=8D=E6=98=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- docs/notifications.md: §5 Deep link を実装済み記述に更新 (SW ハンドラ
  → SPA navigate → useFocusBlockOnMount → scrollIntoView の経路と、
  処理後の replaceState 除去まで明記)
- docs/memo/notification_roadmap.md: P6b を完了へ
---
 docs/memo/notification_roadmap.md | 4 ++--
 docs/notifications.md             | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/memo/notification_roadmap.md b/docs/memo/notification_roadmap.md
index a15a0ff5..42139eb4 100644
--- a/docs/memo/notification_roadmap.md
+++ b/docs/memo/notification_roadmap.md
@@ -53,9 +53,9 @@ graph LR
 - [x] Deep link URL 埋め込み (`?focusBlock={block_id}` を FCM `data.link` に付与)
 - [x] フォアグラウンド OS 通知 (`useForegroundNotificationToast` → `registration.showNotification`)
 
-### Phase 6b-9: 未実装 (別 PR / Follow-up)
+### Phase 6b-9
 
-- [ ] SW `notificationclick` ハンドラ (tap 時に `focusBlock` を消費してブロックまでスクロール)
+- [x] SW `notificationclick` ハンドラ (#207): tap で既存 client に postMessage → SPA navigate、無ければ openWindow。client 側は `useFocusBlockOnMount` で block まで scroll
 - [ ] Phase 7: stg 環境 E2E テスト (iOS/Android/Desktop 実機)
 - [ ] Phase 8: prod リリース + Cloud Scheduler ジョブ作成
 - [ ] Phase 9 (#173): `sent_notifications` 掃除 cron
diff --git a/docs/notifications.md b/docs/notifications.md
index 8248e0c2..da709c43 100644
--- a/docs/notifications.md
+++ b/docs/notifications.md
@@ -196,7 +196,7 @@ tick が 60 秒を超えると次 tick と重なる。閾値と対処:
   - 素材: FA (frontend/src/assets/icons) + Lucide MapPin。オレンジバッジ (`#f4a261`) + 白抜き
 - **Badge** (Android status bar 等の小モノクロアイコン、96px、透過 PNG): `badge.png` を全通知で共通使用。紙飛行機シルエット (favicon 由来)、OS 側でアクセントカラーへリカラーされる。icon と別 URL にしないと Android で四角い塗りになる
 - 生成スクリプト: `scripts/gen_notification_icons.py`
-- **Deep link**: `/trip/{urlId}?focusBlock={blockId}` (該当ブロックにスクロール、Phase 2 で完全実装)
+- **Deep link**: `/trip/{urlId}?focusBlock={blockId}`。SW `notificationclick` (`frontend/public/firebase-messaging-sw.js`) が受け、既存 PWA/tab (focused > visible > 任意) に postMessage で client-side navigate、無ければ `clients.openWindow`。client 側は `useFocusBlockOnMount` で `useBlock(id)` から pageId を得て page 切替 → `[data-block-id]` を rAF 待機して `scrollIntoView` (center)。処理後 `focusBlock` は replaceState で除去。
 
 ## 6. プラットフォーム対応
 

From bc92db093d3ebb6620bad5847a4676d7234911e9 Mon Sep 17 00:00:00 2001
From: kuu13580 <13580kuu@gmail.com>
Date: Sat, 1 Aug 2026 02:51:06 +0000
Subject: [PATCH 4/9] =?UTF-8?q?fix(#207):=20CodeRabbit=202nd=20round=20?=
 =?UTF-8?q?=E6=8C=87=E6=91=98=E5=AF=BE=E5=BF=9C=20(focusBlock=3D0=20?=
 =?UTF-8?q?=E5=BC=BE=E3=81=8D=20+=20=E5=90=8C=E5=80=A4=E5=86=8D=E9=80=9A?=
 =?UTF-8?q?=E7=9F=A5)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- focusBlock を正の safe integer のみ許可する parse に変更。regex を
  /^[1-9]\d*$/ + Number.isSafeInteger + >0 の三重チェックへ。0 が
  通ると useBlock(0) が SWR falsy key で fetch を止め ref も query
  も更新されずスタックしていた
- consumedKeyRef のセットを async の uncancelled 完了後に移動。
  StrictMode dev double-fire で最初の async が cancel された時に
  scroll が発火しなくなる問題を解消
- rawFocusBlock === null (query 掃除後) 時点で ref をリセット。同一
  block の再通知が同一マウント中に来ても再処理できるようにする
- 回帰テスト 2 種追加 (focusBlock=0 / 42 → clearParam → 42 再処理)
---
 .../src/hooks/useFocusBlockOnMount.test.tsx   | 84 +++++++++++++++++++
 frontend/src/hooks/useFocusBlockOnMount.ts    | 24 +++++-
 2 files changed, 104 insertions(+), 4 deletions(-)

diff --git a/frontend/src/hooks/useFocusBlockOnMount.test.tsx b/frontend/src/hooks/useFocusBlockOnMount.test.tsx
index 793117a8..f1510945 100644
--- a/frontend/src/hooks/useFocusBlockOnMount.test.tsx
+++ b/frontend/src/hooks/useFocusBlockOnMount.test.tsx
@@ -193,4 +193,88 @@ describe('useFocusBlockOnMount', () => {
       expect(searchRef.current).toBe('');
     });
   });
+
+  it('focusBlock=0 は block ID として無効なので query 掃除だけ行う', async () => {
+    let apiCalled = false;
+    server.use(
+      http.get('*/blocks/*', () => {
+        apiCalled = true;
+        return HttpResponse.json({});
+      })
+    );
+
+    let currentSearch = 'initial';
+    renderWithRouter('/trip/abc?focusBlock=0', s => {
+      currentSearch = s;
+    });
+
+    await waitFor(() => {
+      expect(currentSearch).toBe('');
+    });
+    expect(apiCalled).toBe(false);
+    expect(scrollIntoViewMock).not.toHaveBeenCalled();
+    expect(appStore.get(selectedPageIdAtom)).toBeUndefined();
+  });
+
+  it('同じ focusBlock=42 が clearParam 後にもう一度来ても再処理する', async () => {
+    server.use(http.get('*/blocks/42', () => HttpResponse.json(scheduleBlockJson(42, 7))));
+
+    const navigateHandle: { current: ((to: string) => void) | null } = { current: null };
+    const NavigateHandle = () => {
+      navigateHandle.current = useNavigate();
+      return null;
+    };
+
+    const searchRef = { current: '' };
+    const captureSearch = (s: string) => {
+      searchRef.current = s;
+    };
+
+    window.history.replaceState({}, '', '/trip/abc?focusBlock=42');
+
+    const Wrapper = ({ children }: { children: ReactNode }) => (
+      <JotaiProvider store={appStore}>
+        <BrowserRouter>
+          <NavigateHandle />
+          <LocationCapture onLocation={captureSearch} />
+          <Routes>
+            <Route path='*' element={children} />
+          </Routes>
+        </BrowserRouter>
+      </JotaiProvider>
+    );
+
+    render(
+      <>
+        <HookHost />
+      </>,
+      { wrapper: Wrapper }
+    );
+
+    // 1 回目: focusBlock=42 の処理完了 (page 切替 + scroll + clearParam) を待つ
+    await waitFor(() => {
+      expect(appStore.get(selectedPageIdAtom)).toBe(7);
+    });
+    await waitFor(() => {
+      expect(searchRef.current).toBe('');
+    });
+    expect(scrollIntoViewMock).toHaveBeenCalledTimes(1);
+
+    // 2 回目: URL が /trip/abc に戻った状態から、同じ block へ再通知タップを再現
+    scrollIntoViewMock.mockClear();
+    appStore.set(selectedPageIdAtom, undefined);
+    act(() => {
+      navigateHandle.current?.('/trip/abc?focusBlock=42');
+    });
+
+    await waitFor(() => {
+      expect(appStore.get(selectedPageIdAtom)).toBe(7);
+    });
+    await waitFor(() => {
+      expect(scrollIntoViewMock).toHaveBeenCalledWith({ behavior: 'smooth', block: 'center' });
+    });
+    await waitFor(() => {
+      expect(searchRef.current).toBe('');
+    });
+  });
 });
diff --git a/frontend/src/hooks/useFocusBlockOnMount.ts b/frontend/src/hooks/useFocusBlockOnMount.ts
index afc16b44..f959dcc1 100644
--- a/frontend/src/hooks/useFocusBlockOnMount.ts
+++ b/frontend/src/hooks/useFocusBlockOnMount.ts
@@ -28,19 +28,35 @@ const waitForBlockElement = (blockId: number, maxMs: number, isCancelled: () =>
     tick();
   });
 
+// block ID は BIGSERIAL PRIMARY KEY (正の整数) のみ有効。"0" / 桁溢れ / 非数値は不正値扱いで
+// query 掃除だけ行う。useBlock(0) が SWR の falsy key で fetch を止めるため、そのまま 0 を渡すと
+// block も error も来ず ref も query も更新されずスタックする。
+const parseFocusBlockId = (raw: string | null): number | null => {
+  if (raw == null || !/^[1-9]\d*$/.test(raw)) return null;
+  const n = Number(raw);
+  return Number.isSafeInteger(n) ? n : null;
+};
+
 export const useFocusBlockOnMount = () => {
   const [searchParams, setSearchParams] = useSearchParams();
   const rawFocusBlock = searchParams.get(FOCUS_BLOCK_PARAM);
-  const focusBlockId = rawFocusBlock != null && /^\d+$/.test(rawFocusBlock) ? Number(rawFocusBlock) : null;
+  const focusBlockId = parseFocusBlockId(rawFocusBlock);
   const hasInvalidParam = rawFocusBlock != null && focusBlockId == null;
 
   const setSelectedPageId = useSetAtom(selectedPageIdAtom);
   const { block, error } = useBlock(focusBlockId);
-  // TripPage は unmount せず SPA navigate で URL だけ差し替わるため、boolean 一度きりゲートだと
-  // 通知連続タップ (42 → 99) の 2 回目が無視される。値ゲートにして rawFocusBlock が変わったら再処理する。
+  // 直前の rawFocusBlock を保持し、値が変わるまで再処理をブロックする。ref なので rerender は起こさない。
+  // - TripPage は SPA navigate で unmount しないので、連続通知 (42 → 99) の 2 回目を処理する
+  // - 消費済み記録は uncancelled 完了後 (async 内) にセット。StrictMode の double-fire で最初の async が
+  //   cancelled になっても 2 度目で確実に完走するため
+  // - query 掃除後 (rawFocusBlock === null) は ref をリセット。同一 block の再通知にも応答するため
   const consumedKeyRef = useRef<string | null>(null);
 
   useEffect(() => {
+    if (rawFocusBlock === null) {
+      consumedKeyRef.current = null;
+      return;
+    }
     if (consumedKeyRef.current === rawFocusBlock) return;
 
     const clearParam = () =>
@@ -66,7 +82,6 @@ export const useFocusBlockOnMount = () => {
     }
     if (!block) return;
 
-    consumedKeyRef.current = rawFocusBlock;
     setSelectedPageId(block.pageId);
 
     let cancelled = false;
@@ -75,6 +90,7 @@ export const useFocusBlockOnMount = () => {
       if (cancelled) return;
       el?.scrollIntoView({ behavior: 'smooth', block: 'center' });
       clearParam();
+      consumedKeyRef.current = rawFocusBlock;
     })();
 
     return () => {

From cf02edafc0e7cdbda0bdd4e6bdae194e7717cba0 Mon Sep 17 00:00:00 2001
From: kuu13580 <13580kuu@gmail.com>
Date: Sat, 1 Aug 2026 03:53:59 +0000
Subject: [PATCH 5/9] =?UTF-8?q?fix(#207):=20=E5=AF=BE=E8=B1=A1=E3=83=96?=
 =?UTF-8?q?=E3=83=AD=E3=83=83=E3=82=AF=E6=8F=8F=E7=94=BB=E3=81=AE=E9=81=85?=
 =?UTF-8?q?=E5=BB=B6=E3=81=A7=20scroll=20=E3=81=8C=E7=99=BA=E7=81=AB?=
 =?UTF-8?q?=E3=81=97=E3=81=AA=E3=81=84=E3=83=AC=E3=83=BC=E3=82=B9=E3=82=92?=
 =?UTF-8?q?=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

useBlock(id) 単発 fetch → selectedPageId 切替の後、対象 page の
useBlocks(pageId) list fetch が終わるまで ViewTripLayout は Skeleton を
返し、data-block-id DOM がまだ存在しない。Cloud Run コールドスタート等で
list fetch が 3 秒を超えると rAF ポーリングが空振りして scroll が
発火しないケースがあった。

- rAF ポーリングを MutationObserver に変更。Skeleton が Timeline に
  差し替わった瞬間に即発火するようになり無駄回転をなくす
- timeout を 3s → 8s に延長 (staging 実測でも 3s 超えるケースを確認)
- 要素発見後に 1 rAF 挟んでから scrollIntoView。Timeline 差し替え直後は
  layout がまだ確定していないタイミングで scroll してもズレることがあった
---
 .../src/hooks/useFocusBlockOnMount.test.tsx   |  8 +++-
 frontend/src/hooks/useFocusBlockOnMount.ts    | 42 ++++++++++++++-----
 2 files changed, 38 insertions(+), 12 deletions(-)

diff --git a/frontend/src/hooks/useFocusBlockOnMount.test.tsx b/frontend/src/hooks/useFocusBlockOnMount.test.tsx
index f1510945..cff6020e 100644
--- a/frontend/src/hooks/useFocusBlockOnMount.test.tsx
+++ b/frontend/src/hooks/useFocusBlockOnMount.test.tsx
@@ -175,7 +175,9 @@ describe('useFocusBlockOnMount', () => {
     await waitFor(() => {
       expect(searchRef.current).toBe('');
     });
-    expect(scrollIntoViewMock).toHaveBeenCalledTimes(1);
+    await waitFor(() => {
+      expect(scrollIntoViewMock).toHaveBeenCalledTimes(1);
+    });
 
     // 2 回目: SPA navigate で URL に別の focusBlock を差し込む
     scrollIntoViewMock.mockClear();
@@ -258,7 +260,9 @@ describe('useFocusBlockOnMount', () => {
     await waitFor(() => {
       expect(searchRef.current).toBe('');
     });
-    expect(scrollIntoViewMock).toHaveBeenCalledTimes(1);
+    await waitFor(() => {
+      expect(scrollIntoViewMock).toHaveBeenCalledTimes(1);
+    });
 
     // 2 回目: URL が /trip/abc に戻った状態から、同じ block へ再通知タップを再現
     scrollIntoViewMock.mockClear();
diff --git a/frontend/src/hooks/useFocusBlockOnMount.ts b/frontend/src/hooks/useFocusBlockOnMount.ts
index f959dcc1..e6be07c1 100644
--- a/frontend/src/hooks/useFocusBlockOnMount.ts
+++ b/frontend/src/hooks/useFocusBlockOnMount.ts
@@ -12,21 +12,43 @@ import { useBlock } from '@/hooks/useBlocks';
  */
 
 const FOCUS_BLOCK_PARAM = 'focusBlock';
-const SCROLL_WAIT_MAX_MS = 3000;
+// 通知タップ → block 描画までに 2 段の非同期がある:
+//   1. useBlock(id) 単発 fetch → block.pageId 判明 → selectedPageId 切替
+//   2. useBlocks(pageId) list fetch 完了 → ViewTripLayout の Skeleton が Timeline に差し替わる
+// (2) が cold start で遅れると DOM に data-block-id が出るのに数秒かかることがある。
+// rAF ポーリングだと 1 フレーム単位で無駄回転するので MutationObserver で DOM 変化を待つ。
+const SCROLL_WAIT_MAX_MS = 8000;
 
 const waitForBlockElement = (blockId: number, maxMs: number, isCancelled: () => boolean): Promise<HTMLElement | null> =>
   new Promise(resolve => {
     const selector = `[data-block-id="${blockId}"]`;
-    const start = performance.now();
-    const tick = () => {
-      if (isCancelled()) return resolve(null);
-      const el = document.querySelector<HTMLElement>(selector);
-      if (el) return resolve(el);
-      if (performance.now() - start > maxMs) return resolve(null);
-      requestAnimationFrame(tick);
+
+    const found = document.querySelector<HTMLElement>(selector);
+    if (found) return resolve(found);
+
+    let timeoutId: ReturnType<typeof setTimeout> | null = null;
+    const finish = (el: HTMLElement | null) => {
+      observer.disconnect();
+      if (timeoutId !== null) clearTimeout(timeoutId);
+      resolve(el);
     };
-    tick();
+
+    const observer = new MutationObserver(() => {
+      if (isCancelled()) return finish(null);
+      const el = document.querySelector<HTMLElement>(selector);
+      if (el) finish(el);
+    });
+    observer.observe(document.body, { childList: true, subtree: true });
+    timeoutId = setTimeout(() => finish(null), maxMs);
+  });
+
+// layout flush を 1 フレーム待ってから scroll する。Timeline が差し替わった直後は要素の
+// 位置計算がまだ確定していないことがあり、そのタイミングで scrollIntoView すると外れる。
+const scrollIntoViewOnNextFrame = (el: HTMLElement) => {
+  requestAnimationFrame(() => {
+    el.scrollIntoView({ behavior: 'smooth', block: 'center' });
   });
+};
 
 // block ID は BIGSERIAL PRIMARY KEY (正の整数) のみ有効。"0" / 桁溢れ / 非数値は不正値扱いで
 // query 掃除だけ行う。useBlock(0) が SWR の falsy key で fetch を止めるため、そのまま 0 を渡すと
@@ -88,7 +110,7 @@ export const useFocusBlockOnMount = () => {
     (async () => {
       const el = await waitForBlockElement(focusBlockId, SCROLL_WAIT_MAX_MS, () => cancelled);
       if (cancelled) return;
-      el?.scrollIntoView({ behavior: 'smooth', block: 'center' });
+      if (el) scrollIntoViewOnNextFrame(el);
       clearParam();
       consumedKeyRef.current = rawFocusBlock;
     })();

From a6638e7808905b650501d9f75e80c0c4303ca739 Mon Sep 17 00:00:00 2001
From: kuu13580 <13580kuu@gmail.com>
Date: Sat, 1 Aug 2026 04:34:00 +0000
Subject: [PATCH 6/9] =?UTF-8?q?fix(#207):=20PWA=20background=20=E2=86=92?=
 =?UTF-8?q?=20=E5=88=A5=20trip=20=E9=80=9A=E7=9F=A5=E3=82=BF=E3=83=83?=
 =?UTF-8?q?=E3=83=97=E3=81=A7=E9=81=B7=E7=A7=BB=E3=81=97=E3=81=AA=E3=81=84?=
 =?UTF-8?q?=E3=82=B1=E3=83=BC=E3=82=B9=E3=82=92=E8=A7=A3=E6=B6=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

現状は SW → client の postMessage 1 本に依存しており、以下 2 パターンで
navigate が発火せず PWA が前面化したまま URL が変わらない事故になる:

- Android で PWA が freeze/kill され、matchAll は phantom client を
  返すが event loop で message が drain されない
- cold start で client 側 message listener 登録より前に SW が
  postMessage を送出

Cache Storage を safety net にして両方救う。

- SW: 通知タップの target URL を Cache に put してから postMessage/
  openWindow へ進む
- Client: useFcmNavigationListener を mount + visibilitychange で
  Cache 内 intent を消化する経路に拡張。fast path (message) と safety
  net (cache) の二重発火を lastNavigatedRef で dedupe
- 現在 URL と一致するときは navigate せず、履歴汚染を避ける
- Cache API 非対応環境 / QuotaExceeded は best effort として無視
---
 frontend/public/firebase-messaging-sw.js      |  22 ++++
 .../hooks/useFcmNavigationListener.test.tsx   |  85 ++++++++++++-
 .../src/hooks/useFcmNavigationListener.ts     | 114 +++++++++++++++---
 3 files changed, 203 insertions(+), 18 deletions(-)

diff --git a/frontend/public/firebase-messaging-sw.js b/frontend/public/firebase-messaging-sw.js
index 58492481..febf14b6 100644
--- a/frontend/public/firebase-messaging-sw.js
+++ b/frontend/public/firebase-messaging-sw.js
@@ -20,6 +20,25 @@ const pickTargetClient = clientsList => {
   );
 };
 
+// postMessage 経路が届かない状況の safety net として target URL を Cache Storage に書き残す。
+// client 側 (useFcmNavigationListener) は mount + visibilitychange のたびに読んで navigate する。
+// 起こりうる postMessage 未着ケース:
+//   - PWA が Android にキルされていて matchAll 上は phantom client、focus() では OS が task を
+//     復帰させるが postMessage は event loop で drain されない
+//   - cold start で client 側 message listener 登録前に SW が postMessage 送出
+const INTENT_CACHE = 'fcm-nav-intent-v1';
+// Cache API は Request URL をキーに使うため、実在しない同 origin URL を予約して衝突を避ける。
+const INTENT_KEY = new URL('/__fcm_pending_nav__', self.location.origin).href;
+
+const storePendingIntent = async url => {
+  try {
+    const cache = await caches.open(INTENT_CACHE);
+    await cache.put(new Request(INTENT_KEY), new Response(url, { headers: { 'content-type': 'text/plain' } }));
+  } catch {
+    // Cache API 非対応 / QuotaExceeded 等は best effort として無視
+  }
+};
+
 self.addEventListener('notificationclick', event => {
   event.notification.close();
 
@@ -37,6 +56,9 @@ self.addEventListener('notificationclick', event => {
 
   event.waitUntil(
     (async () => {
+      // storage 完了を focus/openWindow より前に保証。client 側の visibilitychange で確実に拾える。
+      await storePendingIntent(targetUrl.href);
+
       const clientsList = await self.clients.matchAll({ type: 'window', includeUncontrolled: true });
       const target = pickTargetClient(clientsList);
 
diff --git a/frontend/src/hooks/useFcmNavigationListener.test.tsx b/frontend/src/hooks/useFcmNavigationListener.test.tsx
index 01465b07..a7d6d9e8 100644
--- a/frontend/src/hooks/useFcmNavigationListener.test.tsx
+++ b/frontend/src/hooks/useFcmNavigationListener.test.tsx
@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react';
+import { act, renderHook, waitFor } from '@testing-library/react';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 const mockNavigate = vi.fn();
@@ -26,14 +26,45 @@ const dispatchSwMessage = (data: unknown) => {
   for (const listener of swListeners) listener(event);
 };
 
+// jsdom は Cache API 未実装なのでインメモリスタブを差し込む
+const cacheEntries = new Map<string, string>();
+
+const cacheStub: Cache = {
+  put: async (request: RequestInfo | URL, response: Response) => {
+    const key = typeof request === 'string' ? request : (request as Request).url;
+    cacheEntries.set(key, await response.text());
+  },
+  match: async (request: RequestInfo | URL) => {
+    const key = typeof request === 'string' ? request : (request as Request).url;
+    const value = cacheEntries.get(key);
+    return value === undefined ? undefined : new Response(value);
+  },
+  delete: async (request: RequestInfo | URL) => {
+    const key = typeof request === 'string' ? request : (request as Request).url;
+    return cacheEntries.delete(key);
+  },
+} as unknown as Cache;
+
+const cachesStub: CacheStorage = {
+  open: async () => cacheStub,
+} as unknown as CacheStorage;
+
+const INTENT_KEY = 'http://localhost:3000/__fcm_pending_nav__';
+
+const seedPendingIntent = (url: string) => {
+  cacheEntries.set(INTENT_KEY, url);
+};
+
 describe('useFcmNavigationListener', () => {
   beforeEach(() => {
     swListeners.clear();
+    cacheEntries.clear();
     mockNavigate.mockClear();
     Object.defineProperty(navigator, 'serviceWorker', {
       configurable: true,
       value: swStub,
     });
+    vi.stubGlobal('caches', cachesStub);
   });
 
   afterEach(() => {
@@ -41,6 +72,7 @@ describe('useFcmNavigationListener', () => {
       configurable: true,
       value: undefined,
     });
+    vi.unstubAllGlobals();
   });
 
   it('FCM_NAVIGATE メッセージ受信で navigate() を pathname+search+hash 付きで呼ぶ', () => {
@@ -98,7 +130,7 @@ describe('useFcmNavigationListener', () => {
     expect(swListeners.size).toBe(0);
   });
 
-  it('navigator.serviceWorker が無い環境では何もしない', () => {
+  it('navigator.serviceWorker が無い環境でも throw しない', () => {
     Object.defineProperty(navigator, 'serviceWorker', {
       configurable: true,
       value: undefined,
@@ -107,4 +139,53 @@ describe('useFcmNavigationListener', () => {
     expect(() => renderHook(() => useFcmNavigationListener())).not.toThrow();
     expect(swListeners.size).toBe(0);
   });
+
+  it('mount 時に Cache Storage に intent があれば navigate する (postMessage 未着 fallback)', async () => {
+    seedPendingIntent('http://localhost:3000/trip/xyz?focusBlock=7');
+
+    renderHook(() => useFcmNavigationListener());
+
+    await waitFor(() => {
+      expect(mockNavigate).toHaveBeenCalledExactlyOnceWith('/trip/xyz?focusBlock=7');
+    });
+    expect(cacheEntries.has(INTENT_KEY)).toBe(false);
+  });
+
+  it('mount 時に intent が現在 URL と一致するなら navigate しない', async () => {
+    seedPendingIntent(window.location.href);
+
+    renderHook(() => useFcmNavigationListener());
+
+    await Promise.resolve();
+    await Promise.resolve();
+    expect(mockNavigate).not.toHaveBeenCalled();
+  });
+
+  it('visibilitychange (visible) で cache 内 intent を消化する', async () => {
+    renderHook(() => useFcmNavigationListener());
+
+    seedPendingIntent('http://localhost:3000/trip/later?focusBlock=99');
+    Object.defineProperty(document, 'visibilityState', { configurable: true, value: 'visible' });
+    act(() => {
+      document.dispatchEvent(new Event('visibilitychange'));
+    });
+
+    await waitFor(() => {
+      expect(mockNavigate).toHaveBeenCalledExactlyOnceWith('/trip/later?focusBlock=99');
+    });
+  });
+
+  it('postMessage で navigate した場合は cache 内 intent も掃除する (二重 navigate 防止)', async () => {
+    seedPendingIntent('http://localhost:3000/trip/abc?focusBlock=42');
+
+    renderHook(() => useFcmNavigationListener());
+
+    dispatchSwMessage({ type: 'FCM_NAVIGATE', url: 'http://localhost:3000/trip/abc?focusBlock=42' });
+
+    await waitFor(() => {
+      expect(cacheEntries.has(INTENT_KEY)).toBe(false);
+    });
+    // navigate は message 経由の 1 回のみ。mount 時 applyIntent は cache が既に空になってて no-op
+    expect(mockNavigate).toHaveBeenCalledTimes(1);
+  });
 });
diff --git a/frontend/src/hooks/useFcmNavigationListener.ts b/frontend/src/hooks/useFcmNavigationListener.ts
index d9b77f5d..62587caa 100644
--- a/frontend/src/hooks/useFcmNavigationListener.ts
+++ b/frontend/src/hooks/useFcmNavigationListener.ts
@@ -1,40 +1,122 @@
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 /**
- * firebase-messaging-sw.js の notificationclick が postMessage する
- * `{ type: 'FCM_NAVIGATE', url }` を受けて React Router で navigate する。
+ * firebase-messaging-sw.js の notificationclick が伝えてくる遷移先 URL を受けて
+ * React Router で navigate する。
  * App.tsx で 1 回のみ呼ぶ (Router の内側必須)。
+ *
+ * 経路は 2 系統:
+ * - fast path: SW からの postMessage `{ type: 'FCM_NAVIGATE', url }` を message event で受ける
+ * - safety net: SW が Cache Storage (INTENT_CACHE / INTENT_KEY) に書き残した URL を
+ *   mount + visibilitychange のたびに読む。PWA が Android にキルされて postMessage が
+ *   届かないケース / cold start で listener 未登録のケースを両方救う
+ *
+ * 両方の経路が同じ URL に対して発火するので、直近の遷移 URL を ref に持たせて重複 navigate を防ぐ。
  */
+
+const INTENT_CACHE = 'fcm-nav-intent-v1';
+const INTENT_KEY_PATH = '/__fcm_pending_nav__';
+
+const intentKeyUrl = () => new URL(INTENT_KEY_PATH, window.location.origin).href;
+
+const openIntentCache = async (): Promise<Cache | null> => {
+  if (typeof caches === 'undefined') return null;
+  try {
+    return await caches.open(INTENT_CACHE);
+  } catch {
+    return null;
+  }
+};
+
+const readAndClearPendingIntent = async (): Promise<string | null> => {
+  const cache = await openIntentCache();
+  if (!cache) return null;
+  const key = intentKeyUrl();
+  try {
+    const res = await cache.match(key);
+    if (!res) return null;
+    const url = await res.text();
+    await cache.delete(key);
+    return url;
+  } catch {
+    return null;
+  }
+};
+
+const clearPendingIntent = async (): Promise<void> => {
+  const cache = await openIntentCache();
+  if (!cache) return;
+  try {
+    await cache.delete(intentKeyUrl());
+  } catch {
+    // best effort
+  }
+};
+
+const parseSameOriginPath = (rawUrl: string): string | null => {
+  let parsed: URL;
+  try {
+    parsed = new URL(rawUrl, window.location.origin);
+  } catch {
+    return null;
+  }
+  if (parsed.origin !== window.location.origin) return null;
+  return `${parsed.pathname}${parsed.search}${parsed.hash}`;
+};
+
 export const useFcmNavigationListener = () => {
   const navigate = useNavigate();
+  // fast path (message) と safety net (cache) が同一 URL に対して二重発火するのを防ぐ。
+  // 直近の遷移先を保持し、同値なら skip する。
+  const lastNavigatedRef = useRef<string | null>(null);
 
   useEffect(() => {
+    let cancelled = false;
+
+    const navigateOnce = (target: string) => {
+      const current = `${window.location.pathname}${window.location.search}${window.location.hash}`;
+      if (target === current) return;
+      if (lastNavigatedRef.current === target) return;
+      lastNavigatedRef.current = target;
+      navigate(target);
+    };
+
+    const applyIntent = async () => {
+      const url = await readAndClearPendingIntent();
+      if (cancelled || !url) return;
+      const target = parseSameOriginPath(url);
+      if (!target) return;
+      navigateOnce(target);
+    };
+
     // 参照を effect スコープに固定: cleanup 時に navigator.serviceWorker が消えていても
     // (テスト環境で差し替えると起こる) removeEventListener で crash させない。
     const sw = typeof navigator !== 'undefined' ? navigator.serviceWorker : undefined;
-    if (!sw) return;
 
     const handler = (event: MessageEvent) => {
       if (event.data?.type !== 'FCM_NAVIGATE') return;
       const rawUrl = event.data.url;
       if (typeof rawUrl !== 'string') return;
+      const target = parseSameOriginPath(rawUrl);
+      if (!target) return;
+      // message 経由で消化するので safety net の Cache は掃除する (二重 navigate 防止)
+      void clearPendingIntent();
+      navigateOnce(target);
+    };
 
-      let parsed: URL;
-      try {
-        parsed = new URL(rawUrl, window.location.origin);
-      } catch {
-        return;
-      }
-      // SW 側でも弾いているが、payload 経路の open-redirect 対策として二重防御。
-      if (parsed.origin !== window.location.origin) return;
-
-      navigate(`${parsed.pathname}${parsed.search}${parsed.hash}`);
+    const onVisibility = () => {
+      if (document.visibilityState === 'visible') void applyIntent();
     };
 
-    sw.addEventListener('message', handler);
+    sw?.addEventListener('message', handler);
+    document.addEventListener('visibilitychange', onVisibility);
+    void applyIntent();
+
     return () => {
-      sw.removeEventListener('message', handler);
+      cancelled = true;
+      sw?.removeEventListener('message', handler);
+      document.removeEventListener('visibilitychange', onVisibility);
     };
   }, [navigate]);
 };

From 242e40af854951fdf953a014b9290dcf7dc14d2d Mon Sep 17 00:00:00 2001
From: kuu13580 <13580kuu@gmail.com>
Date: Sat, 1 Aug 2026 15:54:24 +0000
Subject: [PATCH 7/9] =?UTF-8?q?fix(#207):=20=E5=AE=9F=E6=A9=9F=E6=A4=9C?=
 =?UTF-8?q?=E8=A8=BC=E3=81=A7=E7=A2=BA=E5=AE=9A=E3=81=97=E3=81=9F=20SW=20?=
 =?UTF-8?q?=E6=9B=B4=E6=96=B0=20&=20payload=20=E6=8A=BD=E5=87=BA=E3=81=AE?=
 =?UTF-8?q?=E6=81=92=E4=B9=85=E5=AF=BE=E5=BF=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Android PWA 実機で切り分け検証した結果を反映。

追加:
- SW install→skipWaiting, activate→clients.claim (default lifecycle だと
  既存 client 閉じるまで active 待ちで update が届かない)
- extractDeepLink に data.FCM_MSG.notification.click_action フォールバック
  (SDK 12.x で WebpushFCMOptions.link はここに写される)
- useFcmNavigationListener 内で registration.update() を module-level
  flag 付きで 1 回コール (FCM SW は root scope 外で navigation 由来の
  update check が発火しないため唯一の更新経路)
- vite.config.ts の workbox に globIgnores + navigateFallbackDenylist で
  firebase-messaging-sw.js を precache から除外 (Chrome の register 時に
  cache 経由の古い版が返って更新が届かない事象を回避)
- firebase.json で /firebase-messaging-sw.js に Cache-Control no-cache
  (Firebase Hosting のデフォルト max-age=3600 が SW 更新を遅延させる)

削除:
- Cache Storage safety net (SW storePendingIntent + client applyIntent)
- lastNavigatedRef の永続 dedupe
- Cache safety net 系 test 4 件

削除理由: matchAll は task-killed で 0 件を返し openWindow で PWA 起動 +
URL 適用が実機で動作するため postMessage 未着の safety net は不要と確認済。
経路が 1 本になり dedupe 対象も消失。
---
 firebase.json                                 |  24 +++++
 frontend/public/firebase-messaging-sw.js      |  50 ++++-----
 .../hooks/useFcmNavigationListener.test.tsx   |  80 +-------------
 .../src/hooks/useFcmNavigationListener.ts     | 100 ++++--------------
 frontend/vite.config.ts                       |   5 +
 5 files changed, 73 insertions(+), 186 deletions(-)

diff --git a/firebase.json b/firebase.json
index 3ec1bf94..3869e6b1 100644
--- a/firebase.json
+++ b/firebase.json
@@ -9,6 +9,14 @@
           "source": "**",
           "destination": "/index.html"
         }
+      ],
+      "headers": [
+        {
+          "source": "/firebase-messaging-sw.js",
+          "headers": [
+            { "key": "Cache-Control", "value": "no-cache, no-store, must-revalidate" }
+          ]
+        }
       ]
     },
     {
@@ -20,6 +28,14 @@
           "source": "**",
           "destination": "/index.html"
         }
+      ],
+      "headers": [
+        {
+          "source": "/firebase-messaging-sw.js",
+          "headers": [
+            { "key": "Cache-Control", "value": "no-cache, no-store, must-revalidate" }
+          ]
+        }
       ]
     },
     {
@@ -31,6 +47,14 @@
           "source": "**",
           "destination": "/index.html"
         }
+      ],
+      "headers": [
+        {
+          "source": "/firebase-messaging-sw.js",
+          "headers": [
+            { "key": "Cache-Control", "value": "no-cache, no-store, must-revalidate" }
+          ]
+        }
       ]
     }
   ]
diff --git a/frontend/public/firebase-messaging-sw.js b/frontend/public/firebase-messaging-sw.js
index febf14b6..2ceca3c3 100644
--- a/frontend/public/firebase-messaging-sw.js
+++ b/frontend/public/firebase-messaging-sw.js
@@ -1,16 +1,26 @@
 // biome-ignore-all lint/correctness/noUndeclaredVariables: firebase / importScripts は SW context の global
 // biome-ignore-all lint/correctness/noUnusedFunctionParameters: onBackgroundMessage の signature は Firebase 規定
 
-// notificationclick handler は Firebase SDK の import / init より前に登録する必要がある。
-// Firebase Messaging SDK は内部で notificationclick リスナーを付け stopImmediatePropagation
-// することがあり、後付けで addEventListener すると invocation されないケースがある。
-// (`firebase-js-sdk/packages/messaging/src/listeners/sw-listeners.ts` の実装参照)
+// notificationclick handler は Firebase SDK の import / init より前に登録する。
+// Firebase Messaging SDK は内部で notificationclick リスナーを付け stopImmediatePropagation する
+// ことがあるため、後付けだと invocation されないケースがある。
 
-// Firebase Admin SDK の WebpushFCMOptions.link は data.FCM_MSG.fcmOptions.link に入る。
-// フォアグラウンド通知 (useForegroundNotificationToast) の自前 showNotification 経由は data.link。
+// SW default lifecycle だと install → waiting、既存 client が全部閉じるまで activate されない。
+// FCM SW は root scope 外なので待たせるとユーザ操作なしに切替できず更新が届かない。
+self.addEventListener('install', event => {
+  event.waitUntil(self.skipWaiting());
+});
+self.addEventListener('activate', event => {
+  event.waitUntil(self.clients.claim());
+});
+
+// Firebase Admin SDK の WebpushFCMOptions(link=...) は SDK 12.x で
+// data.FCM_MSG.notification.click_action に写される (fcmOptions.link ではない)。
+// data.link はフォアグラウンド通知 (useForegroundNotificationToast) の自前 showNotification 経由。
 const extractDeepLink = notification => {
   const data = notification?.data ?? {};
-  return data?.FCM_MSG?.fcmOptions?.link ?? data?.link ?? null;
+  const fcm = data?.FCM_MSG;
+  return fcm?.notification?.click_action ?? fcm?.fcmOptions?.link ?? data?.link ?? null;
 };
 
 // PWA / ブラウザ tab 両方 push 登録している端末で、ユーザが今触ってる方を選ぶための優先度。
@@ -20,25 +30,6 @@ const pickTargetClient = clientsList => {
   );
 };
 
-// postMessage 経路が届かない状況の safety net として target URL を Cache Storage に書き残す。
-// client 側 (useFcmNavigationListener) は mount + visibilitychange のたびに読んで navigate する。
-// 起こりうる postMessage 未着ケース:
-//   - PWA が Android にキルされていて matchAll 上は phantom client、focus() では OS が task を
-//     復帰させるが postMessage は event loop で drain されない
-//   - cold start で client 側 message listener 登録前に SW が postMessage 送出
-const INTENT_CACHE = 'fcm-nav-intent-v1';
-// Cache API は Request URL をキーに使うため、実在しない同 origin URL を予約して衝突を避ける。
-const INTENT_KEY = new URL('/__fcm_pending_nav__', self.location.origin).href;
-
-const storePendingIntent = async url => {
-  try {
-    const cache = await caches.open(INTENT_CACHE);
-    await cache.put(new Request(INTENT_KEY), new Response(url, { headers: { 'content-type': 'text/plain' } }));
-  } catch {
-    // Cache API 非対応 / QuotaExceeded 等は best effort として無視
-  }
-};
-
 self.addEventListener('notificationclick', event => {
   event.notification.close();
 
@@ -56,9 +47,6 @@ self.addEventListener('notificationclick', event => {
 
   event.waitUntil(
     (async () => {
-      // storage 完了を focus/openWindow より前に保証。client 側の visibilitychange で確実に拾える。
-      await storePendingIntent(targetUrl.href);
-
       const clientsList = await self.clients.matchAll({ type: 'window', includeUncontrolled: true });
       const target = pickTargetClient(clientsList);
 
@@ -69,11 +57,13 @@ self.addEventListener('notificationclick', event => {
         try {
           await target.focus();
         } catch {
-          // focus はユーザ操作起源でないと reject されるが、postMessage は届いてるので許容
+          // focus はユーザ操作起源でないと reject されるが postMessage は届いてるので許容
         }
         return;
       }
 
+      // task-killed 状態など matchAll が 0 件のときは openWindow が唯一の起動経路。
+      // Chrome は URL を尊重して PWA を起動 (実機で verify 済み)。
       await self.clients.openWindow(targetUrl.href);
     })()
   );
diff --git a/frontend/src/hooks/useFcmNavigationListener.test.tsx b/frontend/src/hooks/useFcmNavigationListener.test.tsx
index a7d6d9e8..d32fe564 100644
--- a/frontend/src/hooks/useFcmNavigationListener.test.tsx
+++ b/frontend/src/hooks/useFcmNavigationListener.test.tsx
@@ -1,4 +1,4 @@
-import { act, renderHook, waitFor } from '@testing-library/react';
+import { renderHook } from '@testing-library/react';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
 const mockNavigate = vi.fn();
@@ -19,6 +19,7 @@ const swStub = {
   removeEventListener: (type: string, listener: SwEventListener) => {
     if (type === 'message') swListeners.delete(listener);
   },
+  getRegistration: async () => undefined,
 };
 
 const dispatchSwMessage = (data: unknown) => {
@@ -26,45 +27,14 @@ const dispatchSwMessage = (data: unknown) => {
   for (const listener of swListeners) listener(event);
 };
 
-// jsdom は Cache API 未実装なのでインメモリスタブを差し込む
-const cacheEntries = new Map<string, string>();
-
-const cacheStub: Cache = {
-  put: async (request: RequestInfo | URL, response: Response) => {
-    const key = typeof request === 'string' ? request : (request as Request).url;
-    cacheEntries.set(key, await response.text());
-  },
-  match: async (request: RequestInfo | URL) => {
-    const key = typeof request === 'string' ? request : (request as Request).url;
-    const value = cacheEntries.get(key);
-    return value === undefined ? undefined : new Response(value);
-  },
-  delete: async (request: RequestInfo | URL) => {
-    const key = typeof request === 'string' ? request : (request as Request).url;
-    return cacheEntries.delete(key);
-  },
-} as unknown as Cache;
-
-const cachesStub: CacheStorage = {
-  open: async () => cacheStub,
-} as unknown as CacheStorage;
-
-const INTENT_KEY = 'http://localhost:3000/__fcm_pending_nav__';
-
-const seedPendingIntent = (url: string) => {
-  cacheEntries.set(INTENT_KEY, url);
-};
-
 describe('useFcmNavigationListener', () => {
   beforeEach(() => {
     swListeners.clear();
-    cacheEntries.clear();
     mockNavigate.mockClear();
     Object.defineProperty(navigator, 'serviceWorker', {
       configurable: true,
       value: swStub,
     });
-    vi.stubGlobal('caches', cachesStub);
   });
 
   afterEach(() => {
@@ -72,7 +42,6 @@ describe('useFcmNavigationListener', () => {
       configurable: true,
       value: undefined,
     });
-    vi.unstubAllGlobals();
   });
 
   it('FCM_NAVIGATE メッセージ受信で navigate() を pathname+search+hash 付きで呼ぶ', () => {
@@ -140,52 +109,11 @@ describe('useFcmNavigationListener', () => {
     expect(swListeners.size).toBe(0);
   });
 
-  it('mount 時に Cache Storage に intent があれば navigate する (postMessage 未着 fallback)', async () => {
-    seedPendingIntent('http://localhost:3000/trip/xyz?focusBlock=7');
-
+  it('現在 URL と一致するときは navigate しない', () => {
     renderHook(() => useFcmNavigationListener());
 
-    await waitFor(() => {
-      expect(mockNavigate).toHaveBeenCalledExactlyOnceWith('/trip/xyz?focusBlock=7');
-    });
-    expect(cacheEntries.has(INTENT_KEY)).toBe(false);
-  });
-
-  it('mount 時に intent が現在 URL と一致するなら navigate しない', async () => {
-    seedPendingIntent(window.location.href);
-
-    renderHook(() => useFcmNavigationListener());
+    dispatchSwMessage({ type: 'FCM_NAVIGATE', url: window.location.href });
 
-    await Promise.resolve();
-    await Promise.resolve();
     expect(mockNavigate).not.toHaveBeenCalled();
   });
-
-  it('visibilitychange (visible) で cache 内 intent を消化する', async () => {
-    renderHook(() => useFcmNavigationListener());
-
-    seedPendingIntent('http://localhost:3000/trip/later?focusBlock=99');
-    Object.defineProperty(document, 'visibilityState', { configurable: true, value: 'visible' });
-    act(() => {
-      document.dispatchEvent(new Event('visibilitychange'));
-    });
-
-    await waitFor(() => {
-      expect(mockNavigate).toHaveBeenCalledExactlyOnceWith('/trip/later?focusBlock=99');
-    });
-  });
-
-  it('postMessage で navigate した場合は cache 内 intent も掃除する (二重 navigate 防止)', async () => {
-    seedPendingIntent('http://localhost:3000/trip/abc?focusBlock=42');
-
-    renderHook(() => useFcmNavigationListener());
-
-    dispatchSwMessage({ type: 'FCM_NAVIGATE', url: 'http://localhost:3000/trip/abc?focusBlock=42' });
-
-    await waitFor(() => {
-      expect(cacheEntries.has(INTENT_KEY)).toBe(false);
-    });
-    // navigate は message 経由の 1 回のみ。mount 時 applyIntent は cache が既に空になってて no-op
-    expect(mockNavigate).toHaveBeenCalledTimes(1);
-  });
 });
diff --git a/frontend/src/hooks/useFcmNavigationListener.ts b/frontend/src/hooks/useFcmNavigationListener.ts
index 62587caa..ba30ec3d 100644
--- a/frontend/src/hooks/useFcmNavigationListener.ts
+++ b/frontend/src/hooks/useFcmNavigationListener.ts
@@ -1,95 +1,42 @@
-import { useEffect, useRef } from 'react';
+import { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 /**
  * firebase-messaging-sw.js の notificationclick が伝えてくる遷移先 URL を受けて
- * React Router で navigate する。
- * App.tsx で 1 回のみ呼ぶ (Router の内側必須)。
- *
- * 経路は 2 系統:
- * - fast path: SW からの postMessage `{ type: 'FCM_NAVIGATE', url }` を message event で受ける
- * - safety net: SW が Cache Storage (INTENT_CACHE / INTENT_KEY) に書き残した URL を
- *   mount + visibilitychange のたびに読む。PWA が Android にキルされて postMessage が
- *   届かないケース / cold start で listener 未登録のケースを両方救う
- *
- * 両方の経路が同じ URL に対して発火するので、直近の遷移 URL を ref に持たせて重複 navigate を防ぐ。
+ * React Router で navigate する。App.tsx で 1 回のみ呼ぶ (Router の内側必須)。
  */
 
-const INTENT_CACHE = 'fcm-nav-intent-v1';
-const INTENT_KEY_PATH = '/__fcm_pending_nav__';
-
-const intentKeyUrl = () => new URL(INTENT_KEY_PATH, window.location.origin).href;
-
-const openIntentCache = async (): Promise<Cache | null> => {
-  if (typeof caches === 'undefined') return null;
+const parseSameOriginPath = (rawUrl: string): string | null => {
+  let parsed: URL;
   try {
-    return await caches.open(INTENT_CACHE);
+    parsed = new URL(rawUrl, window.location.origin);
   } catch {
     return null;
   }
+  if (parsed.origin !== window.location.origin) return null;
+  return `${parsed.pathname}${parsed.search}${parsed.hash}`;
 };
 
-const readAndClearPendingIntent = async (): Promise<string | null> => {
-  const cache = await openIntentCache();
-  if (!cache) return null;
-  const key = intentKeyUrl();
-  try {
-    const res = await cache.match(key);
-    if (!res) return null;
-    const url = await res.text();
-    await cache.delete(key);
-    return url;
-  } catch {
-    return null;
-  }
-};
+// FCM SW は root scope 外なので navigation 由来の update check が発火せず、register() の
+// byte-diff check も起動 1 回のみ (promise cache のため)。明示 update() が唯一の SW 更新経路。
+// PWA セッション中に 1 回だけ呼ぶよう module-level flag で dedupe する。
+let fcmSwUpdateTriggered = false;
 
-const clearPendingIntent = async (): Promise<void> => {
-  const cache = await openIntentCache();
-  if (!cache) return;
+const promoteFcmSwUpdate = async (sw: ServiceWorkerContainer): Promise<void> => {
+  if (fcmSwUpdateTriggered) return;
+  fcmSwUpdateTriggered = true;
   try {
-    await cache.delete(intentKeyUrl());
+    const reg = await sw.getRegistration('/firebase-cloud-messaging-push-scope');
+    await reg?.update();
   } catch {
     // best effort
   }
 };
 
-const parseSameOriginPath = (rawUrl: string): string | null => {
-  let parsed: URL;
-  try {
-    parsed = new URL(rawUrl, window.location.origin);
-  } catch {
-    return null;
-  }
-  if (parsed.origin !== window.location.origin) return null;
-  return `${parsed.pathname}${parsed.search}${parsed.hash}`;
-};
-
 export const useFcmNavigationListener = () => {
   const navigate = useNavigate();
-  // fast path (message) と safety net (cache) が同一 URL に対して二重発火するのを防ぐ。
-  // 直近の遷移先を保持し、同値なら skip する。
-  const lastNavigatedRef = useRef<string | null>(null);
 
   useEffect(() => {
-    let cancelled = false;
-
-    const navigateOnce = (target: string) => {
-      const current = `${window.location.pathname}${window.location.search}${window.location.hash}`;
-      if (target === current) return;
-      if (lastNavigatedRef.current === target) return;
-      lastNavigatedRef.current = target;
-      navigate(target);
-    };
-
-    const applyIntent = async () => {
-      const url = await readAndClearPendingIntent();
-      if (cancelled || !url) return;
-      const target = parseSameOriginPath(url);
-      if (!target) return;
-      navigateOnce(target);
-    };
-
     // 参照を effect スコープに固定: cleanup 時に navigator.serviceWorker が消えていても
     // (テスト環境で差し替えると起こる) removeEventListener で crash させない。
     const sw = typeof navigator !== 'undefined' ? navigator.serviceWorker : undefined;
@@ -100,23 +47,16 @@ export const useFcmNavigationListener = () => {
       if (typeof rawUrl !== 'string') return;
       const target = parseSameOriginPath(rawUrl);
       if (!target) return;
-      // message 経由で消化するので safety net の Cache は掃除する (二重 navigate 防止)
-      void clearPendingIntent();
-      navigateOnce(target);
-    };
-
-    const onVisibility = () => {
-      if (document.visibilityState === 'visible') void applyIntent();
+      const current = `${window.location.pathname}${window.location.search}${window.location.hash}`;
+      if (target === current) return;
+      navigate(target);
     };
 
     sw?.addEventListener('message', handler);
-    document.addEventListener('visibilitychange', onVisibility);
-    void applyIntent();
+    if (sw) void promoteFcmSwUpdate(sw);
 
     return () => {
-      cancelled = true;
       sw?.removeEventListener('message', handler);
-      document.removeEventListener('visibilitychange', onVisibility);
     };
   }, [navigate]);
 };
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index fca6f338..217c1c55 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -64,6 +64,11 @@ export default defineConfig({
       workbox: {
         navigateFallback: '/index.html',
         globPatterns: ['**/*.{js,css,html,ico,png,svg}'],
+        // firebase-messaging-sw.js は別 scope で登録される独立 SW。VitePWA sw.js の
+        // precache に紛れ込むと、Chrome の register 時に fetch handler が cache 経由で
+        // 古い版を返し続けて更新が実機に届かなくなる。glob から除外必須。
+        globIgnores: ['**/firebase-messaging-sw.js'],
+        navigateFallbackDenylist: [/^\/firebase-messaging-sw\.js$/],
       },
     }),
   ],

From b9cf50e4217ecbbaf0ffa8257ff31431a6f4fd62 Mon Sep 17 00:00:00 2001
From: kuu13580 <13580kuu@gmail.com>
Date: Sat, 1 Aug 2026 16:43:56 +0000
Subject: [PATCH 8/9] =?UTF-8?q?fix(#207):=20waitForBlockElement=20?=
 =?UTF-8?q?=E3=82=92=20AbortSignal=20=E5=AF=BE=E5=BF=9C=E3=81=AB=E3=81=97?=
 =?UTF-8?q?=E3=81=A6=20observer/timer=20=E3=82=92=E7=A2=BA=E5=AE=9F?=
 =?UTF-8?q?=E3=81=AB=E8=A7=A3=E6=94=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

CodeRabbit の指摘: cleanup で observer/timer が明示解放されていない。
focusBlock 変化や unmount 時に 8 秒 timer + MutationObserver が待機し
続けるのを避けるため AbortSignal に統一。

- waitForBlockElement は AbortController.signal を受け取り、abort 時に
  observer.disconnect + clearTimeout をまとめて実行
- scrollIntoViewOnNextFrame は AbortSignal 対応しない: 直後に clearParam
  が useSearchParams 更新 → cleanup が abort() を発火するタイミングと
  rAF 実行のレースで scroll が発火しなくなるため。rAF は 1 フレームで
  終わり detached element への scrollIntoView は no-op なので害無し
- useEffect の cleanup で controller.abort()、以前の cancelled 変数を置換
- unmount 中に scroll が発火しないことの回帰テストを追加
---
 .../src/hooks/useFocusBlockOnMount.test.tsx   | 40 +++++++++++++++++++
 frontend/src/hooks/useFocusBlockOnMount.ts    | 23 +++++++----
 2 files changed, 55 insertions(+), 8 deletions(-)

diff --git a/frontend/src/hooks/useFocusBlockOnMount.test.tsx b/frontend/src/hooks/useFocusBlockOnMount.test.tsx
index cff6020e..cf024a35 100644
--- a/frontend/src/hooks/useFocusBlockOnMount.test.tsx
+++ b/frontend/src/hooks/useFocusBlockOnMount.test.tsx
@@ -281,4 +281,44 @@ describe('useFocusBlockOnMount', () => {
       expect(searchRef.current).toBe('');
     });
   });
+
+  it('block DOM 出現前に unmount された場合は scroll しない (AbortSignal で observer/timer/rAF が解放される)', async () => {
+    server.use(http.get('*/blocks/42', () => HttpResponse.json(scheduleBlockJson(42, 7))));
+
+    // data-block-id を持たない host。waitForBlockElement が MutationObserver で待機し続ける状態を作る。
+    const HookHostWithoutTarget = () => {
+      useFocusBlockOnMount();
+      return null;
+    };
+
+    const Wrapper = ({ children }: { children: ReactNode }) => (
+      <JotaiProvider store={appStore}>
+        <MemoryRouter initialEntries={['/trip/abc?focusBlock=42']}>
+          <Routes>
+            <Route path='*' element={children} />
+          </Routes>
+        </MemoryRouter>
+      </JotaiProvider>
+    );
+
+    const { unmount } = render(<HookHostWithoutTarget />, { wrapper: Wrapper });
+
+    // block 取得 → selectedPageId 切替までは進むが、DOM に data-block-id が無く scroll 待機のまま
+    await waitFor(() => {
+      expect(appStore.get(selectedPageIdAtom)).toBe(7);
+    });
+    expect(scrollIntoViewMock).not.toHaveBeenCalled();
+
+    // 待機中に unmount。以降 element を追加しても scroll は発火しないはず。
+    unmount();
+    const el = document.createElement('div');
+    el.setAttribute('data-block-id', '42');
+    document.body.appendChild(el);
+
+    // MutationObserver が abort で解放されていることを検証するため少し待つ。
+    await new Promise(resolve => setTimeout(resolve, 50));
+    expect(scrollIntoViewMock).not.toHaveBeenCalled();
+
+    document.body.removeChild(el);
+  });
 });
diff --git a/frontend/src/hooks/useFocusBlockOnMount.ts b/frontend/src/hooks/useFocusBlockOnMount.ts
index e6be07c1..00a5fe2e 100644
--- a/frontend/src/hooks/useFocusBlockOnMount.ts
+++ b/frontend/src/hooks/useFocusBlockOnMount.ts
@@ -19,9 +19,12 @@ const FOCUS_BLOCK_PARAM = 'focusBlock';
 // rAF ポーリングだと 1 フレーム単位で無駄回転するので MutationObserver で DOM 変化を待つ。
 const SCROLL_WAIT_MAX_MS = 8000;
 
-const waitForBlockElement = (blockId: number, maxMs: number, isCancelled: () => boolean): Promise<HTMLElement | null> =>
+// AbortSignal で observer / timer / rAF をまとめて解放できるようにする。cleanup の taskkill 経路が
+// unmount / focusBlock 変更 / StrictMode double-fire で確実に停止する。
+const waitForBlockElement = (blockId: number, maxMs: number, signal: AbortSignal): Promise<HTMLElement | null> =>
   new Promise(resolve => {
     const selector = `[data-block-id="${blockId}"]`;
+    if (signal.aborted) return resolve(null);
 
     const found = document.querySelector<HTMLElement>(selector);
     if (found) return resolve(found);
@@ -30,20 +33,24 @@ const waitForBlockElement = (blockId: number, maxMs: number, isCancelled: () =>
     const finish = (el: HTMLElement | null) => {
       observer.disconnect();
       if (timeoutId !== null) clearTimeout(timeoutId);
+      signal.removeEventListener('abort', onAbort);
       resolve(el);
     };
+    const onAbort = () => finish(null);
 
     const observer = new MutationObserver(() => {
-      if (isCancelled()) return finish(null);
       const el = document.querySelector<HTMLElement>(selector);
       if (el) finish(el);
     });
     observer.observe(document.body, { childList: true, subtree: true });
     timeoutId = setTimeout(() => finish(null), maxMs);
+    signal.addEventListener('abort', onAbort);
   });
 
-// layout flush を 1 フレーム待ってから scroll する。Timeline が差し替わった直後は要素の
-// 位置計算がまだ確定していないことがあり、そのタイミングで scrollIntoView すると外れる。
+// layout flush を 1 フレーム待ってから scroll する。Timeline 差し替え直後は要素の位置計算が
+// まだ確定していないことがあり、そのタイミングで scrollIntoView すると外れる。
+// rAF は clearParam() 直後の cleanup と間に合わない race を避けるため cancel しない
+// (detached element への scrollIntoView は no-op なので害はない)。
 const scrollIntoViewOnNextFrame = (el: HTMLElement) => {
   requestAnimationFrame(() => {
     el.scrollIntoView({ behavior: 'smooth', block: 'center' });
@@ -106,17 +113,17 @@ export const useFocusBlockOnMount = () => {
 
     setSelectedPageId(block.pageId);
 
-    let cancelled = false;
+    const controller = new AbortController();
     (async () => {
-      const el = await waitForBlockElement(focusBlockId, SCROLL_WAIT_MAX_MS, () => cancelled);
-      if (cancelled) return;
+      const el = await waitForBlockElement(focusBlockId, SCROLL_WAIT_MAX_MS, controller.signal);
+      if (controller.signal.aborted) return;
       if (el) scrollIntoViewOnNextFrame(el);
       clearParam();
       consumedKeyRef.current = rawFocusBlock;
     })();
 
     return () => {
-      cancelled = true;
+      controller.abort();
     };
   }, [rawFocusBlock, focusBlockId, hasInvalidParam, block, error, setSelectedPageId, setSearchParams]);
 };

From e9d7938699363763ab767936b377b0d31f661ea1 Mon Sep 17 00:00:00 2001
From: kuu13580 <13580kuu@gmail.com>
Date: Sat, 1 Aug 2026 17:00:31 +0000
Subject: [PATCH 9/9] =?UTF-8?q?docs(#207):=20scrollIntoViewOnNextFrame=20?=
 =?UTF-8?q?=E3=81=AE=20rAF=20=E9=9D=9E=20cancel=20=E6=96=B9=E9=87=9D?=
 =?UTF-8?q?=E3=82=92=E3=82=B3=E3=83=A1=E3=83=B3=E3=83=88=E3=81=A7=E6=98=8E?=
 =?UTF-8?q?=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

CodeRabbit の指摘 (「resource release ではなく no impact として扱え」) に
沿ってコメントを網羅的な言い回しに書き換え。実装変更なし。

- 旧コメントは「detached element の no-op」しか言及していなかったが、
  focusBlock 変化パス (元 element が生存したまま scroll される一瞬の
  チラつき) も含めて実害が小さいことを明記
- rAF を signal で cancel すると clearParam() 直後の自 cleanup で成功
  パスまで潰れる副作用が大きいため意図的に cancel 対象外とする、と
  設計意図を残す
---
 frontend/src/hooks/useFocusBlockOnMount.ts | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/frontend/src/hooks/useFocusBlockOnMount.ts b/frontend/src/hooks/useFocusBlockOnMount.ts
index 00a5fe2e..1067fbd2 100644
--- a/frontend/src/hooks/useFocusBlockOnMount.ts
+++ b/frontend/src/hooks/useFocusBlockOnMount.ts
@@ -49,8 +49,13 @@ const waitForBlockElement = (blockId: number, maxMs: number, signal: AbortSignal
 
 // layout flush を 1 フレーム待ってから scroll する。Timeline 差し替え直後は要素の位置計算が
 // まだ確定していないことがあり、そのタイミングで scrollIntoView すると外れる。
-// rAF は clearParam() 直後の cleanup と間に合わない race を避けるため cancel しない
-// (detached element への scrollIntoView は no-op なので害はない)。
+//
+// rAF は明示 cancel しない (AbortSignal 対象外)。abort 後に fire するパターンは 2 つあるが、
+// いずれも実害が小さい:
+//   - unmount 経由の abort: element が detach 済で scrollIntoView は no-op
+//   - focusBlock 変化経由の abort: 元 element に一瞬 scroll した後、新しい rAF が上書き
+// 逆に rAF を signal で cancel すると、clearParam() 直後の自 cleanup で成功パスの scroll
+// まで潰れるため、そちらの副作用の方が大きい。
 const scrollIntoViewOnNextFrame = (el: HTMLElement) => {
   requestAnimationFrame(() => {
     el.scrollIntoView({ behavior: 'smooth', block: 'center' });