PWA 资产生成器(PWA Asset Generator) 教程

1. 项目介绍

PWA 资产生成器是由 ElegantAPP 开发的一款自动化工具，用于生成 Progressive Web App（PWA）所需的图标、启动屏幕图片等资产。此工具支持自定义配置，并且可以自动更新 manifest.json 和 index.html 文件，以符合Web App Manifest规范和Apple的人机交互指南。它还支持在不同的开发环境中自适应地创建标签和路径。

2. 项目快速启动

安装

在你的项目中安装 pwa-asset-generator：

npm install pwa-asset-generator

使用命令行

执行以下命令来生成PWA资产：

npx pwa-asset-generator 源文件.png 输出目录

例如，如果你想从 public/logo.png 生成资产并将其保存到 public/dist 目录下：

npx pwa-asset-generator public/logo.png public/dist

配置文件

你还可以通过创建一个名为 pwa-assets.config.js 的配置文件来定制更多选项：

import { defineConfig, minimalPreset } from '@elegantapp/pwa-asset-generator';

export default defineConfig([
  {
    ...minimalPreset,
    images: ['public/logo.png'],
  },
]);

然后在 package.json 中添加一个脚本来运行生成任务：

{
  "scripts": {
    "generate-pwa-assets": "pwa-asset-generator"
  }
}

执行 npm run generate-pwa-assets 即可。

3. 应用案例与最佳实践

• 在不同主题（如深色模式、浅色模式）下生成相应的启动屏幕图像，以优化用户体验。
• 使用 --maskable 参数支持PWA的可遮罩图标，这将使图标更易于识别，特别是在设置为应用快捷方式时。
• 通过调整参数如 --quality 来控制输出图像的质量，以平衡性能和文件大小。
• 使用 --splash-only 或 --icon-only 分别只生成启动屏幕或图标。

4. 典型生态项目

• Vite-PWA 插件：利用 @vite-pwa/assets-generator 动态生成和服务PWA资产。
• Web App Manifest 工具：辅助生成符合规范的 manifest.json 文件。
• 图标转换库：如 sharp-ico，帮助处理不同平台的图标格式。

以上即为 PWA 资产生成器的基本使用教程。了解更多信息，建议阅读官方文档。