无需安装，只用一行代码将网页打包成桌面 app「终于解决」

欢迎大家来到IT世界,在知识的湖畔探索吧!

由于每天日常的工作需要，我需要接触大量的外文资料，因此，一个好用的翻译工具必不可少。得益于 Google 在翻译上的优秀表现，将它作为我的主要翻译工具使用也是无可争议。但是在使用中经常会发现，web 端的页面总是会在不经意间被手滑关掉，要用的时候找了一会才发现需要重新打开。

此外，想要在工作时间更好地进行「摸鱼」，用电脑肯定会比用手机更安全。

有了这两个需求，我寻找了数款能够将 Web 转换成 Mac app 的工具，但在体验之后都发现会有这样那样的小问题，有一些甚至无法工作或是生产的 app 无法打开。

直到我发现了它 —— nativefier。

安装 nativefier

nativefier 是一个基于 Electron 的命令行工具，完全开源，没有 UI 界面，且无需安装任何 app，只需要通过一行简单的代码，就可以轻松地将任何 Web 页面打包成可以在桌面运行的 app，并且支持在Windows，Mac 甚至是 Linux 系统上运行。

P.S. 作者是一位在 Google 工作的软件工程师，似乎是一位华人。

目前，nativefier 在 Github 上已经获得了 2.14 万个 Star。

使用 nativefier 的过程非常简单，但需要提前准备一些东西。这里我以 macOS 作为演示，其它平台大同小异，可以参考网上的其它教程。

首先，我们需要安装 Node.js。你可以通过到 Node.js 的官方网站下载之后进行安装，但我这里更推荐使用 Homebrew，这样就可以在一个终端 app 里搞定全部的事情。

如果你还没有安装 Homebrew，可以通过下面这一条命令在终端进行安装。

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

欢迎大家来到IT世界,在知识的湖畔探索吧!

更多关于 Homebrew 的使用，可以参考这篇文章。

安装好 Homebrew，就可以安装 Node.js 了。在终端内输入：

欢迎大家来到IT世界,在知识的湖畔探索吧!brew install node

如果因为某些网络原因安装缓慢，可以试试换成国内的镜像源。跑完进度后，可以在终端中输入 node -v 和 npm -v，测试一下版本，出现版本号即说明安装成功。

有了 Node.js，我们就可以来安装 nativefier 本体了。同样是在终端，输入下面的命令：

npm install nativefier -g

如果提示权限不足，可以试试在前面加上 sudo：

欢迎大家来到IT世界,在知识的湖畔探索吧!sudo npm install nativefier -g

搞定。接下来，我们就用 nativefier 来制作一个 app。

使用

最简单的使用方法，只需要用 nativefier 加上一个你需要转换成的网站地址就可以了。例如：

nativefier "https://www.sspai.com"

第一次运行会下载 Eletron 框架，可能会慢一些。

命令执行完毕后，会生成一个大小在 120 – 150M 左右的，名为「 —darwin-x64」的文件夹。如果你没有更改运行地址，那么会默认出现在你的个人文件夹中。

点击进入文件夹内，就能看到刚刚制作好的 app 了。将这个 app 拖入到应用程序文件夹中，它就会出现在 Lanchpad 里。

一个网页打包的少数派 for Mac app 就做好了。

上面的这个方法，会自动抓取网站的名字和 Logo 来作为名称及 app 图标。但有时，nativefier 也会「翻车」（比如上面 app 名字显示成了「–」），这时候就需要我们自定义 app 的名称。可以用下面这条命令：

nativefier --name "在这里输入 app 名字" "http://www.sspai.com"

注意，这个 app 名字不支持中文。如果你想要更改中文的 app 名称，可以在 nativefier 制作好的 app 上直接更改，再拖入到应用程序文件夹中。

不过，nativefier 有个小瑕疵：由于有些网站的图标或 logo 形状不好看，又或者太丑、分辨率太低，导致有些时候生成的 app 图标无法令人满意。

这个问题其实也有解决办法。nativefier 提供了一个 –icon 的参数，只要我们准备一张 png 格式的图片，就可以应用成图标了。

如果你不太明白上面在说什么，你也可以手动进行替换。提前准备好一个 icns 格式的图标，并命名为「electron.icns」，然后在生成好的 app 上右键点击「查看包内容」，进入「Contents – Resources」，将我们准备好的图标放到里面替换原来的图标即可。

例如，我这里就用 Sketch 为 Tinde 和小特画了一个和 macOS Catalina 原生风格类似的高清图标 ，然后再用 Image2icon 转换成 icns 格式，替换之后，就没有这么强烈的「像素风」了，违和感也降低了不少。

这个页面里有 4 个 app 都是用 nativefier 生成的

除了这些之外，nativefier 还提供了很多可供选择的参数，例如是否要限制 app 窗口的宽高、是否显示菜单栏、、是否在关闭时推出、是否开启 flash 支持等等，你可以在终端直接输入 nativefier 或 nativefier -h 来查看，或者是阅读官方的 API 文档 来学习。

哦对了，nativefier 制作的 app，甚至还支持调用系统的推送。例如将微信网页版打包成 app 之后，有新消息来时，一样也能够收到新消息通知。

好了，nativefier 就给大家介绍到这里，我要用刚打包好的 app 去摸鱼了。