🦁

【PWA】ざっくりPWAまとめ

1 min read

アプリ開発にチャレンジしようと思っていたが、今までの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

Discussion

ログインするとコメントできます