web
next-pwaを使ってPWA対応する
公開日:2022年2月20日
最終更新日:2022年2月20日
next-pwaを使ってPWA対応することで、ホーム画面に追加できるようにしたり、オフライン対応をやってみます
ライブラリ
next-pwa
を使います。
yarn add next-pwa
next.config.js
next.config.jsを以下のように書きます。
const withPWA = require('next-pwa')
const runtimeCaching = require('next-pwa/cache')
/** @type {import('next').NextConfig} */
const config = {
pwa: {
dest: 'public',
runtimeCaching,
},
reactStrictMode: true,
}
module.exports = withPWA(config)
manifest.webmanifest (manifest.json)を作る
manifestはジェネレーターを使うと簡単に作れます。
こちらのサイトで作りました。アイコン用に512x512の画像が必要です。
https://www.simicart.com/manifest-generator.html/
書き出された manifest.webmanifest
を見ると以下のようになっています。
{
"theme_color": "#f69435",
"background_color": "#f69435",
"display": "standalone",
"scope": "/",
"start_url": "/",
"name": "test",
"short_name": "test",
"icons": [
{
"src": "/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icon-256x256.png",
"sizes": "256x256",
"type": "image/png"
},
{
"src": "/icon-384x384.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
ただ、これだと後にLighthouseでPWAのチェックをするときに、maskableアイコンで引っかかるので追記しておきます。
{
"theme_color": "#f69435",
"background_color": "#f69435",
"display": "standalone",
"scope": "/",
"start_url": "/",
"name": "test",
"short_name": "test",
"icons": [
{
"src": "/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/icon-256x256.png",
"sizes": "256x256",
"type": "image/png"
},
{
"src": "/icon-384x384.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
},
{
"src": "./icon-512x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
]
}
Headに追記
headタグに以下の3つを追記します。theme-color
や apple-touch-icon
も書かないとLighthouseのチェックで怒られます。
<meta name="theme-color" content="#f9a8d4" />
<link rel="manifest" href="/manifest.webmanifest" />
<link rel="apple-touch-icon" href="/icon-192x192.png" />
確認する
以下のコマンドでビルドして、起動します。
yarn build
yarn start
アドレスバーを見るとインストールボタンが表示されてると思います。
あとは、デベロッパーツールのネットワークタブからオフラインにしてリロードしてみても、ちゃんと表示されます。
Lighthouseで確認
デベロッパーツールのLighthouseを開き、計測をします。
PWAの結果をみて、特に問題がなければ以下のように表示されます。
参考サイト
Read next
- 2022年1月30日Next.js × microCMSで目次をつくる
- 2022年1月30日Next.js × microCMSでリッチエディタで書いた記事の画像にloading属性を付ける
- 2022年1月23日Next.js × algoliaで検索機能を実装する