• 先準備 service worker、manifacts.json、logo.png
• 引入套件：
  pnpm add next-pwaCopy
• 修改
  next.config.jsCopy

const withPWA = require('next-pwa')({
	dest: 'public'
})
...
module.exports = withPWA(nextConfig);
js

• 到public/，新增logo.png，並下：
  npx pwa-asset-generator logo.png iconsCopy
  • 或 pwa online generator

• 到public/，新增
  manifest.jsonCopy

{
	"display": "standalone",
	"scope": "/",
	"start_url": "/",
	"name": "Alan Tseng",
	"short_name": "alanhc",
	"display": "minimal-ui",
	"icons": [
		{
			"src": "icons/manifest-icon-192.maskable.png",
			"sizes": "192x192",
			"type": "image/png",
			"purpose": "any"
		},
		{
			"src": "icons/manifest-icon-192.maskable.png",
			"sizes": "192x192",
			"type": "image/png",
			"purpose": "maskable"
		},
		{
			"src": "icons/manifest-icon-512.maskable.png",
			"sizes": "512x512",
			"type": "image/png",
			"purpose": "any"
		},
		{
			"src": "icons/manifest-icon-512.maskable.png",
			"sizes": "512x512",
			"type": "image/png",
			"purpose": "maskable"
		}
	]
}
json

• 到
  next-seo.config.jsCopy

export default {
	...
	additionalMetaTags:{
		{ name: "apple-mobile-web-app-capable", content: "yes" }
	},
	additionalLinkTags: [
		...
		{ rel: 'manifest', href: "/manifest.json" },
		{ rel: "apple-touch-icon", href: "icons/apple-icon-180.png" },
js

看到右上角有下載就成功了🎉

• https://www.npmjs.com/package/next-pwa