GatsbyでPWAを実装する

マニュフェストファイルを追加する

yarn add gatsby-plugin-manifest 

gatsby-config.jsにプラグインの設定を追加する。
optionsではマニフェストのプロパティを指定します。

Name:アプリ名を指名
Short_name:アプリの短縮名を指定
Start_url:アプリを開始するURLを指定
Background_color:アプリの起動画面の背景色を指定
theme_color:テーマカラーを指定
display:アプリの表示モードを指定（standaloneを指定するとネイティブアプリと同じような表示を行う）
icon:アプリのアイコンを指定

{
resolve: `gatsby-plugin-manifest`,
options: {
  name:`アプリ名`,
  short_name:`アプリの短縮名`,
  start_url:`アプリを開始するURL`,
  background_color:`アプリの起動画面の背景を指定`,
  theme_color:`テーマカラーを指定`,
  display:`アプリの表示モードを指定`,
  icon:`アプリのアイコンを指定`,
　},
},

オフラインに対応する

yarn add gatsby-plugin-offline

gatsby-config.js内にgatsby-plugin-offlineの設定をgatsby-plugin-manifestの後に記述する
（生成されたmanifest.webmanifestをキャッシュできるようにするため）

`gatsby-plugin-offline`

動作確認

・アイコンの表示
・アプリとしての表示
・オフライン表示
を確かめて、正常に動作するか確認します

参考文献：
Webサイト高速化のための静的サイトジェネレーター活用入門　GatsbyJSで実現する高速＆実用的なサイト構築