はじめに

Gatsbyで作ったブログをPWAに対応しましたemoji-tada

PWA(Progressive Web App)とはWebページ/アプリでもネイティブアプリのようなUXを提供するためのもので、Googleが中心となって策定しています。

PWA対応するとページ読み込み速度向上やオフラインでも動いたり、スマホのホーム画面に追加できたりなどのメリットがあります。

Gatsbyではデフォルトのスターターをインストールした時点で、PWA用のプラグイン(下記2つ)が導入済みなので、簡単な設定をするだけでPWAに対応できてしまいます。

(スターターによっては初期インストールされていない場合がありますので注意してください)

gatsby-plugin-manifest

PWA対応で必要となるmanifest.webmanifestを生成するプラグインです。

Terminal
// npm
npm install --save gatsby-plugin-manifest

// yarn
yarn add gatsby-plugin-manifest

gatsby-config.jsで設定をします。

gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: 'gatsby-plugin-manifest',
      options: {
        name: 'app name',
        short_name: 'app short_name',
        description: 'app description',
        start_url: `/`,
        background_color: '#fff',
        theme_color: '#fff',
        display: 'minimal-ui',
        icon: 'content/assets/icon.png', // アイコンのパス
        icon_options: {
          purpose: 'maskable', // maskable iconであることを明示する
        },
      },
    },
  ],
}

これでサイトをビルドすると自動でサイズ別のアイコンを生成してくれます。

生成された画像はChromeだとデベロッパーツール(Application > Manifest)で確認できます。

developer-tool

またはMaskable​.app Editorを使っても確認や編集ができます。

maskable

こちらだとレイヤーを組んで編集できたり、編集した画像をエクスポートできたりするので便利です。

gatsby-plugin-offline

オフラインでもサイトが動作するようにService Workerを生成するプラグインです。
Service Workerを利用するため、サイトのSSL化が必須ですので注意してください。

Terminal
// npm
npm install --save gatsby-plugin-offline

// yarn
yarn add gatsby-plugin-offline

こちらもgatsby-config.jsで設定します。

gatsby-config.js
{
  plugins: [
    {
      resolve: 'gatsby-plugin-manifest',
      options: {
        ...
      }
    },
    'gatsby-plugin-offline' // 必ずgatsby-plugin-manifestのあとに指定
  ]
}

一点注意してほしいのは、両方のプラグインをgatsby-config.jsに設定するとき、必ずgatsby-plugin-manifestを先に書いて、そのあとにgatsby-plugin-offlineを書く必要があります。

確認

本番環境などにデプロイしてlighthouseでPWA対応できているか確認できます。

lighthouse

スマホのホーム画面にPWA対応したサイトを追加してみると、アプリみたいにアイコンがきちんと設定されていますemoji-clap

sp-home

参考