Why not login to Qiita and try out its useful features?

We'll deliver articles that match you.

You can read useful information later.

3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

[next.js] next-pwaが動かない。。

Last updated at Posted at 2022-08-01

導入の参考

ディレクトリ構成

.
├── 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

3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up

Comments

No comments

Let's comment your feelings that are more than good

3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?