由于每天日常的工作需要，我需要接觸大量的外文資料，因此，一個(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)作為名稱(chēng)及 app 圖標(biāo)。但有時(shí)，nativefier 也會(huì)「翻車(chē)」（比如上面 app 名字顯示成了「–」），這時(shí)候就需要我們自定義 app 的名稱(chēng)。可以用下面這條命令：
nativefier –name "在這里輸入 app 名字" "http://www.sspai.com"
注意，這個(gè) app 名字不支持中文。如果你想要更改中文的 app 名稱(chēng)，可以在 nativefier 制作好的 app 上直接更改，再拖入到應(yīng)用程序文件夾中。
不過(guò)，nativefier 有個(gè)小瑕疵：由于有些網(wǎng)站的圖標(biāo)或 logo 形狀不好看，又或者太丑、分辨率太低，導(dǎo)致有些時(shí)候生成的 app 圖標(biāo)無(wú)法令人滿(mǎn)意。
這個(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)格類(lèi)似的高清圖標(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ú)了。
版權(quán)聲明：本文內(nèi)容由互聯(lián)網(wǎng)用戶(hù)自發(fā)貢獻(xiàn)，該文觀點(diǎn)僅代表作者本人。本站僅提供信息存儲(chǔ)空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如發(fā)現(xiàn)本站有涉嫌抄襲侵權(quán)/違法違規(guī)的內(nèi)容， 請(qǐng)發(fā)送郵件至 舉報(bào)，一經(jīng)查實(shí)，本站將立刻刪除。