導入の参考
ディレクトリ構成
.
├── README.md
├── next-env.d.ts
├── next.config.js
├── node_modules
├── out
├── package-lock.json
├── package.json
├── public
├── src
└── tsconfig.json
エラーとやったこと
.next/sw.jsができるのでpathが通らず読み込めない。
public/にできてほしいがなぜかできない。以下導入手順
1. next-pwa install
npm i next-pwa
next-pwa: v.5.5がインストールされた。
2. next.config.jsを修正
next.config.js
/** @type {import('next').NextConfig} */
const withPWA = require('next-pwa')
const nextConfig = withPWA({
pwa: {
dest: 'public',
},
reactStrictMode: true,
trailingSlash: true,
})
module.exports = nextConfig
3. icon作成 & 配置
iconを作成して/public/に配置
https://ao-system.net/favicongenerator/
4. 読み込み
_document.tsx
<Head>
<meta name="theme-color" content="#fff" />
<link
rel="icon"
type="image/png"
sizes="48x48"
href="/icon-48x48.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="/icon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="/icon-16x16.png"
/>
<link rel="manifest" href="/manifest.json" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png"></link>
</Head>
5. npm run build
...
> [PWA] Service worker: .../.next/sw.js
> [PWA] url: /sw.js
なぜか.next/にできる。/sw.jsでアクセスしたときにこれでは読み込めずエラーになる。
解決法
version下げるとpublic/に作ってくれるようになった。うーん。。。
npm i next-pwa@~5.4
*こういうエラーも一緒に解決した
Uncaught (in promise) bad-precaching-response: bad-precaching-response :: [{"url":"https://domain/_next/server/middleware-build-manifest.js","status":404}]
一応gitのissues
https://github.com/shadowwalker/next-pwa/issues/288
Comments
Let's comment your feelings that are more than good