カテゴリー: React

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

まごつき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対応非対応環境は調べてね。

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