必要なもの全部入ってるのに！！まごついた！！

まごつき2~3時間掛かった。
時間もったいないのでワールドピースのためにシェア。
ワールドピース。

何回言えばわかる。最初に読むのはqiitaじゃなく公式だよ！！！わかったかい！

注意点、このページの内容はご参考までで、実際にはgatsby公式のプラグイン紹介ページから、最新のgatsby-configの書き方を参照すること！

gatsby-plugin-manifest | Gatsby
https://www.gatsbyjs.com/plugins/gatsby-plugin-manifest/#using-with-gatsby-plugin-offline

さて。

PWAの機能の中でも今回やりたかっただたこと

・オフラインで閲覧できる
・アプリ的にsafariじゃなくスタンダロンで起動させる

starterとしてgatsby-starter-default使用していたら必要なプラグインは入っているよ！ヤッタネ！！

・gatsby-plugin-manifest
・gatsby-plugin-offline

今回やりたかっただたことの設定したのこと

→公式参照してgatsby-configの設定きちんと書けばできる。

オフラインで閲覧

→gatsby-plugin-offlineの設定を追記する
gatsby-starter-defaultだとコメアウトされてる

スタンダロンで起動

→gatsby-starter-defaultのgatsby-plugin-manifestの設定を調整

gatsby-configのplugins部分に追記する内容

[code lang=text]
{
resolve: 'gatsby-plugin-manifest',
options: {
name: `GatsbyJS`,
short_name: `GatsbyJS`,
start_url: `/`,
background_color: `#f7f0eb`,
theme_color: `#a2466c`,
display: `standalone`,
icon: `src/images/icon.png`, // This path is relative to the root of the site.
cache_busting_mode: 'none'
}
},
{
resolve: 'gatsby-plugin-offline',
options: {
workboxConfig: {
globPatterns: ['**/icon-path*']
}
}
}
[/code]

gatsby-plugin-manifestで必要なファビコンは自動生成される

helmetでのheadへの追記とか書いてる記事あるけどいらないっぽい

Mac,iPad,iPhoneでホームに追加。サイトひと通り見た後ならオフラインで動くのを確認。

よかったよかった。
最新のPWA対応非対応環境は調べてね。

追記
この記事のタイトルにたったこれだけ！と追記した。
たったこれだけだよ〜
見れるようになるまで検証に時間かけるのなんて私だけだった、というくらいみんなサクサク実装できればいいな。
最近過渡期ばっかり。楽しい構築ライフを。
ワールドピース。