![thumbnail](/static/867a90b214c402ad75247f6878c9b2c0/60279/gatsby-pwa.png)
なにこれ
スマホでネイティブアプリっぽいUXを実現するため、GatsbyでPWA対応した時のメモです。 以下の4つが可能になりました。
前提
- ServiceWorkerを利用するため、SSL化が必須です。そのためブログはhttpsでアクセスできるようにしておく必要があります。
対応概要
Gatsbyはスターターの時点で、PWA用のプラグイン下記2つが導入済みなので、設定を少々いじるだけで素敵なPWA対応ができます。
上記両方のプラグインをgatsby-config.js
に定義する場合、gatsby-plugin-manifest
を必ず先にする必要があります。
gatsby-plugin-manifestの設定
PWAで必須のmanifest.webmanifest
を生成してくれるプラグインです。
サイトにmanifest.webmanifest
を配置することで、スマホでブログを見たときに、ネイティブアプリのようなUXを実現できます。
manifest.webmanifestとは
下記3サイトで概要を理解しました。
とくにGoogleのサイトでは、設定ごとにどのようなUXになるかをアニメーションで示しているので、イメージをつかみやすいです。
アイコン画像は全サイズ用意した
manifest.webmanifest
ではサイズ別アイコンを指定する必要があります。
プラグインでは1つ大きなアイコンを用意すれば、全サイズ自動生成してくれる...とありますが、僕はビルド時にエラーが出たので、
やむなく全サイズのアイコンを用意しました。
ただ全部手動でというわけではなく、Web App Manifest Generatorという便利なサイトを使いました。アイコンを放り込むと全サイズのアイコンを作ってくれます。
参考:3分でPWAのmanifest.jsonと各サイズのアイコンを作るApp Manifest Generatorの紹介 | Qiita
作ったアイコンは、static/icons
配下に格納します。
├── static
├── icons
│ ├── app-sns.png
│ ├── icon-128x128.png
│ ├── icon-144x144.png
│ ├── icon-152x152.png
│ ├── icon-192x192.png
│ ├── icon-384x384.png
│ ├── icon-512x512.png
│ ├── icon-72x72.png
│ └── icon-96x96.png
gatsby-config.jsの設定
下記のようにしました。
plugins: [
// ・・・
{
resolve: 'gatsby-plugin-manifest',
options: {
name: 'Takumon blog',
short_name: 'Takumon blog',
start_url: '/?utm_source=homescreen',
background_color: '#333', // アプリ起動時の背景色
theme_color: '#d23d29', // ブラウザツールバーの色
display: 'minimal-ui', // アプリのスタイル
"icons": [ // アイコン設定(サイズ別アイコン自動生成機能を使わない場合は、サイズ毎に設定が必要)
{
"src": "icons/icon-72x72.png",
"sizes": "72x72",
"type": "image/png"
},
{
"src": "icons/icon-96x96.png",
"sizes": "96x96",
"type": "image/png"
},
// サイズ別のアイコン設定
],
},
},
// ・・・
}
設定のテスト
実際スマホからアクセスして試すこともできますが、
正しくマニフェストがブラウザに読み込まれているかは、PCからChrome開発者ツールのApplication
> Manifest
で確認できます。
gatsby-plugin-offlineの設定
ネットワークにつながりにくい環境、オフライン環境でもGatsbyのサイトが動くようにServiceWorkerを生成するためのプラグインです。
gatsby-plugin-manifest
とあせて使う場合は、必ずこのプラグインを後に定義する必要があります。
このプラグインはWorkboxの設定を従っており、必要に応じてgatsby-config.js
で上書くという感じです。
Workboxは宣言的な記述だけで最適なServiceWorkerのコードが生成できるライブラリで、下記にわかりやすく書かれていました。
参考:ServiceWorkerを簡単に書けるworkbox-swの使い方 | Qiita
gatsby-config.jsの設定
とくに何もいじってません。
複雑なオフライン処理をするなら修正するかもしれませんが、基本的にWorkboxに従っておけば問題なさそうでした。
plugins: [
// ・・・
`gatsby-plugin-offline`, // 必ずgatsby-plugin-manifestの後に定義する
// ・・・
}
まとめ
これまたプラグインで簡単にPWA対応できてしまいました。(あまりプログラミングをしてる感じがありません...)
次あたりは、プログラミングっぽい記事を書きたいと思います🍅
関連記事
![thumbnail](/static/e3718d9c46b9e6390ec8781d3d295949/30862/migrate-gatsby-v2-to-v5.png)
Gatsbyバージョンアップ(v2 to v5)
![thumbnail](/static/b3965591d312194743fbd9868eac7907/30862/optimizations-for-faster-gatsby-builds.png)
Gatsbyビルドチューニング ビルド時間を15分から7分に短縮するためのTips 7選
![thumbnail](/static/39a16984ebf17340c4d29e1e87fa8697/30862/error-about-window-is-not-available-during-server-side-rendering-gatsby.png)
Gatsbyビルドエラー「window is not defined」への対処法
![thumbnail](/static/4306b38112b6384b2422906d73caa495/981a4/gatsby-rss-reader-with-netlify-zapier.png)
Gatsby + Netlify + ZapierでRSSリーダーを作る
![thumbnail](/static/e8435c7b283660f268f0ded9c5058e79/981a4/gatsby-image-of-remote-in-building-by-using-create-remote-file-node.png)