目的
NextJS で作成したアプリを PWA 化するときの手順をメモ。
手順
1. manifest.json を作成
{
"name": "App Name",
"short_name": "App Name",
"icons": [
{
"src": "./logo-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "./logo-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#ffffff",
"background_color": "#004740",
"display": "standalone",
"orientation": "portrait",
"scope": "/",
"start_url": "/"
}
icons は最低でも192px と 512px の２つが必要。
For Chromium, you must provide at least a 192x192 pixel icon, and a 512x512 pixel icon.
引用元: https://web.dev/add-manifest/#icons
display は、standalone を指定する事で、Native アプリのように、アドレスバーを非表示にしたり、通常のブラウザとは別でアプリを表示できるようになる。
orientation は、"portrait" を指定する事で画面を縦向きに固定できる。
その他のオプションは、「Nuxt.js(SPA)のWebサービスにmanifest.jsonを置くだけでホームに追加できるようになった」という記事で分かりやすく解説してくれています。
2.必要なファイルを読み込む
_document.js もしくは、_app.js で、manifest.jsonなどを読み込む。
import Document, { Html, Head, Main, NextScript } from "next/document";
class MyDocument extends Document {
render() {
return (
<Html>
<Head>
<link rel="manifest" href="/manifest.json" />
<link rel="apple-touch-icon" href="/icon.png"></link>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="mobile-web-app-capable" content="yes" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;
3.next-pwa をインストール
$ npm install next-pwa --save
4. next.config.json を設定
next.config.json を以下のように設定。
const withPWA = require('next-pwa')({
dest: 'public'
})
module.exports = withPWA({
// next.js config
})
で、npm run build をすると、public/ ディレクトリ内に、sw.jsとworkbox-***.js が生成される。これが servicework 用のファイル。自動で読み込まれる。
このファイルはビルド時に毎回生成されるので、.gitignore に以下のように追記しておく
**/public/sw.js
**/public/workbox-*.js
**/public/worker-*.js
**/public/sw.js.map
**/public/workbox-*.js.map
**/public/worker-*.js.map
備考
- apple-touch-icon の背景が透明だと、クリックして拡大表示までの背景が透明になり（デフォルトはbackground-color が適用？）不自然なので、アイコン側で色をつける事