横断/運用基盤 / PWA

概要

fincs サービスを PWA（Progressive Web App）として提供するための基盤レイヤ。Web ブラウザから fincs を「アプリのように」ホーム画面に追加して使えるようにし、起動高速化・オフライン対応の一部・通知受信などのアプリ的体験を提供する。

主な構成要素:

• PWA インストール対応: ホーム画面追加用のメタ情報（マニフェスト）・アイコン提供
• Service Worker: 静的アセットの事前キャッシュ・通知受信・OS バッジ更新を担当
• PWA 起動時の自動遷移: ログイン済みユーザーが PWA を起動した際、最後に訪問していた講座ページへ直接遷移する仕組み
• 配信キャッシュの無効化: リリース時に CDN（CloudFront）のキャッシュを全パス無効化し、最新版を即座に配信
• 更新検知 + リロード促進: 新バージョンがリリースされたタイミングで内部的に検知し、必要に応じて画面リロードを促す
• ストレージ容量管理: ブラウザの localStorage が満杯にならないよう、自動で不要なキャッシュ痕跡を削除する仕組み

主な利用想定は、スマートフォン・タブレットでアプリ的な体験で fincs を使う、iOS で通知機能を使うために PWA 化する、デプロイ後にユーザーが最新版を即座に受け取る、など。

iOS は PWA 化が前提: iOS Safari は標準では通知機能を使えない。ホーム画面追加で PWA として動作させた状態でのみ通知を受け取れる仕様。CS で「iOS で通知が来ない」相談時は PWA 化を案内する運用。

PWA 機能トグル: PWA 機能は内部の機能トグルで有効化/無効化可能。各環境で個別に制御している。

CloudFront キャッシュ無効化のコスト: リリース毎に全パスを無効化する仕組みのため、リリース頻度に応じて配信コストが発生する。配信頻度・コストのバランスは運用で判断。

iPhone PWA での画面更新の特殊事情: iPhone PWA では画面の自動更新処理が一部不安定であるため、内部的に通常の URL 履歴更新 + ページリロードを使う代替手段で対応している。

利用シナリオ

シナリオ 1: ホーム画面追加してアプリ風に利用

ユーザーがブラウザのメニューから「ホーム画面に追加」を選び、fincs を PWA としてインストール。インストール後はホーム画面アイコンから起動でき、ブラウザバー無しのアプリ風 UI（スタンドアロン表示）で利用できる。

シナリオ 2: PWA 起動時に最終訪問講座へ自動遷移

ログイン済みのユーザーが PWA を起動すると、トップ画面ではなく最後に訪問していた講座ページへ自動的に遷移する。継続学習の利用導線として、毎回トップから探し直す手間を減らす。

シナリオ 3: 新バージョンリリース後の最新版受信

運営側がリリースを行うと、配信キャッシュが全パス無効化され、ユーザー側では次回読み込み時に最新版が配信される。さらに、内部的にバージョンを定期確認し、新バージョンが出たことを検知するとユーザーに更新を促す動作も走る。

シナリオ 4: iOS で PWA 化して通知を受け取る

iOS ユーザーがホーム画面追加で PWA 化することで、通知機能の利用が可能になる。PWA 化していない iOS Safari では通知を受け取れない。

よくある失敗ケース

• PWA 未対応ブラウザでのインストール: 古いブラウザや一部の環境ではホーム画面追加機能自体が提供されていない。代替案内が必要
• localStorage 容量超過: ブラウザの localStorage が容量上限に達すると一部機能が動作不能になるケース。内部的に閾値到達時の自動削除で回避
• 更新検知後のリロード忘れ: 新バージョン検知後にリロードされないままだと古いバージョンを使い続けるケース。内部の促進処理で対応
• iOS 未 PWA 化での通知未受信: PWA 化していないと iOS では通知が届かない

利用可否（権限別）

PWA は基盤機能のため、ユーザー権限軸での直接の操作は無い。全ユーザーが対象。

機能詳細（ふるまい）

PWA インストール

• ブラウザのメニュー「ホーム画面に追加」からインストール可能
• インストール用のメタ情報（マニフェスト）を提供
• アイコンは複数サイズ（64 / 192 / 512px）+ マスク対応の 192px を提供
• インストール後はスタンドアロン表示（ブラウザバー無し）で起動

Service Worker

• 静的アセットの事前キャッシュ（precache）でアプリ起動を高速化
• ナビゲーション（ページ遷移）の段階的キャッシュ
• フォントの長期キャッシュ
• 通知受信処理 + OS バッジ更新
• 事前キャッシュの対象サイズ上限あり（大容量メディアは対象外）

PWA 起動時の最終訪問講座への自動遷移

• ログイン済みかつトップ画面 / ログイン画面にいる場合、最後に訪問した講座ページへ自動遷移
• セッション内で初回起動時のみ実行（後続のページ遷移は通常通り）
• 機能トグルでの有効化制御

配信キャッシュ無効化（リリース時）

• リリース実行時に CDN（CloudFront）のキャッシュを全パス無効化
• ユーザーは次回読み込み時に最新版を取得できる
• 配信メタ情報の更新検知用ファイルには no-cache メタ情報を付与し、常に最新を取得する仕組み

更新検知 + リロード促進

• 内部的に定期的にバージョン情報を確認
• 新バージョンが検知された場合、ユーザーに更新を促し、必要に応じて画面リロードを実行

ストレージ容量管理

• ブラウザの localStorage 上限（5MiB）を超えると一部機能が動作不能になるリスクへの対応
• 容量が一定の閾値（3MiB）を超えた場合、内部キャッシュの痕跡を自動削除して空き容量を確保

iOS PWA の制約事項

• iOS Safari では PWA 化しないと通知機能を使えない
• PWA 起動状態でも、iOS 特有の動作制約に応じた個別対応が走る（通知の挙動・画面更新方法等）
• PWA 未化の iOS ユーザー向けには互換層経路（PushQuay）で通知を提供（横断/運用基盤 / 通知基盤 参照）

関連ドキュメント

• 関連 PSD:
  • 横断/運用基盤 / 通知基盤 — 通知基盤
  • 横断/運用基盤 / SEO — SEO
  • 横断/運用基盤 / 解析・モニタリング — 解析・モニタリング