Nativefier 打包网页

Nativefier 打包网页

一、环境配置

1. 安装 NVM for Windows 管理 nodejs

使用nvm 管理node

仓库地址
下载win版直接安装
NVM for Windows 常用命令说明

命令 说明 示例
`nvm arch [32 64]` 显示当前 Node.js 进程的架构 (32 位或 64 位)。可指定 3264 覆盖默认架构。
nvm debug 检查 NVM for Windows 进程是否存在已知问题。 nvm debug
nvm current 显示当前激活的 Node.js 版本。 nvm current
nvm install <version> [arch] 安装指定版本的 Node.js。<version> 可以是版本号、latestlts[arch] 可选,指定 3264all 同时安装。--insecure 绕过 SSL。 nvm install 18.0.0, nvm install latest, nvm install lts 64, nvm install 16 all --insecure
nvm list [available] 列出已安装的 Node.js 版本。available 显示可供下载的版本。 nvm list, nvm list available
nvm on 启用 Node.js 版本管理。 nvm on
nvm off 禁用 Node.js 版本管理 (不卸载任何 Node.js)。 nvm off
nvm proxy [url] 设置下载代理。[url] 为空查看当前代理,为 none 移除代理。 nvm proxy, nvm proxy http://localhost:8080, nvm proxy none
nvm uninstall <version> 卸载指定版本的 Node.js。 nvm uninstall 14.0.0
nvm use <version> [arch] 切换到指定 Node.js 版本。<version> 可以是版本号、latestltsnewest[arch] 可选,指定 3264nvm use <arch> 切换架构。 nvm use 20.0.0, nvm use latest 32, nvm use lts, nvm use newest, nvm use 64
nvm root <path> 设置 NVM 存储 Node.js 版本的根目录。<path> 为空显示当前根目录。 nvm root, nvm root C:\nvm
nvm version 显示当前 NVM for Windows 的版本。 nvm version
nvm node_mirror <url> 设置 Node.js 镜像地址。 nvm node_mirror https://npmmirror.com/mirrors/node/
nvm npm_mirror <url> 设置 npm 镜像地址。 nvm npm_mirror https://npmmirror.com/mirrors/npm/

2. 安装nodejs

1
2
3
4
# 安装nodejs  18.20.8版本
nvm install 18.20.8
# 全局安装 yarn
npm install -g yarn

3. 全局安装 Nativefier

1
2

npm install -g nativefier

4. 跨平台依赖

Windows: 需安装Wine用于生成Linux/Mac应用(非必须,仅跨平台打包需要)

Linux:安装 Wine 支持 Windows 应用构建

1
2
#  安装命令
sudo apt-get install wine

macOS:安装图标处理工具(可选)

1
2
#  安装命令
brew install imagemagick

二、基础打包命令

示例:将百度首页打包为桌面应用

  • 生成以文件名命名的文件夹(baidu-win32-x64)
  • 窗口尺寸 1280x800px,隐藏菜单栏
  • 1
    2
    3

    nativefier "https://www.baidu.com"

  • 指定输出目录:默认在当前目录生成,可通过 –out <目录> 指定
1
2
3
4
# 生成百度的桌面应用 输出地址为 D:\output
nativefier --out "C:\output" "https://www.baidu.com"


三、完整参数列表及注释

1. Nativefier 基础参数

参数 注释 示例
--name <名称> 应用名称(避免空格) --name "知乎"
--platform <系统> 目标系统:windows/linux/osx --platform linux
--arch <架构> CPU 架构:x64/ia32/arm64 --arch arm64
--icon <路径> 图标文件(Windows 需 .ico,macOS 需 .icns) --icon "D:\app.ico"
--app-version <版本> 应用版本号(仅支持数字或点分格式) --app-version 2.0
--app-copyright <版权> 显示在文件属性中的版权信息 --app-copyright "知乎公司"
--out <目录> 指定输出目录(默认生成在当前位置) --out "D:\output"

2. Nativefier 窗口与界面控制参数

参数 注释 示例
--width <数值> 初始窗口宽度(默认 1280) --width 1440
--height <数值> 初始窗口高度(默认 800) --height 900
--min-width <数值> 窗口最小宽度限制(默认 0) --min-width 800
--min-height <数值> 窗口最小高度限制(默认 0) --min-height 600
--max-width <数值> 窗口最大宽度限制(默认无限制) --max-width 1920
--max-height <数值> 窗口最大高度限制(默认无限制) --max-height 1080
--x <数值> 窗口初始 X 坐标(屏幕左边缘偏移量) --x 100
--y <数值> 窗口初始 Y 坐标(屏幕顶部偏移量) --y 200
--maximize 启动时最大化窗口 --maximize
--full-screen 启动时全屏显示 --full-screen
--background-color <颜色码> 窗口加载前的背景色(十六进制/RGB) --background-color "#333"
--disable-context-menu 禁用右键菜单 --disable-context-menu
--show-menu-bar 显示顶部菜单栏(默认隐藏) --show-menu-bar

3. Nativefier 功能增强参数

参数 注释 示例
--tray 关闭窗口时缩至系统托盘 --tray
--always-on-top 窗口始终置顶 --always-on-top
--clear-cache 禁止保留缓存数据 --clear-cache
--disable-dev-tools 禁用开发者工具(F12/Ctrl+Shift+I) --disable-dev-tools
--single-instance 禁止启动多个实例(已运行则聚焦现有窗口) --single-instance
--user-agent <UA> 自定义 User-Agent(模拟浏览器) --user-agent "Mozilla/5.0..."
--inject <JS/CSS文件> 注入自定义脚本或样式(如去广告) --inject "custom.js"
--proxy-rules <规则> 设置代理服务器 --proxy-rules "http=127.0.0.1:8080"

4. Nativefier 高级参数

参数 注释 示例
--electron-version <版本> 指定 Electron 内核版本 --electron-version 21.0.0
--widevine 启用 DRM 视频播放支持(需自行承担风险) --widevine
--global-shortcuts <JSON文件> 定义全局快捷键(需 JSON 配置文件) --global-shortcuts shortcuts.json
--build-version "<版本号>" 设置构建版本号(映射到文件元数据) --build-version "20240403"
--win32metadata '{"ProductName":"<名称>"}' 自定义 Windows 可执行文件元数据 --win32metadata '{"ProductName":"知乎"}'
--honest 禁用 User-Agent 伪装(显示真实 Electron UA) --honest
--ignore-certificate 忽略证书错误(适用于自签名证书) --ignore-certificate
--disable-gpu 禁用硬件加速(解决渲染问题) --disable-gpu
--ignore-gpu-blacklist 强制启用 WebGL(绕过 GPU 黑名单) --ignore-gpu-blacklist

四、Nativefier 跨平台注意事项

图标格式

  • Windows.ico(建议 256x256 像素)
  • Linux.png(建议 512x512 像素)
  • macOS:支持 .icns.png(自动转换)

输出文件类型

  • Windows:生成 .exe 文件及资源文件夹

  • macOS:生成 .app 应用包(需右键“打开”绕过安全限制)

  • Linux:生成 .AppImage 文件(需赋予执行权限)

    1
    chmod +x MyApp.AppImage

Docker 支持(跨平台构建)

1
2
3
docker run -v ~/apps:/target jiahaog/nativefier --platform linux "[https://zhihu.com](https://zhihu.com)" /target/
# 通过 Docker 跨平台打包(需挂载本地目录)

五、其他

修改图标

进入生成目录的 resources/app 文件夹,直接替换 icon.icoicon.png 文件。

持久化配置

编辑生成目录下的 resources/app/nativefier.json 文件,可以修改窗口尺寸、User-Agent 等参数。

打包为安装程序

  • Windows:可以使用 HHSoftwarePack 工具生成安装包,操作简单,开源,内核使用,基于NSIS方式的安装包制作。
  • Linux:可以使用dpkg工具进行封装。

LIUNX 打包脚本

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282

#!/bin/bash

# 定义变量
ELECTRON_VERSION="26.1.0" # 设置 Electron 版本
APP_NAME="HJJ" # 设置应用程序名称
OLD_APP_NAME="" # 用于存储之前的应用程序名称
PLATFORM="linux" # 设置平台
APP_VERSION="1.0" # 设置应用程序版本
APP_COPYRIGHT="kikock" # 设置应用程序版权信息
# 输出目录设置为当前目录
OUTPUT_DIR="./"
PACKAGE_DIR="./package" # 设置打包文件夹
# URL 默认为 https://google.com
TARGET_URL="https://google.com"
# 架构 默认为 x64, 支持 x64, ia32, arm64
KERNEL_ARCH="x64"
# 修改 APP_FOLDER_NAME 以匹配实际的文件夹名称
APP_FOLDER_NAME="$APP_NAME-$PLATFORM-$KERNEL_ARCH"
INSTALL_DIR="/opt/$APP_NAME" # 设置应用程序安装目录
DEB_PACKAGE_NAME="$APP_NAME-$APP_VERSION-linux-$KERNEL_ARCH.deb"
# 设置图标路径,默认为当前目录下的 app.png, 可以通过脚本参数传入
ICON="./app.png"


# 确保输出目录存在
mkdir -p "$OUTPUT_DIR"
# 创建打包文件夹
mkdir -p "$PACKAGE_DIR"


# 函数:显示主菜单
show_menu() {
echo "################################################################################"
echo "# Nativefier 打包脚本"
echo "# 1. 开始使用 Nativefier 打包应用程序"
echo "# 2. 设置应用程序名称 ($APP_NAME)"
echo "# 3. 设置应用程序版本 ($APP_VERSION)"
echo "# 4. 设置目标 URL ($TARGET_URL)"
echo "# 5. 设置应用程序图标 ($ICON)"
echo "# 6. 设置内核架构 ($KERNEL_ARCH)"
echo "# 7. 生成 .deb 软件包"
echo "# 8. 清理临时文件"
echo "# 9. 一键打包"
echo "# 0. 退出脚本"
echo "################################################################################"
read -p "请选择要执行的操作: " choice
}

# 函数:打包应用程序
package_app() {
# 使用用户设置的 APP_NAME
APP_FOLDER_NAME="$APP_NAME-$PLATFORM-$KERNEL_ARCH"
INSTALL_DIR="/opt/$APP_NAME"
DEB_PACKAGE_NAME="$APP_NAME-$APP_VERSION-linux-$KERNEL_ARCH.deb"

# 删除旧的应用程序目录和图标目录(如果存在)
if [ -n "$OLD_APP_NAME" ] && [ "$OLD_APP_NAME" != "$APP_NAME" ]; then
OLD_INSTALL_DIR="/opt/$OLD_APP_NAME"
OLD_ICON_DIR="/usr/share/icons/$OLD_APP_NAME"
echo "删除旧的应用程序目录:$OLD_INSTALL_DIR"
sudo rm -rf "$OLD_INSTALL_DIR"
echo "删除旧的图标目录:$OLD_ICON_DIR"
sudo rm -rf "$OLD_ICON_DIR"
fi

NATIVEFIER_COMMAND="nativefier --name \"$APP_NAME\" \
--platform \"$PLATFORM\" \
--arch \"$KERNEL_ARCH\" \
--app-version \"$APP_VERSION\" \
--app-copyright \"$APP_COPYRIGHT\" \
--maximize \
--clear-cache \
--electron-version \"$ELECTRON_VERSION\" \
--icon \"$ICON\" \
--file-download-options '{\"saveAs\": true}' \
\"$TARGET_URL\""
eval $NATIVEFIER_COMMAND

# 检查 Nativefier 是否打包成功
if [ $? -ne 0 ]; then
echo "Nativefier 打包失败,请检查错误信息。"
exit 1
fi

# 获取应用程序文件夹的完整路径
APP_FULL_PATH="$OUTPUT_DIR/$APP_FOLDER_NAME"
# 修改 EXECUTABLE_FILE 以匹配实际的执行文件路径
EXECUTABLE_FILE="$APP_FULL_PATH/$APP_NAME" # 假设可执行文件与应用程序名称相同

# 将生成应用放入 package/opt 目录
mkdir -p "$PACKAGE_DIR/opt/$APP_NAME"
cp -r "$APP_FULL_PATH"/* "$PACKAGE_DIR/opt/$APP_NAME/"
# 复制图标到应用程序目录, 并转换为 png 和 icns 格式
if [ -f "$ICON" ]; then
ICON_BASE_NAME=$(basename "$ICON" .$(echo "$ICON" | sed -e 's/.*\.//')) # 获取不带后缀的文件名
ICON_EXTENSION=$(echo "$ICON" | sed -e 's/.*\.//') # 获取文件后缀

# 创建必要的目录
mkdir -p "$PACKAGE_DIR/usr/share/icons/$APP_NAME"

# 复制原始 PNG 图标到目标目录
cp "$ICON" "$PACKAGE_DIR/usr/share/icons/$APP_NAME/${ICON_BASE_NAME}.png"
chmod 0644 "$PACKAGE_DIR/usr/share/icons/$APP_NAME/${ICON_BASE_NAME}.png"

# 转换为 ICNS (如果支持 convert)
if command -v convert >/dev/null 2>&1; then
convert "$ICON" -define icon:format=icns "$PACKAGE_DIR/opt/$APP_NAME/${ICON_BASE_NAME}.icns"
chmod 0644 "$PACKAGE_DIR/opt/$APP_NAME/${ICON_BASE_NAME}.icns"
fi
# 转换为 ICO
convert "$ICON" "$PACKAGE_DIR/opt/$APP_NAME/${ICON_BASE_NAME}.ico"
chmod 0644 "$PACKAGE_DIR/opt/$APP_NAME/${ICON_BASE_NAME}.ico"
fi

# 设置应用程序文件夹及其子内容的权限为 755,所有用户可读可执行,所有者可写
sudo chown -R :users "$PACKAGE_DIR/opt/$APP_NAME" # 将用户组设置为 users
sudo chmod -R 755 "$PACKAGE_DIR/opt/$APP_NAME"

# 检查应用程序执行文件是否存在
if [ ! -f "$EXECUTABLE_FILE" ]; then
echo "错误:应用程序执行文件 '$EXECUTABLE_FILE' 不存在。请检查路径是否正确。"
exit 1
fi
echo "应用程序打包完成。"
}

# 函数:生成 .deb 软件包
generate_deb() {
# 使用用户设置的 APP_NAME
APP_FOLDER_NAME="$APP_NAME-$PLATFORM-$KERNEL_ARCH"
INSTALL_DIR="/opt/$APP_NAME"
DEB_PACKAGE_NAME="$APP_NAME-$APP_VERSION-linux-$KERNEL_ARCH.deb"

# 创建 debian 目录结构
mkdir -p "$PACKAGE_DIR/DEBIAN"
mkdir -p "$PACKAGE_DIR/usr/share/applications"
# 创建图标目录
mkdir -p "$PACKAGE_DIR/usr/share/icons/$APP_NAME"

# debian 核心架构
ARCHITECTURE="amd64" # 默认设置为 amd64
# 创建 debian 控制文件 (control)
cat <<EOF > "$PACKAGE_DIR/DEBIAN/control"
Package: $APP_NAME
Version: $APP_VERSION
Architecture: $ARCHITECTURE
Maintainer: $(whoami) <$(whoami)@$(hostname)>
Description: $APP_NAME desktop client
A desktop client generated by Nativefier.
Depends: libgtk-3-0, libgbm1, libnss3, libasound2, libxtst6, libxss1, libcups2
Section: web
Priority: optional
EOF

# 创建 preinst 脚本 (可选,用于安装前操作)
cat <<EOF > "$PACKAGE_DIR/DEBIAN/preinst"
#!/bin/bash
echo "正在安装 $APP_NAME..."
# 在此处添加安装前要执行的命令,例如检查依赖、创建用户等
exit 0
EOF
chmod +x "$PACKAGE_DIR/DEBIAN/preinst"

# 创建 postinst 脚本 (可选,用于安装后操作)
cat <<EOF > "$PACKAGE_DIR/DEBIAN/postinst"
#!/bin/bash
echo "安装完成"
# 复制图标到系统图标目录
if [ -d "$PACKAGE_DIR/usr/share/icons" ]; then
cp -r "$PACKAGE_DIR/usr/share/icons/" "/usr/share/icons"
chmod -R 0755 "/usr/share/icons" # 确保复制的图标目录和文件有正确的权限
fi
if [ ! -s /usr/share/applications/$APP_NAME.desktop ]; then
cat >/usr/share/applications/$APP_NAME.desktop<<-END
[Desktop Entry]
Name=$APP_NAME
Comment=一款为 $APP_NAME 定制的 Linux 桌面应用
Exec=$INSTALL_DIR/$APP_NAME
Icon=/usr/share/icons/$APP_NAME/${ICON_BASE_NAME}.png
Terminal=false
Type=Application
Categories=Network;Application;
END
chmod 0644 "/usr/share/applications/$APP_NAME.desktop"
fi
update-desktop-database
exit 0
EOF
chmod +x "$PACKAGE_DIR/DEBIAN/postinst"

# 创建 prerm 脚本 (可选,用于卸载前操作)
cat <<EOF > "$PACKAGE_DIR/DEBIAN/prerm"
#!/bin/bash
echo "正在卸载 $APP_NAME..."
# 在此处添加卸载前要执行的命令,例如停止服务、删除配置文件等
# 卸载应用程序
apt-get --purge remove "$APP_NAME" -y
exit 0
EOF
chmod +x "$PACKAGE_DIR/DEBIAN/prerm"

# 创建 postrm 脚本 (可选,用于卸载后操作)
cat <<EOF > "$PACKAGE_DIR/DEBIAN/postrm"
#!/bin/bash
echo "卸载 $APP_NAME 完成!"

# 删除桌面快捷方式
if [ -f "/usr/share/applications/$APP_NAME.desktop" ]; then
rm -f "/usr/share/applications/$APP_NAME.desktop"
fi

exit 0
EOF
chmod +x "$PACKAGE_DIR/DEBIAN/postrm"

# 打包成 deb 文件
dpkg-deb -b "$PACKAGE_DIR" "$OUTPUT_DIR/$DEB_PACKAGE_NAME"
echo ".deb 文件打包完成。"
}

# 函数:清理临时文件
cleanup() {
rm -rf "$PACKAGE_DIR" # 删除打包的文件夹
rm -rf "$APP_FULL_PATH" # 删除生成的应用程序文件夹
echo "临时文件清理完成。"
}

# 函数:一键打包
one_click_package() {
package_app
generate_deb
cleanup
echo "一键打包完成。"
}

# 主程序逻辑
while true; do
show_menu
case "$choice" in
1) package_app ;;
2)
read -p "请输入应用程序名称: " APP_NAME
echo "# 2. 设置应用程序名称 ($APP_NAME)"
echo " 原始应用程序名称:$OLD_APP_NAME" # 记录原始名称
OLD_APP_NAME="$APP_NAME" # 更新为新的名称
# 更新应用名称相关的变量
APP_FOLDER_NAME="$APP_NAME-$PLATFORM-$KERNEL_ARCH"
INSTALL_DIR="/opt/$APP_NAME"
DEB_PACKAGE_NAME="$APP_NAME-$APP_VERSION-linux-$KERNEL_ARCH.deb"
;;
3) read -p "请输入应用程序版本: " APP_VERSION ;;
4) read -p "请输入目标 URL: " TARGET_URL ;;
5) read -p "请输入应用程序图标路径: " ICON ;;
6)
echo "请选择内核架构:"
echo "1. x64"
echo "2. ia32"
echo "3. arm64"
read -p "请选择 (1/2/3): " arch_choice
case "$arch_choice" in
1) KERNEL_ARCH="x64" ;;
2) KERNEL_ARCH="ia32" ;;
3) KERNEL_ARCH="arm64" ;;
*) echo "无效的选择,使用默认架构 x64。" ;;
esac
;;
7)
package_app
generate_deb
;;
8) cleanup ;;
9) one_click_package ;;
0) echo "退出脚本。"; exit 0 ;;
*) echo "无效的选择,请重试。" ;;
esac
done