必要なもの全部入ってるのに！！まごついた！！
まごつき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部分に追記する内容
{
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*']
}
}
}
gatsby-plugin-manifestで必要なファビコンは自動生成される
helmetでのheadへの追記とか書いてる記事あるけどいらないっぽい
Mac,iPad,iPhoneでホームに追加。サイトひと通り見た後ならオフラインで動くのを確認。
よかったよかった。
最新のPWA対応非対応環境は調べてね。
追記
この記事のタイトルにたったこれだけ！と追記した。
たったこれだけだよ〜
見れるようになるまで検証に時間かけるのなんて私だけだった、というくらいみんなサクサク実装できればいいな。
最近過渡期ばっかり。楽しい構築ライフを。
ワールドピース。