← 工房に戻る
舞台裏の道具

pwa-kit

Webアプリのオフライン動作と更新を支える、小さな部品。

pwa-kit

プロジェクトについて

Bitey の更新メカニズムを一般化したものです。必要のない許可を求めるのではなく、自分自身を更新し、後で更新する PWA です。

コピー sw.js そして pwa-update.js アプリの Web ルートに接続し、それらを接続します。ビルド ステップ、バンドラー、依存関係はありません。これが重要です。これらのアプリは静的ディレクトリです。

新しい Service Worker は、タブが閉じるのを待たずにすぐにインストールされ、アクティブ化されます。開いている各ウィンドウは現在の作業を安全に完了してから、最新バージョンにシームレスにリロードします。

ギャラリー

機能

  • ⚡ 即時アクティベーション: 新しいワーカーはインストールして引き継ぎますが、開いているブラウザーのタブに古くなったワーカーが何日も滞留することはありません。
  • 🛡️ 未保存の作業保護 (isBusy): 労働者は盲目的にナビゲートするのではなく、質問します。保留中の編集またはフォームの状態が安全に解決されるまで、ページのリロードは延期されます。
  • 🌐 ネットワークファーストの鮮度: オンライン要求は常に優先され、デプロイされた変更が次回のリロード時に確実に有効になり、オフライン時にはキャッシュにフォールバックされます。
  • 🔔 セッションストレージのクリーンアップ通知: 更新フラグによる URL クエリ文字列の汚染を回避し、アプリ内のトーストを通じてユーザーに明確に通知します。
  • 🚨 内蔵キャッシュエスケープハッチ: ウェッジされたクライアントのための緊急登録解除およびキャッシュ無効化メカニズムが含まれています。