TTIL

2021-12-02 PWA対応について

PWA(Service Worker)のデバッグ

PWA や Service Worker は https の対応が必須とされている。

開発中は https を用意できないことが多いので localhost (127.0.0.1) でアクセスするとPWAやServiceWorkerを有効化することができる。

HTTPS が必要 開発中は、localhost から Service Worker を使用できますが、サイトにデプロイするには、サーバーで HTTPS が設定されている必要があります。

Service Worker の紹介 - Web Fundamentals - Google Developers

See also. Service worker の使用 - Web API | MDN

DevToolを使う

DevTool の Application タブにて Manifest の確認をすることができる。

もしmanifestファイルにエラーがあれば、ここで警告メッセージが出る。

DevTools の新機能 (Chrome 93) - Chrome Developers

PWA A2HS

A2HS = Add to HomeScreen = ホーム画面に追加

ホーム画面に追加 - プログレッシブウェブアプリ (PWA) | MDN

PWA の display 設定について

display - ウェブアプリマニフェスト | MDN

文書でいろいろ書かれているが実際に追加してみてイメージを掴むとわかりやすい。

Webアプリマニフェストのdisplayによる違い – ugokay