Electron vs PWA：誰(shuí)才是最后贏家？
嗨，我是你穩(wěn)定更新、持續(xù)輸出的勾勾。
今天的內(nèi)容來(lái)自 Kasra 的文章《Electron vs PWA: The Pros And Cons Of Both Approaches》。
這兩種技術(shù)放在同一維度進(jìn)行比較略顯怪異，不過(guò)也可以看看 Kasra 到底得出了什么樣的結(jié)論。在閱讀過(guò)程中，這篇文章可以幫助我們繼續(xù)加深對(duì)這兩個(gè)技術(shù)的理解。
Web 頁(yè)面是非常神奇的，它不受任何公司的操控，每一個(gè)開(kāi)發(fā)者都可以在 Web 上開(kāi)發(fā)軟件。任何人都可以訪問(wèn) Web 應(yīng)用程序，但是對(duì)于用戶來(lái)說(shuō)，體驗(yàn)可能大不相同。他們可以出現(xiàn)在桌面，或是瀏覽器，甚至是在網(wǎng)絡(luò)連接極弱的時(shí)候，會(huì)出現(xiàn)在任務(wù)欄中。
同樣，Electron 是一個(gè)幫助開(kāi)發(fā) Web 應(yīng)用的框架，使用的語(yǔ)言是 HTML，CSS和JavaScript 等等，兼容后就可以在 Windows、Mac 等系統(tǒng)上運(yùn)行。
PWA （ Progressive Web Apps）為用戶提供可靠又簡(jiǎn)便的應(yīng)用。這些 Web 應(yīng)用使用漸進(jìn)式的 APIs。用戶可以在任意時(shí)間和地點(diǎn)使用，并且該應(yīng)用有著增強(qiáng)特性和穩(wěn)定性。
為了搞清楚哪種跨平臺(tái)桌面應(yīng)用是最好，我們還需要了解 Eletron 和 PWA 的優(yōu)缺點(diǎn)。
Electron 優(yōu)點(diǎn)
?
1）使用 CSS，HTML，JS 語(yǔ)言
這是 Electron 最好的一點(diǎn)，這些語(yǔ)言都是很容易學(xué)習(xí)的，并且使用方便。
?
2）最佳桌面應(yīng)用替代方案
Electron 的行為幾乎就像你的本地 Web 應(yīng)用程序，所以理解它們不會(huì)有任何困難。雖然傳統(tǒng)的 Web 應(yīng)用程序只能從計(jì)算機(jī)上下載文件，Electron 除了訪問(wèn)計(jì)算機(jī)的文件系統(tǒng)之外，還可以讀寫數(shù)據(jù)。
3）基于 Chromium 引擎的 UI 呈現(xiàn)
UI 呈現(xiàn)是選擇 Electron 的最佳好處之一。使用 Chromium 引擎，可以訪問(wèn)它的所有嵌入特性。
另一個(gè)特性是，即使在修改代碼之后也不需要重新啟動(dòng)應(yīng)用程序。這意味著它在簡(jiǎn)化用戶體驗(yàn)的同時(shí)就立刻重新加載了。在這種情況下，您不需要外部 Debugger，因?yàn)?Chromium 引擎可以檢測(cè)內(nèi)存泄漏和其他錯(cuò)誤。
4）包含大量功能型的 API
Electron 的各種 API 可以很容易地集成到桌面應(yīng)用程序中，這節(jié)省了開(kāi)發(fā)人員大量的時(shí)間。
5）社區(qū)支持
在巨大的社區(qū)支持的幫助下，你可以重新使用 package 并進(jìn)一步開(kāi)發(fā)它們，而無(wú)需從頭開(kāi)始。大量的 package 可以被使用，它們被設(shè)計(jì)用來(lái)縮短開(kāi)發(fā)過(guò)程。
Electron 缺點(diǎn)
1）占用更大的磁盤空間
如上所述，Electron 運(yùn)行在 Chromium 上，所以要使用一個(gè) Electron App，你必須下載它的 Chromium 版本。
而 Chromium 由大約 2000 萬(wàn)行代碼組成，它的大小與您的操作系統(tǒng)差不多。所以為了運(yùn)行一個(gè)應(yīng)用，你必須在現(xiàn)有的操作系統(tǒng)上安裝另一個(gè)操作系統(tǒng)。
2）存在代碼泄露風(fēng)險(xiǎn)
Electron 中代碼被盜的風(fēng)險(xiǎn)相當(dāng)高，任何人都可以輕易得到你的代碼，因?yàn)槟愕拇a并沒(méi)有經(jīng)過(guò)加密，最多也只是做了一下壓縮。
PWA 的優(yōu)點(diǎn)
1）高度可訪問(wèn)性
開(kāi)發(fā)人員認(rèn)為 PWA 是本地應(yīng)用程序和 Web 應(yīng)用程序的融合，因?yàn)?PWA 可以隨時(shí)在線訪問(wèn)。在網(wǎng)絡(luò)連接較差的情況下，PWA 會(huì)使用它在最后一次交互時(shí)緩存的數(shù)據(jù)。因此，即使在互聯(lián)網(wǎng)關(guān)閉時(shí)，用戶在訪問(wèn) PWA 時(shí)也不會(huì)遇到任何問(wèn)題。
2）開(kāi)發(fā)成本低
由于 PWA 可以同時(shí)在多個(gè)平臺(tái)上運(yùn)行，因此開(kāi)發(fā)的成本明顯低于本地 Web 應(yīng)用程序。
3）便捷的安裝步驟
在安裝 PWA 時(shí)，你不會(huì)被跳轉(zhuǎn)到 App Store。此外，這些 Web 應(yīng)用程序可以直接在手機(jī)上下載，安裝過(guò)程超級(jí)快。由于 PWA 駐留在云服務(wù)器上，它們只占用您設(shè)備上的一小塊空間，因此以后不必?fù)?dān)心手機(jī)容量問(wèn)題。
4）包含推送通知
推送通知是在移動(dòng)設(shè)備上彈出的通知，以文本信息的形式提醒你一些事件。推送通知可以更新你的應(yīng)用信息，也可以提醒你即將發(fā)生的事件。PWA 用戶可以點(diǎn)擊推送消息，直接進(jìn)入 PWA 應(yīng)用。
?
PWA 的缺點(diǎn)
1）耗電量大
PWA 是用高級(jí)代碼編寫的，因此智能手機(jī)必須竭盡全力準(zhǔn)確地翻譯代碼來(lái)保證運(yùn)行。因此，優(yōu)先考慮長(zhǎng)電池壽命的用戶會(huì)不愿意考慮 PWA 應(yīng)用。
2）訪問(wèn)受限
PWA 不能訪問(wèn)設(shè)備的一些功能，包括設(shè)備的藍(lán)牙連接，NFC等。
Electron 和 PWA 對(duì)比
1）可用性
如果設(shè)備上有一個(gè) PWA 兼容的瀏覽器，那么我們可以在任何時(shí)候訪問(wèn) PWA，甚至不必連接到互聯(lián)網(wǎng)。
而 Electron 不能安裝在任何設(shè)備上，因?yàn)樗鼈兪亲烂鎽?yīng)用程序的高級(jí)版本。
2）性能
用戶覺(jué)得，在加載方面，PWA 比 Electron 具有更好的性能。這在一定程度上是因?yàn)榇蟛糠?Javascript 的開(kāi)銷被轉(zhuǎn)移到 Service Worker，從而減少了加載時(shí)間。
3）占用空間
Electron 應(yīng)用的大小都大于 50 MB，而大多數(shù) PWA 要小得多，它通常在 2MB 左右。
4）安全性
Electron 是一個(gè)封裝在本地 Web 應(yīng)用程序?qū)又械?Web 應(yīng)用，因此安全性不高，代碼保護(hù)也必須手工完成。
另一方面，PWA 的安全性更好，因?yàn)樗耆蕾囉?HTTPS，而 HTTPS 是由瀏覽器端控制的。
5）更新和集成
我們每個(gè)人在安裝和更新應(yīng)用程序時(shí)都會(huì)覺(jué)得有些麻煩，而 Electron 也不例外。但是，如果使用 PWA，那么所有的更新都將在服務(wù)器端進(jìn)行，在更新時(shí)將會(huì)減少很多麻煩。
?
結(jié)論
你發(fā)現(xiàn)了，PWA 顯然是贏家。
但是，PWA 并不是適用所有業(yè)務(wù)領(lǐng)域的一體化解決方案。如果你想自由地使用 Node.js 進(jìn)行開(kāi)發(fā)，你應(yīng)該選擇 Electron 而不是 PWA。
另外，Electron 允許訪問(wèn)存儲(chǔ)在操作系統(tǒng)中的所有 API，這意味著 Electron 會(huì)以用戶模式運(yùn)行。如果你覺(jué)得你的 APP 需要本地應(yīng)用提供的特性和功能，那么請(qǐng)選擇 Electron，但在其他情況下最好使用 PWA。
推薦閱讀：
開(kāi)發(fā)一個(gè)屬于自己的 web 服務(wù)器
女媧大戰(zhàn)蟲(chóng)族，背后到底有多少故事？
現(xiàn)代版戰(zhàn)國(guó)七雄爭(zhēng)霸，買菜大戰(zhàn)何時(shí)休？
前端人因?yàn)?Vue3 的 Ref-sugar 提案打起來(lái)了！
點(diǎn)點(diǎn)“贊”和“在看”，保護(hù)頭發(fā)，減少bug。