一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu

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

通常,我们说的软件指的是一个可以独立运行的程序,那么我们前端工程师开发的网页也属于软件吗?从计算机的角度来说,网页也是一个软件,但它很少让人归为软件一类。作为一个前端 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,就是这个样子。

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

我们还可以通过注入脚本来隐藏谷歌广告,下文会讲到。

前提条件

mac 用户本地打包需要确保 Rust >=1.63Node >=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的参数基本一致。有关详细信息,请参阅pake-cli 文档

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

ICON 生成

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

首先安装 tauri

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

提供一张尺寸是1024*1024透明的图片

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

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

开发者定制

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

我们可以在项目中直接注入 JavaScript 和 css 代码,就像一个网页的油猴脚本。

比如:官方 ChatGPT 的示例项目中就增加了 GPT-4-mobile 的模型

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

它通过覆盖默认的 fetch 方法,往返回的结果中注入了 GPT-4-mobile 模型。

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

同理我们可以注入 css 来隐藏广告,添加事件等。

小结

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

原文链接:https://juejin.cn/post/7246321692195831864 作者:狂奔滴小马

(0)
上一篇 2023年6月20日 上午11:02
下一篇 2023年6月20日 上午11:13

相关推荐

发表评论

登录后才能评论