GatsbyのPWA対応をためした
やるやる言っていたのですがずっと心を病んでいてできてなかったので、試してみました。
PWA対応をするには2つのプラグインを入れればいいみたいで、
- gatsby/packages/gatsby-plugin-manifest at master · gatsbyjs/gatsby
- gatsby/packages/gatsby-plugin-offline at master · gatsbyjs/gatsby
それがこの二つ。上がマニフェストを作成してくれるもので、したがサービスワーカーを作成して、ページのキャッシュを行ってくれるという感じです。
gatsby-plugin-offlineはすでに使ったstarterに含まれていたので、gatsby-plugin-manifestだけインストールして、軽く設定してみた。
READMEにも書いているが、通常様々な解像度のアイコンを用意しなければならないが、大きいサイズのアイコンだけ用意しておけばgatsby-plugin-manifestがビルド処理時に適切なサイズにリサイズして吐き出してくれる。
実際にビルドを試してみたら、以下のような感じで出力されていた。
至れり尽くせりですね、って感じ。
で実際実行してみたらどうなったかというと。
こんな感じになった。(Android端末で実行)
ホーム画面への追加もできて、指定したアイコンがアプリケーションのアイコンとして表示された。
ところが、Auditをしてみたらやたらとスコアが低く謎だったので、要検証かなと言ったところ。
もう心が限界なので寝ます。