hifizz / jike

把即刻打包成独立的桌面应用

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

中文 | English

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 下载可以去 Releases 中看看。

快捷键

Mac Windows/Linux 功能
+ [ Ctrl + 返回上一个页面
+ ] Ctrl + 去下一个页面
+ Ctrl + 自动滚动到页面顶部
+ Ctrl + 自动滚动到页面底部
+ r Ctrl + r 刷新页面
+ w Ctrl + w 隐藏窗口,非退出
+ - Ctrl + - 缩小页面
+ w Ctrl + + 放大页面
+ = Ctrl + = 放大页面
+ 0 Ctrl + 0 重置页面缩放

此外还支持双击头部进行全屏切换,拖拽头部进行移动窗口,还有其他需求,欢迎提过来。

注意点

  • Windows 下不能安装到 C:\Program File,会直接闪退。建议安装到其他目录,比如 D:\Program Files。
  • Linux 下暂时不能存 cookie,即应用关闭后数据清空,账号自动推出。

开发

开始前参考 Tauri 快速配置好环境。

// 安装依赖
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 下载符合产品名称的
  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
Tw93
Tlntin
Tlntin
pan93412
Pan93412
liby
Bryan Lee
m1911star
Horus
QingZ11
Steam
2nthony
2nthony
AielloChan
Aiello
houhoz
Hyzhao
liusishan
Null
piaoyidage
Ranger

支持

  • 我有两只猫,一只叫汤圆,一只叫可乐,假如觉得 Pake 让你生活更美好,可以给汤圆可乐 喂罐头 🥩🍤
  • 如果你喜欢 Pake,可以在 Github Star,更欢迎 推荐 给你志同道合的朋友使用。
  • 可以关注我的 Twitter 获取到最新的 Pake 更新消息,也欢迎加入 Telegram 聊天群。

最后

  1. 希望大伙玩的过程中有一种学习新技术的喜悦感,如果有新点子欢迎告诉我
  2. 假如你发现有很适合做成桌面 App 的网页也很欢迎告诉我,我给加到里面来

About

把即刻打包成独立的桌面应用

License:MIT License


Languages

Language:Rust 37.3%Language:JavaScript 26.8%Language:Shell 18.4%Language:Batchfile 10.4%Language:Python 7.1%