無需安裝，只用一行代碼將網(wǎng)頁打包成桌面 app（把網(wǎng)頁打包成桌面應(yīng)用）

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

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

有了這兩個需求，我尋找了數(shù)款能夠?qū)?Web 轉(zhuǎn)換成 Mac app 的工具，但在體驗之后都發(fā)現(xiàn)會有這樣那樣的小問題，有一些甚至無法工作或是生產(chǎn)的 app 無法打開。

直到我發(fā)現(xiàn)了它 —— nativefier。

安裝 nativefier

nativefier 是一個基于 Electron 的命令行工具，完全開源，沒有 UI 界面，且無需安裝任何 app，只需要通過一行簡單的代碼，就可以輕松地將任何 Web 頁面打包成可以在桌面運行的 app，并且支持在Windows，Mac 甚至是 Linux 系統(tǒng)上運行。

P.S. 作者是一位在 Google 工作的軟件工程師，似乎是一位華人。

目前，nativefier 在 Github 上已經(jīng)獲得了 2.14 萬個 Star。

使用 nativefier 的過程非常簡單，但需要提前準(zhǔn)備一些東西。這里我以 macOS 作為演示，其它平臺大同小異，可以參考網(wǎng)上的其它教程。

首先，我們需要安裝 Node.js。你可以通過到 Node.js 的官方網(wǎng)站下載之后進行安裝，但我這里更推薦使用 Homebrew，這樣就可以在一個終端 app 里搞定全部的事情。

如果你還沒有安裝 Homebrew，可以通過下面這一條命令在終端進行安裝。

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

更多關(guān)于 Homebrew 的使用，可以參考這篇文章。

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

brew install node

如果因為某些網(wǎng)絡(luò)原因安裝緩慢，可以試試換成國內(nèi)的鏡像源。跑完進度后，可以在終端中輸入 node -v 和 npm -v，測試一下版本，出現(xiàn)版本號即說明安裝成功。

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

npm install nativefier -g

如果提示權(quán)限不足，可以試試在前面加上 sudo：

sudo npm install nativefier -g

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

使用

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

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

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

命令執(zhí)行完畢后，會生成一個大小在 120 – 150M 左右的，名為「 —darwin-x64」的文件夾。如果你沒有更改運行地址，那么會默認(rèn)出現(xiàn)在你的個人文件夾中。

點擊進入文件夾內(nèi)，就能看到剛剛制作好的 app 了。將這個 app 拖入到應(yīng)用程序文件夾中，它就會出現(xiàn)在 Lanchpad 里。

一個網(wǎng)頁打包的少數(shù)派 for Mac app 就做好了。

上面的這個方法，會自動抓取網(wǎng)站的名字和 Logo 來作為名稱及 app 圖標(biāo)。但有時，nativefier 也會「翻車」（比如上面 app 名字顯示成了「–」），這時候就需要我們自定義 app 的名稱?？梢杂孟旅孢@條命令：

nativefier –name "在這里輸入 app 名字" "http://www.sspai.com"

注意，這個 app 名字不支持中文。如果你想要更改中文的 app 名稱，可以在 nativefier 制作好的 app 上直接更改，再拖入到應(yīng)用程序文件夾中。

不過，nativefier 有個小瑕疵：由于有些網(wǎng)站的圖標(biāo)或 logo 形狀不好看，又或者太丑、分辨率太低，導(dǎo)致有些時候生成的 app 圖標(biāo)無法令人滿意。

這個問題其實也有解決辦法。nativefier 提供了一個 –icon 的參數(shù)，只要我們準(zhǔn)備一張 png 格式的圖片，就可以應(yīng)用成圖標(biāo)了。

如果你不太明白上面在說什么，你也可以手動進行替換。提前準(zhǔn)備好一個 icns 格式的圖標(biāo)，并命名為「electron.icns」，然后在生成好的 app 上右鍵點擊「查看包內(nèi)容」，進入「Contents – Resources」，將我們準(zhǔn)備好的圖標(biāo)放到里面替換原來的圖標(biāo)即可。

例如，我這里就用 Sketch 為 Tinde 和小特畫了一個和 macOS Catalina 原生風(fēng)格類似的高清圖標(biāo) ，然后再用 Image2icon 轉(zhuǎn)換成 icns 格式，替換之后，就沒有這么強烈的「像素風(fēng)」了，違和感也降低了不少。

這個頁面里有 4 個 app 都是用 nativefier 生成的

除了這些之外，nativefier 還提供了很多可供選擇的參數(shù)，例如是否要限制 app 窗口的寬高、是否顯示菜單欄、、是否在關(guān)閉時推出、是否開啟 flash 支持等等，你可以在終端直接輸入 nativefier 或 nativefier -h 來查看，或者是閱讀官方的 API 文檔 來學(xué)習(xí)。

哦對了，nativefier 制作的 app，甚至還支持調(diào)用系統(tǒng)的推送。例如將微信網(wǎng)頁版打包成 app 之后，有新消息來時，一樣也能夠收到新消息通知。

好了，nativefier 就給大家介紹到這里，我要用剛打包好的 app 去摸魚了。