alanhc-til

title: "加入PWA功能" date: "2023-08-27" tag: ["blog", "pwa"]

前置

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

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

產生icon

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

產生manifest

• 到public/，新增 manifest.json

{
	"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"
		}
	]
}

加入link、meta tag

• 到 next-seo.config.js

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" },

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

ref

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