将 Next.js 应用转换为 PWA
要将 Next.js 应用转换为 PWA，我们需要以下这些东西：
next-pwa包裹- 服务人员
- 宣言和图标
- 可遮罩图标
- 元标签
1.next-pwa包装
要将您的 Next.js 应用转换为 PWA，您需要通过以下方式安装此软件包：npm或者yarn
运行以下命令进行安装：
npm i next-pwa # npm
yarn add next-pwa # yarn
安装完成后，请next.config.js按以下步骤进行更新：
// next.confg.js
const withPWA = require("next-pwa");
module.exports = withPWA({
//...before
pwa: {
dest: "public",
register: true,
skipWaiting: true,
},
//...after
});
2. 服务人员
我们不需要添加外部服务工作线程，next-pwa它会自动处理并生成，sw.js所以我们无需进行任何操作。
├── public
| ├── sw.js
3. 宣言和图标
要生成图标和清单文件，请转到PWA 清单文件。
填写所有详细信息并附加icon512x512 的文件，它将为您生成图标和清单，您可以下载 zip 文件。
进入你的公共目录，创建一个文件夹icons，并将所有图标放入该文件夹中，如下所示
├── public
| ├── icons
| | ├── icons.png
之后，在manifest.json你的电脑上创建一个文件public/，它应该看起来像这样 -
// manifest.json
{
"theme_color": "#000",
"background_color": "#fff",
"display": "standalone",
"scope": "/",
"start_url": "/",
"name": "pwa",
"short_name": "pwa",
"description": "pwa",
"icons": [
{
"src": "icons/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "icons/icon-256x256.png",
"sizes": "256x256",
"type": "image/png"
},
{
"src": "icons/icon-384x384.png",
"sizes": "384x384",
"type": "image/png"
},
{
"src": "icons/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
]
}
之后，我们需要favicon前往Favicon Generator 网站，上传您的主图标，它会为您生成其余图标，然后下载生成的压缩文件。之后，我们只需要两个图标，并将favicon.ico它们apple-touch-icon添加到您的……public/
路径如下 -
├── public
| ├── apple-touch-icon.png
| ├── favicon.ico
| ├── icons
| | ├── icon-192x192.png
| | ├── icon-256x256.png
| | ├── icon-384x384.png
| | ├── icon-512x512.png
| | └── maskable.png
| ├── manifest.json
4. 可遮罩图标
要制作 Maskable 图标，我们需要访问Maskable Editor，上传您的图标并进行编辑。
编辑完成后导出图标，但要注意比例，
始终选择正方形比例并记住该比例，因为我们稍后会用到它。manifest
下载完成后，icon将其放入……public/icons/
├── public
| ├── icons
| | └── maskable.png
并将其添加到manifest.json
// manifest.json
"icons": [
// ...
{
"src": "maskable.png",
"sizes": "48x48",
"type": "image/x-icon",
"purpose": "maskable"
},
//...
]
这里需要指定可遮罩图像的大小。如果图像大小为，则应512x512在此处指定。json"sizes": "512x512"
5. 元标签
为了实现所有这些功能，我们需要一些元标签，请将它们放在Head应用程序的 `<head>` 标签内，这些标签如下所示。
// index.js
<Head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta name="description" content="description of your project" />
<meta name="theme-color" content="#000" />
<title>Title of the project</title>
<link rel="manifest" href="/manifest.json" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="apple-touch-icon" href="/apple-icon.png"></link>
</Head>;
完成上述步骤后，前往开发者控制台，在 Lighthouse 中为 PWA 生成报告，您将看到 PWA 和可安装徽章。
你需要推广你的网站，https你可以使用Vercel或Netlify。