next-pwaを使ってPWA対応する

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の結果をみて、特に問題がなければ以下のように表示されます。

参考サイト

• Next.js で作成した Web アプリを PWA 対応する
• Next.jsでサクッとPWA対応
• Nextjs(next.js 9+)、15分位でPWAに対応するためにやること
• PWAの”Manifest doesn’t have a maskable icon”の解決