リクエスト詳細
✨ 既存アプリの改善
対応完了
対象アプリ: 合体ドロップ
PWA更新時に新バージョンを検知して再読込を促すバナー表示
1. 目的:
v1.130.0でタイトル・プレイ・遊び方・図鑑をService Workerでオフラインキャッシュするようになったが、キャッシュ更新後もタブを閉じない限りユーザーは古いHTML/JS/CSSを見続けてしまう可能性がある。ブラウザは新しいService Workerを『waiting』状態にしたまま既存タブでは古いキャッシュを使い続けるため、v1.131.0のホーム画面アイコン起動を含め、ユーザーが最新の不具合修正・新機能に気づかず古いバージョンのまま使い続けるケースが発生し得る。これを解消し、更新の取りこぼしを防ぐ。
2. 具体的な仕様:
- service-worker.js の install イベントで新しいキャッシュ (例: `vd-cache-v{version}`) をインストールした後、activate 前に旧キャッシュを保持したまま `self.skipWaiting()` は呼ばずに待機させる (既存のオフライン閲覧を壊さないため)。
- 各ページ (レイアウト共通JS、例: lib.php の render_layout 内で読み込む共通スクリプト) に以下の処理を追加:
- `navigator.serviceWorker.register()` 済みの registration オブジェクトに対し `registration.addEventListener('updatefound', ...)` を登録。
- 新しい worker が `installed` 状態になり、かつ `navigator.serviceWorker.controller` が既に存在する (=初回インストールではなく更新) 場合、画面下部に日英対応の更新バナー (例:「新しいバージョンがあります / A new version is available」+「更新する / Update」ボタン) を表示する。
- 「更新する」ボタン押下で、新しい worker に `postMessage({type:'SKIP_WAITING'})` を送り、service-worker.js側で `self.skipWaiting()` を実行後、`controllerchange` イベントで `location.reload()` する。
- バナーは閉じるボタン(×)でも消せるが、次回ページ遷移時に再度更新が残っていれば再表示する。
- ゲームプレイ中 (play.php でプレイ中フラグが立っている間) はバナー表示を抑制し、タイトル画面・ゲームオーバー画面・ランキング・図鑑・ヘルプでのみ表示することで、プレイ中の離脱確認 (v1.79.0) との競合を避ける。
- バナーの文言・ボタンは既存の `t()` 翻訳関数と同じ仕組みで日英切替に対応させる。
3. 既存機能との整合:
- 既存のオフライン表示・保留スコア自動送信・CSRFトークン再取得などの挙動は変更しない。バナーはあくまで『新しいキャッシュが用意できた』ことをユーザーに知らせ、明示的な操作でのみリロードするため、意図せぬデータ消失やプレイ中断は発生しない。
- Service Worker未対応ブラウザやオフライン環境では `updatefound` イベント自体が発生しないため、既存の非対応環境の動作にも影響しない。
- 既存のUI文字サイズ設定・ダーク/ライトテーマ設定はバナーにもそのまま適用し、見た目の一貫性を保つ。
v1.130.0でタイトル・プレイ・遊び方・図鑑をService Workerでオフラインキャッシュするようになったが、キャッシュ更新後もタブを閉じない限りユーザーは古いHTML/JS/CSSを見続けてしまう可能性がある。ブラウザは新しいService Workerを『waiting』状態にしたまま既存タブでは古いキャッシュを使い続けるため、v1.131.0のホーム画面アイコン起動を含め、ユーザーが最新の不具合修正・新機能に気づかず古いバージョンのまま使い続けるケースが発生し得る。これを解消し、更新の取りこぼしを防ぐ。
2. 具体的な仕様:
- service-worker.js の install イベントで新しいキャッシュ (例: `vd-cache-v{version}`) をインストールした後、activate 前に旧キャッシュを保持したまま `self.skipWaiting()` は呼ばずに待機させる (既存のオフライン閲覧を壊さないため)。
- 各ページ (レイアウト共通JS、例: lib.php の render_layout 内で読み込む共通スクリプト) に以下の処理を追加:
- `navigator.serviceWorker.register()` 済みの registration オブジェクトに対し `registration.addEventListener('updatefound', ...)` を登録。
- 新しい worker が `installed` 状態になり、かつ `navigator.serviceWorker.controller` が既に存在する (=初回インストールではなく更新) 場合、画面下部に日英対応の更新バナー (例:「新しいバージョンがあります / A new version is available」+「更新する / Update」ボタン) を表示する。
- 「更新する」ボタン押下で、新しい worker に `postMessage({type:'SKIP_WAITING'})` を送り、service-worker.js側で `self.skipWaiting()` を実行後、`controllerchange` イベントで `location.reload()` する。
- バナーは閉じるボタン(×)でも消せるが、次回ページ遷移時に再度更新が残っていれば再表示する。
- ゲームプレイ中 (play.php でプレイ中フラグが立っている間) はバナー表示を抑制し、タイトル画面・ゲームオーバー画面・ランキング・図鑑・ヘルプでのみ表示することで、プレイ中の離脱確認 (v1.79.0) との競合を避ける。
- バナーの文言・ボタンは既存の `t()` 翻訳関数と同じ仕組みで日英切替に対応させる。
3. 既存機能との整合:
- 既存のオフライン表示・保留スコア自動送信・CSRFトークン再取得などの挙動は変更しない。バナーはあくまで『新しいキャッシュが用意できた』ことをユーザーに知らせ、明示的な操作でのみリロードするため、意図せぬデータ消失やプレイ中断は発生しない。
- Service Worker未対応ブラウザやオフライン環境では `updatefound` イベント自体が発生しないため、既存の非対応環境の動作にも影響しない。
- 既存のUI文字サイズ設定・ダーク/ライトテーマ設定はバナーにもそのまま適用し、見た目の一貫性を保つ。
💬 返信 (3)
🛠 開発を開始しました (機能追加 (vegetable-drop))
ご要望ありがとうございます。AI 開発ワーカーが実装を開始します。
通常 5〜30 分で Pull Request を作成し、レビュー後にリリースされます。
ご要望ありがとうございます。AI 開発ワーカーが実装を開始します。
通常 5〜30 分で Pull Request を作成し、レビュー後にリリースされます。
📝 開発が完了しました
ご要望いただいた内容の実装が完了し、最終チェック段階に入りました。
レビュー (自動) → リリース、の流れで進みます。
もう少々お待ちください。
ご要望いただいた内容の実装が完了し、最終チェック段階に入りました。
レビュー (自動) → リリース、の流れで進みます。
もう少々お待ちください。
✅ リリース完了のお知らせ
ご要望いただいた「合体ドロップ」を実装し、リリースいたしました。
【ご利用方法】
ダッシュボード: https://www.aiapps.jp/?action=dashboard
アプリ詳細: https://www.aiapps.jp/apps/show.php?slug=vegetable-drop
デモ環境は 1 時間以内に自動構築されます:
https://www.aiapps.jp/demo/vegetable-drop/
ご利用ありがとうございます!
ご要望いただいた「合体ドロップ」を実装し、リリースいたしました。
【ご利用方法】
ダッシュボード: https://www.aiapps.jp/?action=dashboard
アプリ詳細: https://www.aiapps.jp/apps/show.php?slug=vegetable-drop
デモ環境は 1 時間以内に自動構築されます:
https://www.aiapps.jp/demo/vegetable-drop/
ご利用ありがとうございます!
Echo
Iris