【Gatsby + Contentful】PWA対応の仕方

PWAとは

Progressive Web Appsの略。WebアプリケーションのUX向上を目的とした、WEBページ/WEBアプリケーションとネイティブアプリの利点をいいとこ取りできる仕組み。モバイル端末でページを表示する時にネイティブアプリのような挙動をさせることが出来る。Google(Android Chrome)を中心に策定・展開されており、ユーザーとのエンゲージメントの向上やコンバージョン・リテンションの改善に効果があるとされる。 参考:いまさら聞けないPWAとAMP

GatsbyでのPWA対応

gatsby-plugin-manifestgatsby-plugin-offlineをインストールします あとはgatsby-config.jsに追記

 {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `アプリ名`,
        short_name: `アプリの短縮名`,
        start_url: `アプリの開始URL(/)`,
        background_color: `起動画面の背景色`,
        theme_color: `ツールバーの色`,
        display: `表示モード`,
        icon: `アイコンのパス`,
      },
  },
 `gatsby-plugin-offline`,

ちなみに自分のはこのようにしています

{
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `N's Dump Logs`,
        short_name: `N's Log`,
        start_url: `/`,
        background_color: `#ffffff`,
        theme_color: `#663399`,
        display: `standalone`,
        icon: `src/images/icon.png`,
      },
 },

PWA対応

About

現役フリーランスエンジニアの勉強・備忘録。
バックエンドがメイン。フロントからインフラまで興味があり、色々やっています