はじめに
Gatsbyで作ったブログをPWAに対応しました
PWA(Progressive Web App)とはWebページ/アプリでもネイティブアプリのようなUXを提供するためのもので、Googleが中心となって策定しています。
PWA対応するとページ読み込み速度向上やオフラインでも動いたり、スマホのホーム画面に追加できたりなどのメリットがあります。
Gatsbyではデフォルトのスターターをインストールした時点で、PWA用のプラグイン(下記2つ)が導入済みなので、簡単な設定をするだけでPWAに対応できてしまいます。
(スターターによっては初期インストールされていない場合がありますので注意してください)
gatsby-plugin-manifest
PWA対応で必要となるmanifest.webmanifest
を生成するプラグインです。
// npm
npm install --save gatsby-plugin-manifest
// yarn
yarn add gatsby-plugin-manifest
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)で確認できます。
またはMaskable.app Editorを使っても確認や編集ができます。
こちらだとレイヤーを組んで編集できたり、編集した画像をエクスポートできたりするので便利です。
gatsby-plugin-offline
オフラインでもサイトが動作するようにService Worker
を生成するプラグインです。
Service Workerを利用するため、サイトのSSL化が必須ですので注意してください。
// npm
npm install --save gatsby-plugin-offline
// yarn
yarn add gatsby-plugin-offline
こちらも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対応できているか確認できます。
スマホのホーム画面にPWA対応したサイトを追加してみると、アプリみたいにアイコンがきちんと設定されています