大家有没有一种感觉,很多网站其实做得非常优秀,但是它们就是没有开发 PC (电脑)版的客户端,比如知乎、GitHub、微信公众号。

如果我们大多数时间都是使用 PC 开发或者办公的,每次开始时我们都需要打开浏览器输入它们的网址,进入对应的页面。另外一个浏览器中我们可能会开各种各样的选项卡,少则两三个,多则一二十个,这就导致某些我们常用的甚至重度依赖的网站在切换的时候就会不怎么方便。

比如挤在一堆浏览器里面的 GitHub,选项卡已经被挤得看不全了:

这时候,如果我们能有一个客户端,即 Window 上的 exe 程序或 Mac 上的 app 应用程序,它们的名字就叫做 GitHub、微信公众平台等等,打开之后只单独负责呈现 GitHub、微信公众号的内容,我们就可以免去在浏览器中来回寻找站点和切换站点的麻烦。

甚至说,在 Windows 上我们可以直接把这个应用放在桌面或把它 Pin 到任务栏上, Mac 上我们可以直接将它固定到 Dock 栏上,这样一键就打开了,省时省力。如果使用了快捷启动软件,比如 Wox (Windows)或 Alfred(Mac),直接输入 GitHub 或者微信公众平台,那就更方便唤出了,简直不要太方便。

而且,我个人感觉,用客户端软件比用网页更有一种「踏实感」,不知道大家会不会也有这种感觉。

所以,如果能将这些常用的或者重度依赖的网站转成客户端软件,那就再方便不过了。

那么今天它来了,我发现了一款超级好用的生成软件的东西:nativefier

nativefier介绍

这里需要用到的一个工具,名字叫做 nativefier,是基于 electron 开发的,它的功能就是把任意的网页转成一个电脑客户端,即 Desktop Application,

有了这个软件,把网页转成电脑客户端只需要这么一条简单的命令:

nativefier <website>

nativefier安装

由于 nativefier 是基于 electron 开发的,而后者又是基于 Node.js 的,所以要使用它必须要安装 Node.js,建议安装 6.0 以上版本。

另外在 Linux 和 Mac 平台可能需要安装其他的依赖。

  • 在 Linux 上需要安装 Wine 并配置好环境变量。
  • 在 Mac 上需要安装 iconutil、imagemagick,这两个依赖是为了帮助程序处理 App 的 icon 的。

具体的安装说明可以参见官方的Github:

https://github.com/jiahaog/nativefier

以上步骤完成之后,使用 npm 安装 nativefier 即可:

npm install nativefier -g

安装完毕之后便可以使用 nativefier 命令了。

nativefier进阶使用

设置.exe(Win系统下)的名字

nativefier --name 教书的先生 uppez.github.io

设置 .exe (Win系统下)的图标

nativefier --name 教书的先生 --icon ./blog.png https://uppez.github.io

注意:

  • Windows 上需要 ico 格式。
  • Linux 上需要 png 格式。
  • Mac 上需要 icns 格式,如果安装了上文所需要的依赖,使用 png 格式也是可以的。

如果大家还有其他的特别需求,可以查看官方文档的API:

https://github.com/jiahaog/nativefier/blob/master/docs/api.md#api

另外生成的客户端软件是不支持插件的,如果你的站点对某些插件的依赖比较强,那就不建议使用 nativefier 转成的客户端了。

实例展示

当我打包我的博客后:

里面的内容有:

最终生产的.exe的软件为:

效果非常好,欣慰~嘻嘻嘻嘻....