ゆるふわ技術日誌

エンジニア見習いの悪戦苦闘日記

GatsbyのPWA対応をためした

やるやる言っていたのですがずっと心を病んでいてできてなかったので、試してみました。

PWA対応をするには2つのプラグインを入れればいいみたいで、

それがこの二つ。上がマニフェストを作成してくれるもので、したがサービスワーカーを作成して、ページのキャッシュを行ってくれるという感じです。

gatsby-plugin-offlineはすでに使ったstarterに含まれていたので、gatsby-plugin-manifestだけインストールして、軽く設定してみた。

READMEにも書いているが、通常様々な解像度のアイコンを用意しなければならないが、大きいサイズのアイコンだけ用意しておけばgatsby-plugin-manifestがビルド処理時に適切なサイズにリサイズして吐き出してくれる。

実際にビルドを試してみたら、以下のような感じで出力されていた。

f:id:uutarou:20180826230133p:plain

至れり尽くせりですね、って感じ。

で実際実行してみたらどうなったかというと。

f:id:uutarou:20180826230214p:plain

こんな感じになった。(Android端末で実行)

ホーム画面への追加もできて、指定したアイコンがアプリケーションのアイコンとして表示された。

ところが、Auditをしてみたらやたらとスコアが低く謎だったので、要検証かなと言ったところ。

もう心が限界なので寝ます。