什么是PWA？關(guān)于漸進(jìn)式Web應(yīng)用程序
假設(shè)您需要訂餐 - 您可以通過(guò)該公司的應(yīng)用程序立即進(jìn)行訂餐。也許您需要政府服務(wù)——同樣的情況也適用。您甚至可以通過(guò)應(yīng)用程序獲得醫(yī)療緊急撥號(hào)服務(wù)。
從銀行業(yè)務(wù)到學(xué)習(xí)，從交易到購(gòu)物，無(wú)所不包的應(yīng)用程序應(yīng)有盡有。每個(gè)企業(yè)都有一個(gè)應(yīng)用程序，甚至我們的政府也將其服務(wù)簡(jiǎn)化為應(yīng)用程序形式。
等等，構(gòu)建和維護(hù)應(yīng)用程序很麻煩，而且對(duì)于小型企業(yè)來(lái)說(shuō)相當(dāng)昂貴，那么他們?nèi)绾喂芾砟兀?/p>
嗯，很簡(jiǎn)單：借助技術(shù)進(jìn)步，有一種選擇可以幫助小企業(yè)擺脫困境。此選項(xiàng)將應(yīng)用程序的功能與 Web 開發(fā)中使用的技術(shù)相結(jié)合，為企業(yè)構(gòu)建負(fù)擔(dān)得起的服務(wù) - 我說(shuō)的是漸進(jìn)式 Web 應(yīng)用程序。
讓我們深入了解 PWA 的全部含義。
（更|多優(yōu)質(zhì)內(nèi)|容：java567 點(diǎn) c0m）
什么是漸進(jìn)式 Web 應(yīng)用程序？
漸進(jìn)式 Web 應(yīng)用程序 (PWA) 是使用我們可能都了解和喜愛(ài)的 Web 技術(shù)（例如 HTML、CSS 和 JavaScript）構(gòu)建的應(yīng)用程序。但它們具有實(shí)際本機(jī)應(yīng)用程序的感覺(jué)和功能。等一下！原生應(yīng)用程序，這是什么意思？
本機(jī)應(yīng)用程序是使用特定編程語(yǔ)言為特定設(shè)備平臺(tái)（IOS 或 Android）構(gòu)建的軟件應(yīng)用程序。 PWA 具有推送通知和離線工作等功能。它們還基于現(xiàn)代 API 構(gòu)建和增強(qiáng)，這使得可以輕松提供改進(jìn)的功能以及可靠性以及將它們安裝在任何設(shè)備上的能力。
PWA 利用了龐大的網(wǎng)絡(luò)生態(tài)系統(tǒng)，其中包括插件、社區(qū)以及部署和維護(hù)網(wǎng)站的相對(duì)容易性，這與開發(fā)相當(dāng)困難的本機(jī)應(yīng)用程序相反。這意味著您可以快速輕松地構(gòu)建 PWA。
隨著它的流行，許多公司已經(jīng)轉(zhuǎn)向該產(chǎn)品，我傾向于認(rèn)為這是因?yàn)樗軌蛟?Android 和 iOS 上運(yùn)行，沒(méi)有太大區(qū)別。將產(chǎn)品作為 PWA 的頂級(jí)公司的一些很好的例子包括：Twitter、Pintrest、Uber、Tiktok、Spotify、Jumia（非洲領(lǐng)先的電子商務(wù)網(wǎng)站）等......
該產(chǎn)品的一個(gè)共同特點(diǎn)是它們都可以安裝在主屏幕上，能夠從您上次離開的位置離線工作，并提供與其本機(jī)應(yīng)用程序相當(dāng)?shù)捏w驗(yàn)和功能。
就像構(gòu)建本機(jī)移動(dòng)應(yīng)用程序時(shí)，應(yīng)該滿足一些期望才能制作出供消費(fèi)者使用的優(yōu)質(zhì)產(chǎn)品，同樣的情況也適用于 PWA。讓我們討論一下什么才是好的 PWA。
PWA 的特點(diǎn)
以下是開發(fā) PWA 時(shí)應(yīng)考慮的事項(xiàng)：
反應(yīng)能力
不同的公司生產(chǎn)具有不同屏幕尺寸的小工具，作為開發(fā)人員，您有責(zé)任確保所有不同的用戶都喜歡該產(chǎn)品，無(wú)論他們使用什么設(shè)備。因此，最好確保您的應(yīng)用程序可以在任何屏幕尺寸上使用，并且其內(nèi)容在任何視口尺寸下都可用。
可安裝
研究表明，與訪問(wèn)官方網(wǎng)站相比，用戶傾向于更多地使用已安裝的應(yīng)用程序。使用 PWA 作為您的產(chǎn)品，可以為用戶提供普通應(yīng)用程序的外觀、感覺(jué)和參與度。
獨(dú)立連接
通過(guò)讓用戶即使在離線狀態(tài)下也能繼續(xù)使用您的應(yīng)用程序，可以提供比將他們返回到默認(rèn)離線頁(yè)面更一致的體驗(yàn)。
音樂(lè)應(yīng)用程序就是一個(gè)很好的例子，即使沒(méi)有互聯(lián)網(wǎng)連接，您的用戶也應(yīng)該能夠訪問(wèn)離線播放并收聽保存的音樂(lè)。另一個(gè)很好的例子是 Twitter 應(yīng)用程序，用戶可以返回閱讀他們可能錯(cuò)過(guò)的推文。
可發(fā)現(xiàn)性
由于大多數(shù) PWA 都是轉(zhuǎn)換后的網(wǎng)站，因此讓它們?cè)谒阉饕嫔峡杀话l(fā)現(xiàn)是公平的，這將有助于為您的應(yīng)用程序產(chǎn)生額外的流量。與無(wú)法通過(guò)搜索引擎發(fā)現(xiàn)的本機(jī)應(yīng)用程序相比，這也是一個(gè)優(yōu)勢(shì)。
外貌
應(yīng)用程序的外觀應(yīng)該像普通應(yīng)用程序一樣，因此請(qǐng)務(wù)必包含應(yīng)用程序圖標(biāo)等內(nèi)容，這將有助于使其易于識(shí)別，啟動(dòng)畫面等內(nèi)容也會(huì)增加應(yīng)用程序的觸感和感覺(jué)。
跨平臺(tái)
PWA 首先作為 Web 應(yīng)用程序開發(fā)，這意味著它們需要在所有瀏覽器/系統(tǒng)上運(yùn)行，而不僅僅是選定的少數(shù)瀏覽器/系統(tǒng)。用戶在決定安裝它們之前應(yīng)該能夠在任何瀏覽器中使用它們。
所以各位！現(xiàn)在您已經(jīng)了解了有關(guān) PWA 的一般信息。在此過(guò)程中，您可能偶爾會(huì)注意到 PWA 和 Native App 之間的比較，這可能會(huì)讓您有點(diǎn)困惑，那么讓我們通過(guò)檢查兩者之間的比較來(lái)澄清一下電波，以獲得清晰的理解。
PWA 和本機(jī)應(yīng)用程序之間的差異
開發(fā)成本
與本機(jī)應(yīng)用程序相比，PWA 的開發(fā)成本更低當(dāng)您開發(fā)本機(jī)應(yīng)用程序時(shí)，您必須學(xué)習(xí)某種編程語(yǔ)言，然后為每種類型的設(shè)備（Android 和 iOS）構(gòu)建應(yīng)用程序版本。另一方面，您可以選擇聘請(qǐng)經(jīng)驗(yàn)豐富的專業(yè)人士來(lái)為您完成這項(xiàng)工作，這甚至?xí)?dǎo)致成本更高。
今后，您還需要資源來(lái)維護(hù)和更新應(yīng)用程序，這意味著需要大量的金錢和時(shí)間。
對(duì)于 PWA，您可以為不同平臺(tái)擁有單一代碼庫(kù)。它還節(jié)省時(shí)間，因?yàn)槟恍枰獜念^開始開發(fā)它，您可以配置當(dāng)前的網(wǎng)站以適應(yīng)。
如果您選擇雇用開發(fā)人員，則與本地開發(fā)人員相比，它只會(huì)雇用一名開發(fā)人員，根據(jù)您需要應(yīng)用程序的位置，您最多可以雇用兩名開發(fā)人員。
可發(fā)現(xiàn)性
本機(jī)應(yīng)用程序無(wú)法被搜索引擎索引，只能通過(guò) App/Play 商店的網(wǎng)站找到它們。您可以使用應(yīng)用商店優(yōu)化 (ASO) 使您的應(yīng)用在 App/Play 商店中更容易被發(fā)現(xiàn)，但那是另一回事了。
與本機(jī)應(yīng)用程序不同，PWA 的工作方式類似于網(wǎng)站，因此可以被搜索引擎索引。這有助于他們?cè)谒阉鹘Y(jié)果中排名更好。
安全
如今，為了運(yùn)行一個(gè)網(wǎng)站，應(yīng)該使用 SSL 證書對(duì)其進(jìn)行加密，這增加了額外的安全層?，F(xiàn)在，我們已經(jīng)知道 PWA 是將網(wǎng)站轉(zhuǎn)換為應(yīng)用程序，這意味著它們更安全，因?yàn)樗鼈冊(cè)?HTTPS 上運(yùn)行。這些安全協(xié)議允許客戶端和服務(wù)器之間安全地交換數(shù)據(jù)，以便數(shù)據(jù)不會(huì)被篡改。
為了保護(hù)您的本機(jī)應(yīng)用程序，您需要實(shí)施各種安全措施，例如多重身份驗(yàn)證等。
安裝與下載
本機(jī)應(yīng)用程序需要從應(yīng)用程序商店下載并安裝。這需要用戶從頭到尾做出一些承諾。用戶在安裝應(yīng)用程序之前必須通過(guò)并檢查多個(gè)權(quán)限。
另一方面，PWA 不需要任何這些步驟。您可以在瀏覽器中為其添加書簽，只需點(diǎn)擊幾下即可將應(yīng)用程序添加到主屏幕。
PWA 的好處
許多私人和公共組織正在轉(zhuǎn)向 PWA，不僅因?yàn)樗鼈兊拈_發(fā)成本低廉，而且因?yàn)樗鼈兲峁┝烁叩膮⑴c度。 現(xiàn)在讓我們快速總結(jié)一下 PWA 的優(yōu)勢(shì)：
它們反應(yīng)靈敏，并且適用于許多不同的屏幕尺寸。
它們可以在多個(gè)平臺(tái)和任何具有現(xiàn)代網(wǎng)絡(luò)瀏覽器的設(shè)備上運(yùn)行。
它們的功能就像普通的本機(jī)應(yīng)用程序一樣。
更新是獨(dú)立的，您無(wú)需訪問(wèn) Play 商店進(jìn)行更新。
它們是使用常見(jiàn)的網(wǎng)絡(luò)技術(shù)構(gòu)建的。
它們又快又輕。
與其他網(wǎng)站不同，它們可以離線工作。
它們可以通過(guò)搜索引擎發(fā)現(xiàn)。
它們易于安裝。
維護(hù)成本低。
PWA 開發(fā)入門要求
開始構(gòu)建 PWA 并不需要太多時(shí)間。您只需要一些東西就可以開始了。
工具 開發(fā) PWA 的最著名的技術(shù)堆棧是 AngularJS。說(shuō)到 Angular，這里有一份關(guān)于如何將現(xiàn)有 Angular 應(yīng)用程序轉(zhuǎn)換為 PWA 的豐富指南。其他堆棧包括 ReactJS 和 Polymer。
HTTPS 您將需要一臺(tái)具有 HTTPS 連接的服務(wù)器。這可以確保您的用戶數(shù)據(jù)的安全。它為您的網(wǎng)站增加了額外的安全層。
應(yīng)用程序外殼 當(dāng)您的應(yīng)用程序加載時(shí)，它可以提供良好的第一印象。簡(jiǎn)而言之，這是用戶第一次與您的應(yīng)用程序交互時(shí)看到的內(nèi)容。
Service Worker 這是 PWA 背后的關(guān)鍵技術(shù)之一。它們幫助支持您的應(yīng)用程序離線工作，并執(zhí)行高級(jí)緩存并運(yùn)行后臺(tái)任務(wù)。即使您的 PWA 未運(yùn)行，Service Worker 也可以完成任務(wù)。與 Service Worker 相關(guān)的其他一些功能包括：
發(fā)送推送通知
徽章圖標(biāo)
運(yùn)行后臺(tái)獲取任務(wù)等...
清單文件這是使用Web 應(yīng)用程序清單生成器 創(chuàng)建的 JSON 文件。該文件包含告訴您 PWA 應(yīng)如何顯示和運(yùn)行的信息。它允許您確定 PWA 的名稱、描述、圖標(biāo)、顏色和其他功能。以下是清單文件的示例：
?{
?"short_name": "DevBlogger", ?
?"name": "DevBlogger", ?
?"description": "All dev stories under one roof",
?"theme_color": "#eb5252", ?
?"background_color": "#000000", ?
?"display": "fullscreen", ?
?"Scope": "/", ?"orientation": "portrait", ?
?"icons": [ ? ?
? ? ?{
? ? ? ? ?"src": "images/android/android-launchericon-48-48.png", ? ? ?
? ? ? ? ?"type": "image/png", ? ? ?
? ? ? ? ?"sizes": "48x48"
? ? ?},
? ? ?{ ? ? ?
? ? ? ? ?"src": "images/android/android-launchericon-96-96.png",
? ? ? ? ?"type": "image/png", ? ? ?
? ? ? ? ?"sizes": "96x96" ? ?
? ? ?}, ? ?
? ? ?{ ? ? ?
? ? ? ? ?"src": "images/android/android-launchericon-192-192.png",
? ? ? ? ?"type": "image/png", ? ? ?
? ? ? ? ?"sizes": "192x192" ? ?
? ? ?} ?
? ? ], ?
? ? ? ? "start_url": "index.html?utm_source=homescreen"
? ?}
審核您的應(yīng)用程序 這可以使用 Google Lighthouse 工具實(shí)現(xiàn)。Google Lighthouse 是一款開源軟件，任何人都可以在任何網(wǎng)頁(yè)上使用。谷歌是 PWA 的大力支持者，并將其視為網(wǎng)絡(luò)的未來(lái)。您可以使用 Lighthouse 來(lái)幫助您了解 PWA 的速度、可訪問(wèn)性和 SEO 準(zhǔn)備情況。
如何構(gòu)建 PWA
通過(guò)執(zhí)行以下步驟，您可以輕松創(chuàng)建功能齊全的 PWA，在所有設(shè)備上提供令人驚嘆的用戶體驗(yàn)。
第 1 步 - 規(guī)劃您的應(yīng)用程序
在投入開發(fā)之前，您應(yīng)該考慮 PWA 的目標(biāo)、想要包含哪些功能、優(yōu)先級(jí)和用戶體驗(yàn)。您可以為應(yīng)用程序創(chuàng)建第一個(gè)設(shè)計(jì)概念和線框圖，以可視化結(jié)構(gòu)和布局。 在大多數(shù)情況下，這通常稱為“發(fā)現(xiàn)階段”。您有機(jī)會(huì)構(gòu)思和收集用戶和利益相關(guān)者的反饋，并考慮您的產(chǎn)品的功能。
第 2 步 - 設(shè)計(jì)用戶界面
規(guī)劃一切順利后，您現(xiàn)在可以繼續(xù)設(shè)計(jì)應(yīng)用程序的 UI。在此階段，請(qǐng)考慮響應(yīng)能力、與不同平臺(tái)的兼容性等因素。請(qǐng)務(wù)必捕獲對(duì)用戶至關(guān)重要的所有細(xì)節(jié)，包括他們?cè)谑褂眠^(guò)程中的交互和參與。
第 3 步 - 開發(fā)前端
使用 HTML、CSS、JavaScript 和 Angular 等框架的 Web 技術(shù)。React 或 Vue.js 為用戶開發(fā)具有視覺(jué)吸引力的界面。并且永遠(yuǎn)記住，他們使用此堆棧進(jìn)行開發(fā)的關(guān)鍵原則是實(shí)現(xiàn)移動(dòng)優(yōu)先方法，同時(shí)確保對(duì)更大屏幕的響應(yīng)能力。
第 4 步 - 實(shí)施 Service Worker
如前所述，Service Worker 是 PWA 的關(guān)鍵組成部分。它們是在后臺(tái)運(yùn)行的 JavaScript 文件，支持離線功能、推送通知和緩存。為了確保您的 PWA 發(fā)揮最大潛力，您需要注冊(cè)并實(shí)施 Service Worker。如何做到這一點(diǎn)很大程度上取決于您使用的框架。
第 5 步 - 添加推送通知
利用 Push API 和服務(wù)工作線程來(lái)實(shí)現(xiàn)推送通知。獲得必要的用戶同意并使用推送通知服務(wù)向用戶發(fā)送通知。
第 6 步 - 優(yōu)化性能
一般來(lái)說(shuō)，優(yōu)化是開發(fā)中非常重要的一步。這就是您為用戶提供無(wú)縫體驗(yàn)的方式。確保您減少加載時(shí)間。通過(guò)利用代碼分割和緩存等技術(shù)，我們應(yīng)該能夠?qū)崿F(xiàn) PWA 的快速高效的操作。
第 7 步 - 測(cè)試和調(diào)試
在不同的設(shè)備、瀏覽器和網(wǎng)絡(luò)條件上測(cè)試您的 PWA，以確保其滿足目標(biāo)。還要確保收集用戶反饋并在必要時(shí)進(jìn)行必要的改進(jìn)。
結(jié)論
請(qǐng)記住，PWA 對(duì)于行業(yè)來(lái)說(shuō)是新事物，并且尚未得到充分利用，它們可以成為您工具包中的一個(gè)很好的補(bǔ)充。
憑借最新的技術(shù)和正確的工具，開始使用 PWA 最終可以增加個(gè)人或組織產(chǎn)品的銷量和金錢收益。它具有許多功能，包括速度快、能夠離線工作，而且它們的性能就像普通的本機(jī)應(yīng)用程序一樣。這為您的用戶提供了良好的體驗(yàn)并讓他們滿意。
如果您已經(jīng)讀到這里，我真的很感激。
享受編碼的樂(lè)趣?。
