SharedWorkerを使ったキャッシュでネイティブアプリに負けないユーザー体験を目指す

フロントエンドカンファレンス関西2026 https://2026.frontend-conf.osaka.jp/
での登壇資料です

Transcript

1. SharedWorkerを使ったキャッシュで ネイティブアプリに負けないユーザー体験を目指す 2026/10/12 Nokogiri@株式会社カケハシ フロントエンドカンファレンス関西2026 ©KAKEHASHI inc.
2. 自己紹介 Nokogiri（@nkgrnkgr） X | Bluesky | Github 株式会社カケハシ ソフトウェアエンジニア（主にフロントエンド） React / TypeScript / フロントエンド大好き！ 二児の父👶 ポケモン対戦大好き！ ©KAKEHASHI inc. 2
3. 会社紹介 株式会社カケハシとは • ヘルステックスタートアップ • 主に調剤薬局向けの業務システムを提供 • クラウド型電子薬歴「Musubi」のほか、複数プ ロダクトを開発・提供し、グループ全体で国内の 薬局の14,000店舗超をカバー ©KAKEHASHI inc. 3
4. 同じデータを複数のタブで取り直している ©KAKEHASHI inc. 4
5. 同じデータを複数のタブで取り直している 薬局のユースケース • 1患者毎に1タブ • 最大1日に200-300名、来局 • 医薬品など数万件、数MB程度のデータ • 丸一日ほぼ変更がない場合がある • 環境によってはネットワークが細い • 移行元がWindowsネイティブアプリ タブを跨いで1回だけ取得し、使い回せないか ©KAKEHASHI inc. 5
6. 複数タブでデータを使い回す ©KAKEHASHI inc. 6
7. 複数タブでデータを使い回す 使う2つの技術 SharedWorker • 同じオリジンの複数タブで共有できる SSE（Server-Sent Events） • Worker • タブとは別スレッドで動き、全タブが閉じると 終わる ©KAKEHASHI inc. サーバーからブラウザへ一方向にイベントを 流す HTTP の仕組み • 接続を張りっぱなしにして、更新の通知を受 け取る 7
8. 複数タブでデータを使い回す Workerに1カ所で持ち、全タブで使い回す • タブからWorkerへ取得イベントを 投げる ©KAKEHASHI inc. • Worker内で通信し、Mapで管理 • 待つのは初回の1タブ目だけ • 2タブ目以降通信なしで返す 8
9. 複数タブでデータを使い回す 値が変わればサーバーが知らせる、全タブを閉じるとデータが消える • マスタに変更があればSSEでWorker に通知 • Workerは再取得して、全タブに Broadcast • SSE接続もタブ毎ではなくWorker1本 • 全タブ閉じるとWorkerごと消えるので 後始末のコードがいらない ©KAKEHASHI inc. 9
10. 複数タブでデータを使い回す 検討した他の技術 技術 説明 localStorage タブを閉じても残る。ログアウトやセッション切れで 消す責務が増える。容量上限と同期 API の問題も IndexedDB 同じく残る。消す責務が増える。永続は今回要らない WASM + SQLite 参照中心なので仕組みが過剰 ※似た名前のServiceWorkerはfetchを横取りしてオフライン対応する部品で、用途が違う 全タブ閉じると消えるSharedWorkerの寿命はちょうどいい ©KAKEHASHI inc. 10
11. まとめ ©KAKEHASHI inc. 11
12. まとめ SharedWorker＋SSEでタブ間のデータ共有とライフサイクル管理が可能 • データ取得をSharedWorkerに一本化 • SharedWorkerが全タブにBroadcastして同期 • 更新通知はSSE経由 • 全タブ閉じるとWorkerごとデータも消える ※今回の発表内容は、実プロダクトで運用している内容ではなくPoCとして検証した内容です。 ブラウザに大きなデータを置くときの選択肢として検討いただけると幸いです。 ©KAKEHASHI inc. 12
13. We Are Hiring!!! PM EM エンジニア積極採用中 © KAKEHASHI Inc. All Rights Reserved.