当前位置:首页 > 技术分析 > 正文内容

25.4K Star!轻松将任何网页打包成桌面应用

ruisui882个月前 (03-01)技术分析10


我们经常要打开多个网页应用,尤其是一些常用在线工具,每次都得从浏览器中来回切换标签页,实在太麻烦了。

而且浏览器打开的标签页一多,电脑还会出现卡顿情况,让我们非常的困扰。

最近,我在 GitHub 上发现了一款能将任何网页轻松打包成多端桌面应用的开源工具:Pake

它能把我们常用的网页直接变成桌面应用,一键就能打开,无需再频繁切换浏览器,最棒的是它占用的资源非常少。

用上 Pake 之后,对我来说,Pake 不仅简化了操作,还大大提升了日常使用的效率。

接下来,让我带大家详细了解它。

项目特点

  • 相比 Electron 打包,更加轻量小巧,安装包要小将近 20 倍,仅仅 5M 上下。
  • 基于 Rust Tauri 框架,速度更快、性能更好、内存更小;
  • 实现了快捷键的透传、沉浸式的窗口、拖动、样式改写、去广告、风格定制等特性
  • 提供命令行一键打包,并支持 Mac、Windows、Linux 系统;
  • 项目完全开源免费,并提供众多常用包下载。

热门安装包

ChatGPT

YouTube

Poe

小红书

以上,应用均可以到 Release 页面找到对应安装包,感兴趣的可以去下载安装。

使用指南

作为刚接触 Pake 的同学,建议先下载前面列举的热门安装包先体验 Pake 的能力。

如果对此感兴趣了,即使你是技术小白也能轻松上手使用 Pake,因为它提供了「命令行一键打包」工具。

可以更快捷方便地一键自定义打你需要的安装包。尤其对于 Mac 用户来说,执行如下命令即可:

# 使用 npm 进行安装
npm install -g pake-cli
# 命令使用
pake url [OPTIONS]...
# 随便玩玩,首次由于安装环境会有些慢,后面就快了
pake https://weekly.tw93.fun --name Weekly --hide-title-bar

如果你不会使用命令行,也可选择 GitHub Actions 在线编译多系统版本,在项目上提供详细教程,按步骤操作即可。

定制开发

如果你是一名开发者,需要对项目进行二次开发,请保证环境安装了 Rust >= 1.63Node >= 16

此外,还需要参考 Tauri 文档快速配置好环境才可以开始使用,执行如下命令:

# 安装依赖
npm i


# 本地开发[右键可打开调试模式]
npm run dev


# 打包应用
npm run build

高级用法

  1. 在开始二次开发前,建议先了解下项目的代码结构;
  2. 修改 src-tauri 目录下 pake.json 中的 urlproductName 字段,需同步修改下 tauri.config.json 中的 domain 字段,以及 tauri.xxx.conf.json 中的 iconidentifier 字段,其中 icon 可以从 icons 目录选择一个。如果没有找到合适的,可以去 macOSicons 下载符合效果的。
  3. 关于窗口属性设置,可以在 pake.json 修改 windows 属性对应的 width/height,fullscreen 是否全屏,resizable 是否可以调整大小。比如你想适配 Mac 沉浸式头部,可以将 hideTitleBar 设置成 true,找到 Header 元素加一个 padding-top 样式即可,不想适配改成 false 也行。
  4. 更多如样式改写、屏蔽广告、逻辑代码注入、容器消息通信、自定义快捷键等可看项目 高级用法

写在最后

以上,便是 Pake 工具的详细介绍。

总的来说,Pake 能帮我们快速将网页打包成轻量、快捷的桌面应用,解决浏览器占用资源问题,轻松提升日常使用体验。

扫描二维码推送至手机访问。

版权声明:本文由ruisui88发布,如需转载请注明出处。

本文链接:http://www.ruisui88.com/post/2361.html

分享给朋友:

“25.4K Star!轻松将任何网页打包成桌面应用” 的相关文章

vue3父子组件传对象,子组件访问修改父组件对象中的属性值

在Vue 3中,父子组件之间的数据传输通常通过props和emit进行。父组件可以通过props向下传递数据给子组件,子组件则可以通过emit向上通知父组件更新数据。如果需要在子组件中修改父组件对象中的属性值,可以使用一个名为ref的Vue 3新特性。以下是一个示例,演示了如何在Vue 3中实现父子...

vue组件间的九种通信方式

前言Vue组件实例间的作用域是相互独立的,而通常一个页面是由很多个组件构成,这些组件可能又嵌套了组件,形成了一个关系网图,它们的关系可能是像下图中一样,大致分为两种使用场景,父子组件间通信和非父子组件间通信,父子组件间通信又分为直接父子关系和间接父子关系。vue提供了多种通信方法,针对不同的通信需求...

用IDEA开发如何用Git快速拉取指定分支代码?

1,准备空的文件夹,git init2,关联远程仓库,git remote add origin gitlab地址3,拉取远程分支代码,git pull origin 远程分支名再用IDEA打开项目即可...

多项修正 尼康D4s发布最新1.10版固件

尼康公司与2014年8月27日发布了D4s的最新固件,固件版本号为C:1.10。这次固件升级,主要解决了一些BUG,并且对拍摄菜单与相机操作做了一定调整。下面是本次新固件的具体信息:尼康发布D4s最新C固件 1.10版对C固件升级到1.10版所作的修改:当选定运动VR模式并换上 AF-S 尼克尔 4...

vue 开发规范

项目运行指南(#项目运行指南)开发本地环境(#开发本地环境)开发相关插件/工具(#开发相关插件工具)开发规范(#开发规范)vue(#vue)【数据流向】(#数据流向)【慎用全局注册】(#慎用全局注册)【组件名称】(#组件名称)【组件中的 CSS】(#组件中的-css)【统一标签顺序】(#统一标签顺序...

vue开发微信小程序 - 登录组件

移动端登录功能抽象为通用组件,满足:不同移动端应用中一键登录功能复用支持多种登录:微信登录、H5、QQ登录登录组件使用//引用登录组件 import login from "../components/user/login.vue" export default { compone...