將網(wǎng)站轉(zhuǎn)換為本地應(yīng)用程序（無論是在移動設(shè)備還是臺式機(jī)上）都非常有用。書簽的問題特別是對于軟件工程師而言，是我們經(jīng)常需要在不同的瀏覽器中工作，因此在一個瀏覽器的書簽集中設(shè)置所有內(nèi)容可能會很麻煩。我也認(rèn)為具有特定用途區(qū)域的網(wǎng)站是將網(wǎng)站轉(zhuǎn)換為桌面應(yīng)用程序的絕佳案例。我最近發(fā)現(xiàn)了nativefier，這是一個開放源代碼實(shí)用程序，它通過將網(wǎng)站包裝在Electron中來創(chuàng)建本地桌面應(yīng)用程序。

安裝

您可以使用NPM安裝nativefier和node-icns，我們將使用它們來為應(yīng)用創(chuàng)建自定義圖標(biāo)：

npm install -g nativefier # App creator
npm install -g node-icns  # Icon creator

nativefier文檔提供了一種用于創(chuàng)建桌面應(yīng)用程序圖標(biāo)的方法，但是需要ImageMagick和iconutils-node-icns可以減輕您的痛苦。

創(chuàng)建應(yīng)用程序圖標(biāo)

在創(chuàng)建應(yīng)用程序本身之前創(chuàng)建應(yīng)用程序圖標(biāo)很重要。您可以創(chuàng)建帶有節(jié)點(diǎn)圖標(biāo)和所選圖像的應(yīng)用程序圖標(biāo)：

# Generate icon set required by macOS
nicns --in app-icon.png --out app-icon.icns

使用高質(zhì)量的方形PNG-將保留透明度，并且文件大小無關(guān)緊要，因?yàn)槲募⒈Ａ粼谀挠嬎銠C(jī)上。

創(chuàng)建應(yīng)用

nativefier提供了許多配置參數(shù)，可用于創(chuàng)建應(yīng)用程序。讓我們使用許多有用的參數(shù)創(chuàng)建一個應(yīng)用程序：

nativefier 
    --name "David Walsh Blog" 
    --verbose 
    --counter 
    --icon app-icons.icns 
    --fast-quit 
    --inject custom-css.css 
    --inject custom-js.js 
    --flash # gross
    "https://davidwalsh.name"

將生成一個名為“ {appname} -darwin-x64”的目錄，該目錄中將包含應(yīng)用程序文件，您可以將其拖動到Applications 文件夾（或任何等效于OS的文件夾）和擴(kuò)展塢中。您會注意到，您可以添加自定義用戶JavaScript和CSS文件，以便隱藏廣告，修改顏色和行為等。本-counter argument特別有意思-如Gmail的Web App更新其<title> 標(biāo)記為偽通知將觸發(fā)一個紅色通知點(diǎn)在應(yīng)用程序圖標(biāo)，當(dāng)某一更新。

像IRCCloud這樣的Web應(yīng)用程序和像DevDocs這樣的網(wǎng)站都是轉(zhuǎn)換為桌面應(yīng)用程序的理想選擇。