web-to-app

Web to App

Task Objective

• This Skill is used to: package any web URL into a native desktop application
• Capabilities include:
  1. Automatically detect and install the pake-cli tool
  2. Support configuration such as custom application name, icon, window size, etc.
  3. Generate application installers for macOS/Windows/Linux platforms
  4. Support advanced configuration (hide title bar, multiple instances, proxy, etc.)
• Trigger conditions: the user requests "package a web page into an application", "make a desktop application", etc.

Prerequisites

Environment Requirements

• Node.js: version ≥ 18.0.0 (22.0+ recommended)
• Rust: ≥ 1.85.0 (automatically installed on first use)
• System Tools：
  • macOS/Linux: requires curl、wget、file、tar
  • Windows: automatically handles dependencies

Install Dependencies

Before first use, you need to install the pake-cli tool:

npm install -g pake-cli
# 或使用 pnpm（推荐）
pnpm install -g pake-cli

Operation Steps

Standard Process

1. Collect Requirements

   • Confirm the web URL (required)
   • Application name (English recommended)
   • Target platform (automatically detect the current system)
   • Customization requirements (icon, window size, etc.)

2. Environment Preparation

   • Call scripts/install_pake.py to check and install pake-cli
   • Verify the Node.js and Rust environments

3. Execute Packaging

   • Generate configuration parameters according to user requirements
   • Call scripts/build_app.py to execute packaging
   • Monitor execution progress and error messages

4. Output Verification

   • Confirm the generated application installer
   • Provide installation and usage instructions

Optional Branches

• When a custom icon is needed：

  • Provide the icon file path (local or remote URL supported)
  • Automatically convert to platform-specific formats (.icns/.ico/.png)

• When advanced configuration is needed：

  • Refer to references/parameter-guide.md
  • Add the corresponding parameters (such as --hide-title-bar、--multi-instance）

• When packaging fails：

  • Check the network connection (dependencies need to be downloaded)
  • Verify the Node.js and Rust versions
  • Use the --debug parameter to view detailed logs

Resource Index

Required Scripts

• scripts/install_pake.py

  • Purpose: check and install the pake-cli tool
  • Parameters: none
  • Returns: installation status and version information

• scripts/build_app.py

  • Purpose: execute the web page packaging command
  • Parameters:
    • url: web page URL (required)
    • name: application name
    • icon: icon path
    • width: window width
    • height: window height
    • options: other optional parameters (dictionary format)
  • Returns: the path of the generated application file

Domain Reference

• references/parameter-guide.md
  • When to read: when advanced options need to be configured
  • Content: Complete parameter descriptions and usage examples

Notes

• ⏰ First build is slow: Rust dependencies need to be downloaded and compiled; subsequent builds will be much faster
• 📦 Output location: By default, the app installer is generated in the current working directory (./)
• 🖥️ Platform adaptation：
  • macOS: generates .dmg installer (setting PAKE_CREATE_APP=1 can generate .app）
  • Windows: generates .msi installer
  • Linux: generates .deb or .AppImage package
• 🚀 Debug mode: When encountering issues, add the --debug parameter to view detailed logs
• 🔐 Certificate issues: If using an intranet or self-signed certificate, use --ignore-certificate-errors

Usage examples

Example 1: Basic packaging

Function description: Packages the GitHub webpage into an app Execution method: Script call

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

Example 2: Custom configuration

Function description: Custom window size and icon Execution method: Script call

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
    }
)

Example 3: Multi-instance app

Function description: Allows multiple app windows to be opened simultaneously Execution method: Script call

result = build_app(
    url="https://example.com",
    name="MyApp",
    options={
        "multi-instance": True,
        "activation-shortcut": "CmdOrControl+Shift+P"
    }
)

Keyboard shortcuts

The generated app includes the following keyboard shortcuts:

Action	macOS	Windows/Linux
Refresh page	⌘ + R	Ctrl + R
Hide window	⌘ + W	Ctrl + W
Zoom in/out	⌘ + +/-	Ctrl + +/-
Reset zoom	⌘ + 0	Ctrl + 0
Copy URL	⌘ + L	Ctrl + L
Back to homepage	⌘ + Shift + H	Ctrl + Shift + H
Developer tools	⌘ + Option + I	Ctrl + Shift + I (debug mode only)
Clear cache and restart	⌘ + Shift + Delete	Ctrl + Shift + Delete