停止手动调整 PWA 图标大小：我构建了一个 CLI，几秒钟内实现自动化 🚀

Source: Dev.to

介绍

作为前端开发者，我们都喜欢渐进式网页应用（PWA）的概念。然而，初始设置可能会很繁琐。每次启动一个新的 React 或 Vite 项目时，我都要打开图像编辑器，把主 logo 调整为各种尺寸（192x192、512x512、apple‑touch‑icon、favicon），然后手动在 manifest.json 中写入正确的路径。这会拖慢开发速度，于是我创建了一个解决方案。

认识 pwa‑gen

npx @muhammaddariazzidane/pwa-gen

一个轻量级、交互式的 CLI 工具，自动完成全部图标生成和 manifest 创建过程。只需指向你的主图像，回答几个提示，即可完成。

它的功能是什么？

即时图标生成

为现代浏览器和 iOS 创建所有必要的尺寸：

• 192x192
• 512x512
• 180x180
• 64x64

智能可遮罩图标

针对 Android PWA，CLI 会询问十六进制背景颜色，稍微缩小你的 logo，并添加适当的内边距，以确保 logo 位于安全区内。

自动生成 manifest.json

提示输入应用名称和主题颜色，然后生成格式正确的独立 manifest.json，并使用绝对图标路径。

智能路径自动校正

自动检测你的 public 目录，确保文件生成在正确的位置。

非常适合 Vite 用户

将生成的 manifest 添加到你的 Vite 配置中：

// vite.config.js
import { VitePWA } from 'vite-plugin-pwa';

export default {
  plugins: [
    VitePWA({
      manifest: false, // 使用 pwa-gen 生成的独立 manifest.json
      injectRegister: 'auto'
    })
  ]
};

贡献

源代码已在 GitHub 上公开。欢迎查看 Node.js 文件系统逻辑或进行贡献：

👉 https://github.com/muhammaddariazzidane/pwa-gen.git

祝编码愉快！ 💻✨