web-to-app · diff
git:20260214.8a1442a to git:20260826.7faa2d6
1 added, 1 removed. Audit A to A.
---
name: web-to-app
- description: 将任意网页转换为桌面应用，支持 macOS/Windows/Linux 三大平台。使用 Rust + Tauri 技术栈，生成的应用体积小（约 5MB）、性能高。支持自定义图标、窗口大小、快捷键等丰富配置。
+ description: 网页开发工程师当需要将任意网页URL封装为独立桌面客户端时，使用此技能可一键生成体积仅约5MB的跨平台（Win/Mac/Linux）原生应用安装包。支持自定义图标与高级配置，助你快速交付轻量级桌面端产品。
dependency:
python:
- requests>=2.28.0
system:
- npm install -g pake-cli
---
# Web to App
## 任务目标
- 本 Skill 用于：将任意网页 URL 打包成原生桌面应用
- 能力包含：
1. 自动检测并安装 pake-cli 工具
2. 支持自定义应用名称、图标、窗口尺寸等配置
3. 生成 macOS/Windows/Linux 平台的应用安装包
4. 支持高级配置（隐藏标题栏、多实例、代理等）
- 触发条件：用户提出"将网页打包成应用"、"制作桌面应用"等需求
## 前置准备
### 环境要求
- **Node.js**：版本 ≥ 18.0.0（推荐 22.0+）
- **Rust**：≥ 1.85.0（首次使用会自动安装）
- **系统工具**：
- macOS/Linux：需要 `curl`、`wget`、`file`、`tar`
- Windows：自动处理依赖
### 安装依赖
首次使用前，需要安装 pake-cli 工具：
```bash
npm install -g pake-cli
# 或使用 pnpm（推荐）
pnpm install -g pake-cli
```
## 操作步骤
### 标准流程
1. **收集需求**
- 确认网页 URL（必需）
- 应用名称（建议英文）
- 目标平台（自动检测当前系统）
- 自定义需求（图标、窗口大小等）
2. **环境准备**
- 调用 `scripts/install_pake.py` 检查并安装 pake-cli
- 验证 Node.js 和 Rust 环境
3. **执行打包**
- 根据用户需求生成配置参数
- 调用 `scripts/build_app.py` 执行打包
- 监控执行进度和错误信息
4. **输出验证**
- 确认生成的应用安装包
- 提供安装和使用说明
### 可选分支
- **当需要自定义图标**：
- 提供图标文件路径（支持本地或远程 URL）
- 自动转换为平台特定格式（.icns/.ico/.png）
- **当需要高级配置**：
- 参考 [references/parameter-guide.md](references/parameter-guide.md)
- 添加对应参数（如 `--hide-title-bar`、`--multi-instance`）
- **当打包失败**：
- 检查网络连接（需要下载依赖）
- 验证 Node.js 和 Rust 版本
- 使用 `--debug` 参数查看详细日志
## 资源索引
### 必要脚本
- **[scripts/install_pake.py](scripts/install_pake.py)**
- 用途：检查并安装 pake-cli 工具
- 参数：无
- 返回：安装状态和版本信息
- **[scripts/build_app.py](scripts/build_app.py)**
- 用途：执行网页打包命令
- 参数：
- `url`：网页 URL（必需）
- `name`：应用名称
- `icon`：图标路径
- `width`：窗口宽度
- `height`：窗口高度
- `options`：其他可选参数（字典格式）
- 返回：生成的应用文件路径
### 领域参考
- **[references/parameter-guide.md](references/parameter-guide.md)**
- 何时读取：需要配置高级选项时
- 内容：完整的参数说明和使用示例
## 注意事项
- ⏰ **首次打包较慢**：需要下载和编译 Rust 依赖，后续打包会快很多
- 📦 **输出位置**：默认在当前工作目录（`./`）生成应用安装包
- 🖥️ **平台适配**：
- macOS：生成 `.dmg` 安装包（设置 `PAKE_CREATE_APP=1` 可生成 `.app`）
- Windows：生成 `.msi` 安装包
- Linux：生成 `.deb` 或 `.AppImage` 包
- 🚀 **调试模式**：遇到问题时添加 `--debug` 参数查看详细日志
- 🔐 **证书问题**：如果是内网或自签名证书，使用 `--ignore-certificate-errors`
## 使用示例
### 示例 1：基础打包
**功能说明**：将 GitHub 网页打包成应用
**执行方式**：脚本调用
```python
from scripts.build_app import build_app
result = build_app(
url="https://github.com",
name="GitHub"
)
# 输出：GitHub.dmg / GitHub_x64.msi / GitHub_x86_64.deb
```
### 示例 2：自定义配置
**功能说明**：自定义窗口大小和图标
**执行方式**：脚本调用
```python
result = build_app(
url="https://chat.openai.com",
name="ChatGPT",
icon="https://example.com/icon.png",
width=1400,
height=900,
options={
"hide-title-bar": True,
"always-on-top": False
}
)
```
### 示例 3：多实例应用
**功能说明**：允许同时打开多个应用窗口
**执行方式**：脚本调用
```python
result = build_app(
url="https://example.com",
name="MyApp",
options={
"multi-instance": True,
"activation-shortcut": "CmdOrControl+Shift+P"
}
)
```
## 快捷键说明
生成的应用内置以下快捷键：
| 操作 | macOS | Windows/Linux |
|------|-------|---------------|
| 刷新页面 | ⌘ + R | Ctrl + R |
| 隐藏窗口 | ⌘ + W | Ctrl + W |
| 放大/缩小 | ⌘ + +/- | Ctrl + +/- |
| 重置缩放 | ⌘ + 0 | Ctrl + 0 |
| 复制 URL | ⌘ + L | Ctrl + L |
| 返回首页 | ⌘ + Shift + H | Ctrl + Shift + H |
| 开发者工具 | ⌘ + Option + I | Ctrl + Shift + I（仅调试模式） |
| 清除缓存重启 | ⌘ + Shift + Delete | Ctrl + Shift + Delete |