PWA
PWAとは
PWA(Progressive Web App)は、Webサイトをネイティブアプリのように使えるようにする技術群の総称です。ホーム画面へのインストール、オフラインでの動作、プッシュ通知など、これまで「アプリでしかできなかった体験」をWebで実現します。
アプリストアを経由せずURLひとつで配布でき、更新も配信側で完結する — Webの手軽さとアプリの体験を両立できるのが魅力です。
PWAを支える3つの要素
| 要素 | 役割 |
|---|---|
| Service Worker | ページとネットワークの間に立つ [[JavaScript]]。リクエストへの割り込み・キャッシュ・オフライン対応を担う |
| Web App Manifest | アプリ名・アイコン・起動時の見た目を定義するJSON。インストールに必要 |
| HTTPS | PWAの動作条件。[[HTTPS・TLS]] での配信が必須 |
Service Workerの働き
Service Worker は、ブラウザとサーバーの間に立つプロキシのようなスクリプトです。ページとは別のスレッドで動き、ページを閉じても一定の処理を継続できます。
- キャッシュ制御 — 静的ファイルを Cache Storage に保存し、2回目以降は通信せずに即表示。オフラインでも動作する
- バックグラウンド処理 — プッシュ通知の受信、オフライン時の送信の再試行など
- 更新の管理 — 新しいバージョンの検知と入れ替え
キャッシュを積極的に使うため、[[Webパフォーマンス最適化]] の面でも効果があります。一方で「古いキャッシュが残って更新が反映されない」という PWA 特有のトラブルもあり、更新戦略の設計が重要です。
初学者向けポイント
- 開発者ツールの Application パネルで、Service Worker の状態・Manifest・キャッシュの中身を確認できます
- localhost は例外的に HTTPS なしで動くため、開発は普通に行えます
- アプリ内のデータ保存には [[WebストレージとCookie]] で扱う localStorage や IndexedDB を組み合わせます
- Vite などのビルドツールにはPWA化用のプラグインがあり、Service Worker を手書きせずに導入できます
関連技術とのつながり
- [[WebストレージとCookie]] — オフライン時のデータ保持を支える
- [[HTTPS・TLS]] — PWA の動作に必須の前提条件
- [[Webパフォーマンス最適化]] — キャッシュによる高速化はPWAの主要な恩恵
- [[JavaScript]] — Service Worker はJSで書く
- [[HTTPキャッシュ]] — ブラウザ標準のキャッシュ層。更新が反映されないときは Service Worker とどちらが原因かを切り分ける
Q: PWAの説明として正しいのはどれ?
- [x] Webサイトをアプリのようにインストール・オフライン利用できるようにする技術群
- [ ] アプリストア専用のネイティブアプリ開発言語
- [ ] サーバーを不要にするデータベース技術
解説: PWAはインストール・オフライン動作・プッシュ通知など、アプリ的な体験をWebで実現する技術の総称です。
Q: Service Workerの役割として正しいのはどれ?
- [ ] HTMLの文法エラーを自動修正する
- [x] ページとネットワークの間でリクエストに割り込み、キャッシュやオフライン対応を担う
- [ ] CSSをJavaScriptに変換する
解説: Service Workerはプロキシのように通信に割り込み、キャッシュ制御やオフライン対応を実現します。
Q: PWAの動作に必須の条件はどれ?
- [ ] アプリストアでの審査
- [ ] ネイティブアプリ版の同時公開
- [x] HTTPSでの配信
解説: PWA(Service Worker)はHTTPSでの配信が必須です。開発用のlocalhostのみ例外です。