2020年07月09日

【Gatsby + Contentful】PWA対応の仕方

PWAとは

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

GatsbyでのPWA対応

gatsby-plugin-manifestとgatsby-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対応