無需安裝，只用一行代碼將網頁打包成桌面 app（把網頁打包成桌面應用）

由于每天日常的工作需要，我需要接觸大量的外文資料，因此，一個好用的翻譯工具必不可少。得益于 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)"

更多關于 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」的文件夾。如果你沒有更改運行地址，那么會默認出現在你的個人文件夾中。

點擊進入文件夾內，就能看到剛剛制作好的 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 去摸魚了。