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

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

此外，想要在工作時(shí)間更好地進(jìn)行「摸魚(yú)」，用電腦肯定會(huì)比用手機(jī)更安全。

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

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

安裝 nativefier

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

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

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

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

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

如果你還沒(méi)有安裝 Homebrew，可以通過(guò)下面這一條命令在終端進(jìn)行安裝。

/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

如果因?yàn)槟承┚W(wǎng)絡(luò)原因安裝緩慢，可以試試換成國(guó)內(nèi)的鏡像源。跑完進(jìn)度后，可以在終端中輸入 node -v 和 npm -v，測(cè)試一下版本，出現(xiàn)版本號(hào)即說(shuō)明安裝成功。

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

npm install nativefier -g

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

sudo npm install nativefier -g

搞定。接下來(lái)，我們就用 nativefier 來(lái)制作一個(gè) app。

使用

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

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

第一次運(yùn)行會(huì)下載 Eletron 框架，可能會(huì)慢一些。

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

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

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

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

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

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

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

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

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

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

這個(gè)頁(yè)面里有 4 個(gè) app 都是用 nativefier 生成的

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

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

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