糯麦 NurMai

400-158-5662

糯麦科技

/

新闻资讯

/

技术讨论

/

使用Pake一键将网页打包成桌面 App

使用Pake一键将网页打包成桌面 App

原创 新闻资讯

于 2023-08-16 10:25:02 发布

17971 浏览

通常,我们说的软件指的是一个可以独立运行的程序,那么我们前端工程师开发的网页也属于软件吗?从计算机的角度来说,网页也是一个软件,但它很少让人归为软件一类。作为一个前端 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 默认头部样式。我们还可以通过注入脚本来隐藏谷歌广告,下文会讲到。


前提条件

mac 用户本地打包需要确保 Rust >=1.63 和 Node >=16使用以下命令查看 rust 版本

rustc --version

如果 rust 版本较低可以使用以下命令更新版本

rustup update

windows 用户需要设置 Microsoft Visual Studio C++ 构建


在线打包

如果绝的本地配置环境麻烦,我们可以使用 Github Action 在线打包。

· 首先 Fork 这个项目

· 然后进入 Actions 界面,选择 Build App with Pake Cli,填写表单信息,然后单击 Run Workflow。

表单参数和填写要求与pake cli的参数基本一致。


ICON生成

唯一要做的是设计一个 ICON,打包的平台不同,需要有不同格式的 ICON,.icns,.ico,.png icons。我们可以从 macOSicons 中下载一个 ICON, 也可以使用 tauri 命令打包出适配不同平台适配的 ICON

首先安装 tauri

yarn add tauri
yarn tauri icon ./app-logo.png

我们可以在 figma 中建立一个 frame 大小是512*512,中间的底色大小是412*412,圆角弧度是90, 导出 2 倍尺寸 png 就可以了。中间的底色大小和圆角不是固定值,可以自行设计。


开发者定制

对于 rust 和前端开发者,我们也可以基于 Pake 的工程自定义开发,Pake 是一个基于 tauri 项目,其优势是我们可以直接基于一个在线网页进行定制,解决了桌面 App 更新的烦恼,比如其GIThub上就有:微信读书 Twitter、ChatGPT 等示例项目。

我们可以在项目中直接注入 JavaScript 和 css 代码,就像一个网页的油猴脚本。同理我们可以注入 css 来隐藏广告,添加事件等。


小结

糯麦为大家介绍了一个命令行工具 Pake,使用 Rust 将打包网页生成小型桌面应用,支持 Mac / Windows / Linux。相比传统的 Electron 打包,要小将近 20 倍,大小在5M 上下。底层使用 Rust Tauri 框架,性能体验较 JS 框架要轻快不少,内存小很多,实现了沉浸式的窗口、拖动、样式改写、去广告等功能。有兴趣的小伙伴可以去试试。

网页打包APP

网站建设开发

APP开发

阅读排行

  • 1. 几行代码就能实现Html大转盘抽奖

    大转盘抽奖是网络互动营销的一种常见形式,其通过简单易懂的界面设计,让用户在游戏中体验到乐趣,同时也能增加商家与用户之间的互动。本文将详细介绍如何使用HTML,CSS和JavaScript来实现大转盘抽奖的功能。

    查看详情
  • 2. 微信支付商户申请接入流程

    微信支付,是微信向有出售物品/提供服务需求的商家提供推广销售、支付收款、经营分析的整套解决方案,包括多种支付方式,如JSAPI支付、小程序支付、APP支付H5支付等支付方式接入。

    查看详情
  • 3. 浙江省同区域公司地址变更详细流程

    提前准备好所有需要的资料,包含:房屋租赁合同、房产证、营业执照正副本、代理人身份证正反面、承诺书(由于我们公司其中一区域已有注册另外一公司,所以必须需要承诺书)

    查看详情
  • 4. 阿里云域名ICP网络备案流程

    根据《互联网信息服务管理办法》以及《非经营性互联网信息服务备案管理办法》,国家对非经营性互联网信息服务实行备案制度,对经营性互联网信息服务实行许可制度。

    查看详情
  • 5. 微信小程序申请注册流程

    微信小程序注册流程与微信公众号较为相似,同时微信小程序支持通过已认证的微信公众号进行注册申请,无需进行单独认证即可使用,同一个已认证微信公众号可同时绑定注册多个小程序。

    查看详情