如何用一條命令將網頁轉成電腦 App
- 2019 年 10 月 30 日
- 筆記
來源：進擊的Coder
ID：FightingCoder
作者：崔慶才
閱讀本文大概需要 3 分鐘。
大家有沒有一種感覺，很多網站其實做得非常優秀，但是它們就是沒有開發 PC （電腦）版的客戶端，比如知乎、GitHub、微信公眾號。
如果我們大多數時間都是使用 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 的基本用法，有了它我們就可以隨意地將網頁轉成客戶端軟件了，快來試試吧！
END
