如果我們大多數時間都是使用 PC 開發或者辦公的，每次開始時我們都需要開啟瀏覽器輸入它們的網址，進入對應的頁面。另外一個瀏覽器中我們可能會開各種各樣的選項卡，少則兩三個，多則一二十個，這就導致某些我們常用的甚至重度依賴的網站在切換的時候就會不怎麼方便。

比如擠在一堆瀏覽器裡面的 GitHub，選項卡已經被擠得看不全了：

這時候，如果我們能有一個客戶端，即 Window 上的 exe 程式或 Mac 上的 app 應用程式，它們的名字就叫做 GitHub、微信公眾平臺等等，開啟之後只單獨負責呈現 GitHub、微信公眾號的內容，我們就可以免去在瀏覽器中來回尋找站點和切換站點的麻煩。

甚至說，在 Windows 上我們可以直接把這個應用放在桌面或把它 Pin 到工作列上， Mac 上我們可以直接將它固定到 Dock 欄上，這樣一鍵就打開了，省時省力。如果使用了快捷啟動軟體，比如 Wox （Windows）或 Alfred（Mac），直接輸入 GitHub 或者微信公眾平臺，那就更方便喚出了，簡直不要太方便。

而且，我個人感覺，用客戶端軟體比用網頁更有一種「踏實感」，不知道大家會不會也有這種感覺。

所以，如果能將這些常用的或者重度依賴的網站轉成客戶端軟體，那就再方便不過了。

比如我用的是 Mac，把 GitHub 轉成客戶端軟體之後，我習慣性用 Alfred 撥出：

然後就打開了一個 GitHub.app：

然後把它固定到 Dock 欄上：

就彷彿擁有了一個 GitHub 的客戶端，功能與網頁一模一樣，再也不用在瀏覽器裡面切來切去。而且也不用擔心版本更新的問題，因為它就是開了一個獨立的網頁，網頁改版或者更新，內容就隨著更新。

是不是很方便呢？

如果你覺得是，那就隨著我來了解一下怎樣實現吧。

nativefier

這裡需要用到的一個工具，名字叫做 nativefier，是基於 electron 開發的，它的功能就是把任意的網頁轉成一個電腦客戶端，即 Desktop Application，

有了這個軟體，把網頁轉成電腦客戶端只需要這麼一條簡單的命令：

nativefier <website>

比如把 Whatsapp 的網站打包成一個客戶端就只需要執行這樣的命令：

nativefier web.whatsapp.com

示意如下：

怎樣，不論是什麼網頁，就可以使用它來轉換成一個客戶端軟體。

另外它支援三大作業系統，Windows、Linux、Mac，即用它可以將網頁轉成 .exe、.app 等格式。

安裝

那麼這軟體究竟具體怎麼來使用呢，第一步當然就是安裝了。

由於 nativefier 是基於 electron 開發的，而後者又是基於 Node.js 的，所以要使用它必須要安裝 Node.js，建議安裝 6.0 以上版本。

另外在 Linux 和 Mac 平臺可能需要安裝其他的依賴。

•在 Linux 上需要安裝 Wine 並配置好環境變數。

•在 Mac 上需要安裝 iconutil、imagemagick，這兩個依賴是為了幫助程式處理 App 的 icon 的。

具體的安裝說明可以參見：https://github.com/jiahaog/nativefier#optional-dependencies。

以上步驟完成之後，使用 npm 安裝 nativefier 即可：

npm install nativefier -g

安裝完畢之後便可以使用 nativefier 命令了。

使用

下面我在 Mac 下以 GitHub 為例來介紹下怎樣將 GitHub 打包成一個客戶端軟體。

像剛才介紹的一樣，最簡單直接的，執行下面的命令就好了：

nativefier https://github.com

它會嘗試用 GitHub 主頁的 title 來命名這個客戶端，而 GitHub 的 title 比較長，叫做：

The worlds leading software development platform GitHub

所以它會生成這樣的一個客戶端軟體：

這個名字有點奇怪，我們可以使用命令的一個選項即可控制生成的客戶端的名稱，新增一個 name 引數即可：

nativefier --name GitHub https://github.com

這樣便會生成一個名為 GitHub 的客戶端：

另外我們可以看到客戶端的圖示也自動生成了，這個圖示怎麼來的呢？這個是用的 nativefier 維護的 icons，恰好 GitHub 在它們的收錄範圍內，所以就用上了。這些 icons 也是一個公開的 Repository，連結為：https://github.com/jiahaog/nativefier-icons，大家可以到這裡蒐集或者貢獻圖示。

如果我們覺得 nativefier 官方提供的圖示不好看，想要自定義圖示的話，也是可以的，只需要新增一個 icon 引數即可，這樣便可以指定本地圖片作為圖示來生成了。

但值得注意的是，不同平臺上要求的圖示格式不一樣。

•Windows 上需要 ico 格式。

•Linux 上需要 png 格式。

•Mac 上需要 icns 格式，如果安裝了上文所需要的依賴，使用 png 格式也是可以的。

具體的引數用法說明可以看：https://github.com/jiahaog/nativefier/blob/master/docs/api.md#icon。

好，那麼在 Mac 上我安裝了依賴，那就直接用 png 格式的圖示了。

在這裡我自己做了一個圓形的圖示如下，命名為 github.png：

然後把圖片使用下面的命令就可以自定義圖示了：

nativefier --name GitHub --icon ./github.png https://github.com

這樣就能生成自定義圖示的客戶端軟體了。

開啟之後，登入，我們就擁有了一個 GitHub 客戶端了，介面和網頁一模一樣，但是已經擺脫了混雜選項卡的干擾，示意如下：

好了，這就是基本的用法，其實大部分情況只需要這幾個引數就夠了，如果想了解功能大家可以參考官方的 API 文件：https://github.com/jiahaog/nativefier/blob/master/docs/api.md#api。

注意

在使用過程中我發現 name 引數對中文的支援並不好，總會生成一個 APP 的客戶端，在這裡推薦 name 使用英文名稱，比如知乎用 Zhihu，微信平臺用 WXMP 等等。

例如命令：

nativefier --name 知乎 --icon ./zhihu.png https://www.zhihu.com

可以用下面的命令代替：

nativefier --name Zhihu --icon ./zhihu.png https://www.zhihu.com

生成客戶端軟體知乎再手動修改下圖示的名稱即可。

另外生成的客戶端軟體是不支援外掛的，如果你的站點對某些外掛的依賴比較強，那就不建議使用 nativefier 轉成的客戶端了。

好了，這就是 nativefier 的基本用法，有了它我們就可以隨意地將網頁轉成客戶端軟體了，快來試試吧！