通常，我们说的软件指的是一个可以独立运行的程序，那么我们前端工程师开发的网页也属于软件吗？从计算机的角度来说，网页也是一个软件，但它很少让人归为软件一类。作为一个前端 web 开发者，我一直被桌面 App 所吸引，它拥有更快的加载速度，并且拥有完全独立的应用界面，让人觉得更加专业。因此我也想开发出属于自己的独立桌面 APP。
作为一名 web 开发者，若想要开发出属于自己的桌面 App，技术上我们可以选择使用 Electron JS 或者 tauri，但使用他们都需要一定开发成本，今天我将介绍一个开源的构建工具 Pake，它使用 Rust 或者说是 tauri，使用一个命令就可以将网页打包成一个很小的桌面 App。
使用
# Install with npm
npm install -g pake-cli# Command usage
pake url [OPTIONS]...# example
pake https://maqib.cn --name Blog --transparent --icon ./blog.icns首次打包会比较慢，--transparent 表示启用沉浸式头部，mac 上没有 App 默认头部样式
比如，将我的博客也打包成一个桌面 App，就是这个样子。
我们还可以通过注入脚本来隐藏谷歌广告，下文会讲到。
前提条件
mac 用户本地打包需要确保 Rust >=1.63 和 Node >=16使用以下命令查看 rust 版本
rustc --version如果 rust 版本较低可以使用以下命令更新版本
rustup updatewindows 用户需要设置 Microsoft Visual Studio C++ 构建
在线打包
如果绝的本地配置环境麻烦，我们可以使用 Github Action 在线打包。
首先 Fork 这个项目
然后进入 Actions 界面，选择
Build App with Pake Cli，填写表单信息，然后单击Run Workflow。
表单参数和填写要求与pake cli的参数基本一致。有关详细信息，请参阅pake-cli 文档。
ICON 生成
唯一要做的是设计一个 ICON，打包的平台不同，需要有不同格式的 ICON，.icns,.ico,.png icons。我们可以从 macOSicons 中下载一个 ICON， 也可以使用 tauri 命令打包出适配不同平台适配的 ICON
首先安装 tauri
yarn add tauri
yarn tauri icon ./app-logo.png提供一张尺寸是1024*1024透明的图片
我们可以在 figma 中建立一个 frame 大小是512*512，中间的底色大小是412*412，圆角弧度是90, 导出 2 倍尺寸 png 就可以了。中间的底色大小和圆角不是固定值，可以自行设计。
开发者定制
对于 rust 和前端开发者，我们也可以基于 Pake 的工程自定义开发，Pake 是一个基于 tauri 项目，其优势是我们可以直接基于一个在线网页进行定制，解决了桌面 App 更新的烦恼，比如其GIThub上就有:微信读书 Twitter、ChatGPT 等示例项目。
我们可以在项目中直接注入 JavaScript 和 css 代码，就像一个网页的油猴脚本。
比如：官方 ChatGPT 的示例项目中就增加了 GPT-4-mobile 的模型
它通过覆盖默认的 fetch 方法，往返回的结果中注入了 GPT-4-mobile 模型。
同理我们可以注入 css 来隐藏广告，添加事件等。
小结
本文介绍了一个命令行工具 Pake，使用 Rust 将打包网页生成小型桌面应用，支持 Mac / Windows / Linux。相比传统的 Electron 打包，要小将近 20 倍，大小在5M 上下。底层使用 Rust Tauri 框架，性能体验较 JS 框架要轻快不少，内存小很多，实现了沉浸式的窗口、拖动、样式改写、去广告等功能。
往期回顾
#
如何使用 TypeScript 开发 React 函数式组件？
#
11 个需要避免的 React 错误用法
#
6 个 Vue3 开发必备的 VSCode 插件
#
3 款非常实用的 Node.js 版本管理工具
#
6 个你必须明白 Vue3 的 ref 和 reactive 问题
#
6 个意想不到的 JavaScript 问题
#
试着换个角度理解低代码平台设计的本质
回复“加群”，一起学习进步
