由於每天日常的工作需要，我需要接觸大量的外文資料，因此，一個好用的翻譯工具必不可少。得益於 Google 在翻譯上的優秀表現，將它作為我的主要翻譯工具使用也是無可爭議。但是在使用中經常會發現，web 端的頁面總是會在不經意間被手滑關掉，要用的時候找了一會才發現需要重新開啟。

此外，想要在工作時間更好地進行「摸魚」，用電腦肯定會比用手機更安全。

有了這兩個需求，我尋找了數款能夠將 Web 轉換成 Mac app 的工具，但在體驗之後都發現會有這樣那樣的小問題，有一些甚至無法工作或是生產的 app 無法開啟。

直到我發現了它 —— 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)"

更多關於 Homebrew 的使用，可以參考這篇文章。

安裝好 Homebrew，就可以安裝 Node.js 了。在終端內輸入：

brew install node

如果因為某些網路原因安裝緩慢，可以試試換成國內的映象源。跑完進度後，可以在終端中輸入 node -v 和 npm -v，測試一下版本，出現版本號即說明安裝成功。

有了 Node.js，我們就可以來安裝 nativefier 本體了。同樣是在終端，輸入下面的命令：

npm install nativefier -g

如果提示許可權不足，可以試試在前面加上 sudo：

sudo npm install nativefier -g

搞定。接下來，我們就用 nativefier 來製作一個 app。

最簡單的使用方法，只需要用 nativefier 加上一個你需要轉換成的網站地址就可以了。例如：

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

第一次執行會下載 Eletron 框架，可能會慢一些。

命令執行完畢後，會生成一個大小在 120 - 150M 左右的，名為「 ---darwin-x64」的資料夾。如果你沒有更改執行地址，那麼會默認出現在你的個人資料夾中。

上面的這個方法，會自動抓取網站的名字和 Logo 來作為名稱及 app 圖示。但有時，nativefier 也會「翻車」（比如上面 app 名字顯示成了「--」），這時候就需要我們自定義 app 的名稱。可以用下面這條命令：

注意，這個 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 去摸魚了。