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

参考サイト

About the author

大阪でフロントエンドエンジニアをしています。写真を撮るのが趣味です。よかったら500pxに載せてる写真も見てください。
web上に公開しているので、正確さに可能な限り努力してますが、個人の備忘録程度に書いてるので、ご自身の判断で参考程度に読んでください。
間違いやご意見があれば、コンタクトやSNSに気軽にご連絡ください。

Read next

Category

  • web
  • 雑記