Pake

很简单用 Rust 打包网页生成很小的桌面 App，支持 Mac/Windows/Linux 应用，当前已打包微信读书、Twitter、Youtube、Flomo、Reference、RunCode、Google Translate、语雀、Witeboard、Vercel、V2EX、开发工具箱等，欢迎去讨论区交流分享。

## 特征 🏂 **小**：相比传统的 Electron 套壳打包，要小将近 40 倍，不到 3M 😂 **快**：Pake 的底层使用的 Rust Tauri 框架，性能体验较 JS 框架要轻快不少，内存小很多 🩴 **特**：不是单纯打包，实现了快捷键的透传、沉浸式的窗口、拖动、样式改写、去广告、产品的极简风格定制 🐶 **玩**：只是一个很简单的小玩具，用 Rust 替代之前套壳网页打包的老思路，其实 PWA 也很好 ## 下载

WeRead Download	Twitter Download

YouTube Download	Reference Download

RunCode Download	Google Translate Download

Flomo Download	YuQue Download

更多常用 App 下载以及 Windows/Linux 的包可以去 [Releases](https://github.com/tw93/Pake/releases) 中看看。Windows 下不能安装到 `C:\Program File`，会直接闪退，建议安装到其他非管理员权限目录，比如 `D:\Program Files (x86)` 。 ## 快捷键 | Mac | Windows/Linux | 功能 | | --------------------------- | ------------------------------ | ------------------ | | ⌘ + [ | Ctrl + ← | 返回上一个页面 | | ⌘ + ] | Ctrl + → | 去下一个页面 | | ⌘ + ↑ | Ctrl + ↑ | 自动滚动到页面顶部 | | ⌘ + ↓ | Ctrl + ↓ | 自动滚动到页面底部 | | ⌘ + r | Ctrl + r | 刷新页面 | | ⌘ + w | Ctrl + w | 隐藏窗口，非退出 | | ⌘ + - | Ctrl + - | 缩小页面 | | ⌘ + + | Ctrl + + | 放大页面 | | ⌘ + = | Ctrl + = | 放大页面 | | ⌘ + 0 | Ctrl + 0 | 重置页面缩放 | 此外还支持双击头部进行全屏切换，拖拽头部进行移动窗口，还有其他需求，欢迎提过来。 ## 使用命令行打包 Pake 提供了命令行工具，可以更快捷方便地打包。（目前仅支持 MacOS） ### 安装 ```bash npm install -g pake-cli ``` 如果安装失败提示没有权限，请使用 `sudo` 运行。 ### 用法 ```bash pake [options] url ``` 更多用法可查看[文档](./bin//README.md)。 ## 开发开始前参考 [Tauri](https://tauri.app/v1/guides/getting-started/prerequisites#setting-up-macos) 快速配置好环境。 ```sh // 安装依赖 npm i // 调试 npm run dev // 打包 Mac 应用 npm run build // 打包 Windows 应用 npm run build:windows // 打包 Linux 应用 npm run build:linux // 一键打包所有 Mac/Linux 应用 chmod +x ./script/build.sh && ./script/build.sh // 一键打包所有 Windows 项目 .\script\build.bat ``` ## 打新包 1. 修改 `src-tauri` 目录下的 `tauri.conf.json` 中的 `url、productName、icon、identifier` 这 4 个字段，其中 icon 可以从 icons 目录选择一个，也可以去 [macOSicons](https://macosicons.com/#/) 下载符合产品名称的 2. 关于窗口属性设置，可以在 `tauri.conf.json` 修改 `windows` 属性对应的 `width/height`，是否全屏 `fullscreen`，是否可以调整大小 `resizable`，假如想适配 Mac 沉浸式头部，可以将 `transparent` 设置成 `true`，找到 Header 元素加一个 `padding-top` 样式即可，不想适配改成 `false` 也行 3. `npm run dev` 本地调试看看效果，此外可以使用 `npm run dev:debug` 进行容器调试 4. `npm run build` 运行即可打生产包 ## 高级 #### 1. 如何改写样式，如去掉原站广告、不想要的模块、甚至重新设计？首先需要使用 `npm run dev:debug` 打开 devtools 调试模式，找到你需要修改的样式名称，先在 devtools 里面验证效果；找到 `pake.js` 中样式位置 `style.innerHTML` ，将需要覆盖的样式加上即可，有一些案例你可以模仿。 #### 2. 如何注入 JS 的逻辑，比如实现事件监听，比如说键盘快捷键？参考 `pake.js` 中事件监听 `document.addEventListener`，直接编写即可，这里更多是基础前端的技术。 #### 3. 如何进行容器内的事件和 Pake 通信，比如说 Web 的拖拽、滚动、特殊点击传递啥的？参考 `pake.js` 中通信代码 `postMessage`，写好事件监听，然后用 `window.ipc.postMessage` 将事件以及参数传递出来，然后参考容器接收事件 `window.drag_window`，自己处理即可，更多可以参考 tauri 以及 wry 的官方文档。 ## 贡献者

_Tw93	_Tlntin	_Pan93412	_{Bryan Lee}	_Horus	_Null	_Steam
_2nthony	_Aiello	_Hyzhao	_Null	_Ranger

## 支持 - 我有两只猫，一只叫汤圆，一只叫可乐，假如觉得 Pake 让你生活更美好，可以给汤圆可乐喂罐头 🥩🍤。 - 如果你喜欢 Pake，可以在 Github Star，更欢迎 [推荐](https://twitter.com/intent/tweet?url=https://github.com/tw93/Pake&text=Pake%20%E4%B8%80%E4%B8%AA%E5%BE%88%E7%AE%80%E5%8D%95%E7%9A%84%E7%94%A8%20Rust%20%E6%89%93%E5%8C%85%E7%BD%91%E9%A1%B5%E7%94%9F%E6%88%90%20Mac%20App%20%E7%9A%84%E5%B7%A5%E5%85%B7%EF%BC%8C%E7%9B%B8%E6%AF%94%E4%BC%A0%E7%BB%9F%E7%9A%84%20Electron%20%E5%A5%97%E5%A3%B3%E6%89%93%E5%8C%85%EF%BC%8C%E5%A4%A7%E5%B0%8F%E8%A6%81%E5%B0%8F%E5%B0%86%E8%BF%91%2040%20%E5%80%8D%EF%BC%8C%E4%B8%80%E8%88%AC%202M%20%E5%B7%A6%E5%8F%B3%EF%BC%8C%E5%BA%95%E5%B1%82%E4%BD%BF%E7%94%A8Tauri%20%EF%BC%8C%E6%80%A7%E8%83%BD%E4%BD%93%E9%AA%8C%E8%BE%83%20JS%20%E6%A1%86%E6%9E%B6%E8%A6%81%E8%BD%BB%E5%BF%AB%E4%B8%8D%E5%B0%91%EF%BC%8C%E5%86%85%E5%AD%98%E5%B0%8F%E5%BE%88%E5%A4%9A%EF%BC%8C%E6%94%AF%E6%8C%81%E5%BE%AE%E4%BF%A1%E8%AF%BB%E4%B9%A6%E3%80%81Twitter%E3%80%81Youtube%E3%80%81RunCode%E3%80%81Flomo%E3%80%81%E8%AF%AD%E9%9B%80%E7%AD%89%EF%BC%8C%E5%8F%AF%E4%BB%A5%E5%BE%88%E6%96%B9%E4%BE%BF%E4%BA%8C%E6%AC%A1%E5%BC%80%E5%8F%91~) 给你志同道合的朋友使用。 - 可以关注我的 [Twitter](https://twitter.com/HiTw93) 获取到最新的 Pake 更新消息，也欢迎加入 [Telegram](https://t.me/miaoyan) 聊天群。 ## 最后 1. 希望大伙玩的过程中有一种学习新技术的喜悦感，如果有新点子欢迎告诉我 2. 假如你发现有很适合做成桌面 App 的网页也很欢迎告诉我，我给加到里面来