把网页变成一个App的几种方式探索

1,121 阅读5分钟

背景

作为一个编辑器爱好者,对各种编辑器的花式热爱,推动着我不断探索文档工具,先后经历了有道云笔记,语雀,notion,石墨,最后来到了飞书文档。

想起那些使用石墨文档的日子,死去的回忆开始伤害我。石墨文档是我见过最最难用的编辑器,没有之一,界面丑,性能差,功能弱,加载慢,bug多,容易造成网页崩溃,随便一个缺点拿出来都不能忍,竟然这么多人付费使用,我不李姐……

终于,公司开始用飞书,首先从颜值上提升了一大截,协作功能也非常强大,美中不足加载有一点慢,快捷键刚开始很差,后来借鉴了语雀(可能是)也比较便捷了,说到语雀,语雀真是一款极其优秀的在线文档,尤其思维导图功能简直无敌。

公司开始用飞书文档之后,各方面都感觉好极了,但作为一款文档产品,没有客户端真的让人不能忍,有道云笔记有客户端,语雀有客户端,就连我不喜欢的石墨文档也有客户端。

可是飞书文档,竟然没有客户端……

为什么我对客户端的需求这么迫切?

我理想中的云文档,应该是开箱即用,一键唤起随时编辑的,比如notion,比如语雀,比如有道云。优秀的文档就是应该能在最短的时间内记录下用户的灵感,而不是要打开个浏览器,要输入个地址栏,点点点,点半天,我已经忘了我想写啥来着?

另外,你一边项目开发,一边查看PRD文档,突然有大哥一言不合扔给你个CR,测试又给你提了个问题,项目发布又需要你打开验证,tab越来越多,直到你的文档被淹没……各种网页标签来回切换,眼睛都快瞎了。

但是,飞书云文档,你为啥就没有个客户端呢?

没有,咱就自己做一个,早就听说过移动端的套壳网页APP,那么PC端的套壳网页APP岂不是同理,我感觉一定有人和我一样的困惑,说不定有人已经满足了这个需求。

思路

如何把一个网页变成一个独立应用?

  • Chrome标签另起一个对应网页的窗口,但是随着Chrome关闭,这个标签也被关闭了
  • Chrome浏览器起一个应用
  • electron开发,用webview内嵌一个网页
  • 其他网页转APP的方案……

解决方案

一、electron自己搭

映入我脑海的第一个东西就是electron,但是很遗憾,从最开始的配环境就劝退我了,Mac用户会遇到一个系统冲突导致命令行报错,网上有解决方案但是我没有动力去修,electron你这么大问题还不赶紧patch一个版本修复下,这是要摆烂啊。

用electron实现的方案很简单:

其他的代码都是默认的,只要添加一行即可mainWindow.loadURL('https://qima.feishu.cn/drive/home/')

卖家秀:

优点:简单,方便,快捷;

缺点:命令行有错误提示,编译需要Python等环境,有点麻烦;

二、tauri

但是许多类似electron的工具供我选择,比如tauri。

Tauri 是一个跨平台 GUI 框架,与 Electron 的思想基本类似。Tauri 的前端实现也是基于 Web 系列语言,Tauri 的后端使用 Rust。Tauri 可以创建体积更小、运行更快、更加安全的跨平台桌面应用。

npx create-tauri-app

执行tauri dev

优点:体积小(据说是);实际看也不小

缺点:webview需要借助rust代码实现

三、tauri封装版

配置文件中修改网页地址,名称和图标以及版本

执行yarn dev命令开发预览

优点:简单、易用、比较适合浏览性网站

缺点:内网空白、不好卸载、浏览器版本低部分功能不可用

四、nativefier(强烈推荐👍🏻)

传送门:github.com/nativefier/…

yarn global add nativefier

nativefier -n fdoc -a arm64 https://doc.feishu.cn
  • -n指定App的名称,最好用英文
  • -a arm64专门打包适配m1的Mac软件,不加的话打默认版本,对比了一下,适配m1之后稍微流畅了一点

自定义icon:支持icos,ico,png等格式,支持存在本地,命令行输入相对路径即可

nativefier -n fdoc -a arm64 https://doc.feishu.cn/ --ico
n ./icons/fdoc.icns

生成一个内网地址试试:

nativefier -n yzbus -a arm64 --icon ./icons/bus.icns https://***.com/Home

还行……

五、Chrome应用

  • 更多工具——创建快捷方式

image.png

image.png

总结

  • 使用nativefier完美打出了飞书云文档的APP,满足需求!
  • 同时Pake:github.com/tw93/pake.g… 上面也有很多已经打好的APP,安装体积非常小,比如微信阅读,比如flomo,推特和YouTube,可以直接下载使用,实际体验发现,虽然安装包体积很小,但实际使用中内存占用并不少,而且一些复杂网站,比如飞书云文档,打出来没法用,可能是内核阉割得太过导致,但总归是个优秀的项目!

参考资料