如何将Next 13.4.4 Js项目转换为PWA?

bweufnob  于 2023-06-05  发布在  PWA
关注(0)|答案(1)|浏览(164)

我目前正在进行一个Next Js 13项目,我需要将其转换为PWA。
我一直在尝试遵循next-pwa文档,但由于其结构,很难将其应用于Next 13项目。该项目是完美的工作,但我只需要将其转换为PWA。
谢谢大家的好意!这是我的项目结构:
Project Structure

jc3wubiy

jc3wubiy1#

1.更新next.config.js

/** @type {import('next').NextConfig} */

const withPWA = require("next-pwa")({
  dest: "public",
  register: true,
  skipWaiting: true,
  disable: process.env.NODE_ENV === "development",
});

module.exports = withPWA({
  reactStrictMode: true,
});

1.在layout.tsx中添加

<head>
          <link
              rel="manifest"
              href="/manifest.json"
          />
      </head>

1.在公共文件夹中添加带有图像的manifest.json(使用manifest generator)(不要忘记选择独立选项)

  1. npm run build
  2. npm启动
    1.打开chrome

相关问题