【PWA】ざっくりPWAまとめ

アプリ開発にチャレンジしようと思っていたが、今までのWebを生かせるPWAというのを知ったのでまとめた。

PWAとは

スマートフォンアプリのようなWebサイトにできる技術のこと。
以下のように現在のネイティブアプリ特有の機能をWebサイトに追加することができる。

1. プッシュ通知
2. 表示スピードの改善（プリキャッシュ機能）
3. オフラインでの閲覧（これもプリキャッシュ機能）
4. ホーム画面へのアイコン追加

PWAの実装

以下の通りにやればOK

1. https接続可能にする
2. アプリケーションマニフェストの作成
3. Service Worker の登録
4. PWAになっていること確認。

https接続

たいていのサイトはhttps対応だと思うので割愛。

アプリケーションマニフェストの作成

設定する項目が多いのでマニフェストジェネレーターで作成してみましょう。

Manifest Generator
https://app-manifest.firebaseapp.com/
manifest.jsonファイルができたら、index.htmlと同じディレクトリに保存。

※なお、PWAbuilderを使うと、より簡単にmanifest.jsonとserviceworkerが作成できるようである。
https://www.pwabuilder.com/

ServiceWorkerの作成

こちらが詳しい。
https://workabroad.jp/posts/2215

PWAの確認

Lighthouseで計測し、Progressive Web Appと出ればOK

まとめ

とりあえずファイルを作ればOK