モダンWebアプリの基盤となる Progressive Web App 技術。オフライン動作とプッシュ通知を実現します。
日野 こむぎ
PWA って何の略?
藤森 さやか 先生
PWA (Progressive Web App) は、Webアプリにネイティブアプリ的な機能を持たせる技術群よ。
インストールできたり、オフラインで動いたり、プッシュ通知が送れたりするのが特徴ね。
青木 澪
中核技術がService Worker。
ブラウザのバックグラウンドで動くスクリプトで、ネットワークリクエストの傍受・キャッシュ管理・プッシュ通知を担当するの。
桃井 すみれ
オフラインで動く仕組みって、どうなってるのぉ?
青木 澪
Service Worker が事前に必要なファイルをキャッシュしておき、オフライン時はキャッシュから返す。
データの永続化にはWeb Storage (localStorage / sessionStorage) や IndexedDB を使うわ。
藤森 さやか 先生
PWAに必要な3要素: HTTPS・Webアプリマニフェスト (manifest.json)・Service Worker。
これらが揃うと、ホーム画面に追加できるようになるのよ。
青木 澪
本サイトもPWA対応していて、一度読んだ記事なら通信なしでも閲覧できるのよ。
確認クイズ
PWA の中核技術で、ブラウザのバックグラウンドで動作し、ネットワークリクエストの傍受やキャッシュ管理を担うのはどれか。
- Web Worker
- Service Worker
- Shared Worker
- Cache API
こたえを見る
正解: 2. Service Worker
Service Worker はブラウザのバックグラウンドで動作するスクリプトで、PWAの中核技術です。ネットワークリクエスト傍受・キャッシュ管理・プッシュ通知を担当します。Web Worker は重い計算のオフロード、Cache API は Service Worker から使う API です。