2024年的Progressive Web應(yīng)用程序（PWAS）是Web應(yīng)用程序，通過瀏覽器提供類似於本機(jī)應(yīng)用程序的體驗(yàn)，提供離線訪問，推送通知，主屏幕安裝以及跨平臺(tái)的一個(gè)代碼庫(kù)快速性能。 1。它們是使用Web應(yīng)用程序清單構(gòu)建的，用於安裝性和品牌。 2。服務(wù)工作者啟用離線功能，背景同步和推送通知。 3。 HTTPS確保安全並解鎖強(qiáng)大的Web API。可以通過搜索引擎發(fā)現(xiàn)PWA，避免App Store延遲，降低開發(fā)成本並在慢速網(wǎng)絡(luò)上表現(xiàn)良好。 Android提供全力支持，而iOS現(xiàn)在支持服務(wù)人員和推送通知（具有限制）。高級(jí)功能包括文件系統(tǒng)訪問，Web藍(lán)牙，背景同步和通過付款請(qǐng)求API獲利。 Wookbox，Vite，Angular，Vue和Next.js等工具簡(jiǎn)化了PWA的開發(fā)。要符合PWA的資格，站點(diǎn)必須符合響應(yīng)式設(shè)計(jì)，HTTPS，功能服務(wù)工作者和可安裝清單等標(biāo)準(zhǔn)，並通過燈塔進(jìn)行審核。儘管諸如iOS怪癖和緩存策略之類的挑戰(zhàn)，但PWA在2024年對(duì)企業(yè)來說是一個(gè)成熟的戰(zhàn)略解決方案，將最佳的網(wǎng)絡(luò)和移動(dòng)應(yīng)用程序結(jié)合到一個(gè)單一，功能強(qiáng)大且可訪問的平臺(tái)。

2024年，哪些漸進(jìn)式網(wǎng)絡(luò)應(yīng)用程序（PWA）是什麼？

Progressive Web應(yīng)用程序（PWA）是Web應(yīng)用程序，可直接通過瀏覽器提供類似於本機(jī)應(yīng)用的體驗(yàn)。在2024年，他們?yōu)橄Ｍ麡?gòu)建快速，引人入勝且易於訪問的應(yīng)用程序的企業(yè)和開發(fā)人員發(fā)展成一個(gè)成熟，可靠的解決方案，而沒有維護(hù)單獨(dú)的iOS和Android版本的開銷。 PWA結(jié)合了網(wǎng)絡(luò)和移動(dòng)應(yīng)用程序的最佳功能 - 訪問訪問，推送通知，主屏幕安裝和平穩(wěn)性能 - 雖然可以發(fā)現(xiàn)，可鏈接且可立即更新。

它們不是一個(gè)新概念，但是最近改進(jìn)了瀏覽器支持，服務(wù)工作人員和設(shè)備API，使PWAS更加強(qiáng)大，並且在整個(gè)行業(yè)（從電子商務(wù)和媒體到銀行業(yè)和生產(chǎn)力工具）中更加強(qiáng)大和廣泛採(cǎi)用。

為什麼要在2024年建立PWA？

PWA的優(yōu)勢(shì)只會(huì)隨著時(shí)間而增長(zhǎng)。這就是為什麼他們現(xiàn)在值得考慮的原因：

• 跨平臺(tái)兼容性：一個(gè)代碼庫(kù)在iOS，Android，Windows和Desktop瀏覽器上工作。
• 沒有應(yīng)用程序商店摩擦：用戶可以無(wú)需訪問App Store或Google Play即可立即安裝您的應(yīng)用程序。
• 離線功能：服務(wù)工作者緩存內(nèi)容，因此即使使用差或沒有互聯(lián)網(wǎng)，您的應(yīng)用程序也可以使用。
• 較低的開發(fā)成本：維護(hù)一個(gè)代碼庫(kù)，而不是單獨(dú)的本機(jī)應(yīng)用程序。
• 性能的提高：由於緩存和現(xiàn)代網(wǎng)絡(luò)標(biāo)準(zhǔn)，PWA迅速加載，即使在慢速網(wǎng)絡(luò)上也是如此。
• 可發(fā)現(xiàn)性：與本機(jī)應(yīng)用不同，PWA由搜索引擎索引並通過URL共享。
• 推送通知：讓用戶及時(shí)更新（在大多數(shù)Android設(shè)備上支持以及iOS上越來越多）。

像Twitter（Twitter Lite），星巴克和Pinterest這樣的公司已經(jīng)看到了真正的結(jié)果：更快的負(fù)載時(shí)間，更高的參與度和增加的轉(zhuǎn)化率。

PWAS背後的核心技術(shù)

要構(gòu)建PWA，您需要三個(gè)基本組件。這些變化並沒有太大變化，但是他們的實(shí)施和瀏覽器支持已得到顯著改善。

1。網(wǎng)絡(luò)應(yīng)用清單

該JSON文件定義了您的應(yīng)用程序安裝時(shí)的顯示方式 - 名稱，圖標(biāo)，主題顏色和顯示模式（例如，全屏或獨(dú)立）。

 {
  “名稱”：“我的PWA”，
  “ short_name”：“ pwa”，
  “ start_url”：“/”，，
  “顯示”：“獨(dú)立”，
  “ background_color”：“ #ffffff”，
  “ theme_color”：“＃000000”，
  "圖示":[
    {
      “ src”：“ Icon-192x192.png”，
      “尺寸”：“ 192x192”，
      “ type”：“ Image/png”
    }，，
    {
      “ src”：“ Icon-512x512.png”，
      “尺寸”：“ 512x512”，
      “ type”：“ Image/png”
    }
  這是給出的
}

確保將html中的清單鏈接起來：

 <link rel =“清單” href =“/subest.json”>

2。服務(wù)工作者

這些JavaScript文件在後臺(tái)運(yùn)行，啟用離線訪問，背景同步和推送通知。

關(guān)鍵功能：

• 攔截和緩存網(wǎng)絡(luò)請(qǐng)求。
• 離線時(shí)提供緩存的內(nèi)容。
• 在後臺(tái)靜靜地更新內(nèi)容。

示例：基本服務(wù)工作者註冊(cè)

如果（Navigator中的'ServiceWorker'）{
  navigator.serviceworker.register（'/sw.js'）
    。
    .catch（err => console.log（'SW註冊(cè)失?。?amp;#39;，err））;
}

在sw.js中，您可以使用緩存API或Workbox等庫(kù)實(shí)現(xiàn)緩存策略。

3。 https

PWA需要一個(gè)安全的上下文（HTTP），以確保數(shù)據(jù)完整性並啟用強(qiáng)大的API，例如服務(wù)工人和地理位置。

大多數(shù)託管平臺(tái)（Vercel，Netlify，F(xiàn)irebase）提供免費(fèi)的HTTP。自我託管？使用讓我們加密。

如何使您的網(wǎng)站可安裝（PWA標(biāo)準(zhǔn)）

要使網(wǎng)站被認(rèn)為是PWA，它必須符合某些標(biāo)準(zhǔn)，通常稱為PWA清單。 Google的Lighthouse工具審核了這些工具。

這是您需要的：

• ?有效的Web應(yīng)用清單
• ?服務(wù)人員註冊(cè)和功能
• ?在HTTPS上服役
• ?頁(yè)面逐漸增強(qiáng)（無(wú)JavaScript起作用）
• ?跨設(shè)備的響應(yīng)式設(shè)計(jì)
• ?首先加載脫機(jī)工作（或顯示自定義脫機(jī)頁(yè)面）
• ?具有自定義飛濺屏幕（通過清單）
• ?避免棄用的API

提示：在Chrome DevTools中進(jìn)行燈塔審核，以檢查您的PWA分?jǐn)?shù)並獲得可行的反饋。

iOS和Android支持於2024年

瀏覽器支持已大大改善：

• Android ：通過Chrome提供完整的PWA支持。安裝提示，推送通知和離線模式無(wú)縫工作。
• iOS（Safari） ：蘋果慢慢地接受了PWA。從iOS 16.4開始，支持服務(wù)人員和推送通知，儘管有局限性。
  • 推送通知仍然需要解決方法（例如，使用Safari的Legacy Push System或第三方服務(wù)）。
  • iOS上沒有背景同步或定期同步。
  • 可以安裝主屏幕，但UX不如Android光滑。

儘管存在差距，但iOS上的PWA現(xiàn)在是可行的，尤其是對(duì)於內(nèi)容豐富或電子商務(wù)應(yīng)用程序而言。

高級(jí)PWA功能在2024年

現(xiàn)代PWA超出了基礎(chǔ)知識(shí)。這是您現(xiàn)在可以實(shí)現(xiàn)的功能：

• 文件系統(tǒng)訪問API ：讓用戶直接保存和打開文件（Chrome/Edge）。
• Web藍(lán)牙，USB和串行API ：與硬件設(shè)備進(jìn)行交互。
• 背景同步：推遲操作直到用戶具有連接性。
• 地理申請(qǐng)和定期同步（有限支持）：計(jì)劃背景更新。
• 貨幣化：通過付款請(qǐng)求API和數(shù)字商品API購(gòu)買應(yīng)用內(nèi)購(gòu)買。
• 徽章API ：在應(yīng)用程序圖標(biāo)（Android和一些桌面瀏覽器）上顯示未讀的計(jì)數(shù)。

這些功能仍在出現(xiàn)，因此請(qǐng)務(wù)必檢查Caniuse並使用功能檢測(cè)。

建造PWA的工具和框架

您不需要特殊的框架來構(gòu)建PWA，但是有些工具使其更容易：

• REACT VITE/PWA插件：使用vite-plugin-pwa自動(dòng)產(chǎn)生和服務(wù)工作者。
• Angular ：通過@angular/pwa示意圖內(nèi)置的PWA支持。
• VUE VITE或VUE CLI ：可用於PWA設(shè)置的插件。
• Next.js ：通過next-pwa等第三方模塊支持PWA。
• 工作箱：用於簡(jiǎn)化服務(wù)工作者邏輯的Google庫(kù)（緩存，percarching，背景同步）。

對(duì)於無(wú)頭CMS或電子商務(wù)：Shopify，WordPress（帶有插件）等平臺(tái)，現(xiàn)在可以通過Gatsby或Nuxt等框架來支持PWA前端。

常見的陷阱以及如何避免它們

甚至經(jīng)驗(yàn)豐富的開發(fā)人員也遇到了問題。當(dāng)心：

• 不測(cè)試離線模式：始終在DevTools中模擬離線場(chǎng)景。
• 緩存策略差：過度療程會(huì)導(dǎo)致陳舊的內(nèi)容；遇到的障礙殺死了性能。
• 忽略iOS怪癖：對(duì)真實(shí)iOS設(shè)備進(jìn)行測(cè)試 - safari的行為不同。
• 缺少安裝提示：除非您觸發(fā)beforeinstallprompt事件，否則用戶不會(huì)安裝。
• 大型捆綁尺寸：優(yōu)化資產(chǎn) - PWA應(yīng)在3G上快速加載。

提示：使用工作箱來管理緩存策略（陳舊的回報(bào)，網(wǎng)絡(luò)優(yōu)先等），並使您的服務(wù)工作者保持可維護(hù)。

最後的想法

在2024年，PWA不再只是“良好的”，它們是快速，可擴(kuò)展和用戶友好型應(yīng)用程序的戰(zhàn)略選擇。憑藉近乎全世界的瀏覽器支持，提高的iOS功能和豐富的API，它們?yōu)楸緳C(jī)應(yīng)用程序提供了令人信服的替代方案（或補(bǔ)充）。

您無(wú)需在網(wǎng)絡(luò)和本機(jī)之間進(jìn)行選擇。一個(gè)完善的PWA為你們倆提供了。

無(wú)論您是啟動(dòng)初創(chuàng)公司，優(yōu)化電子商務(wù)網(wǎng)站還是現(xiàn)代化企業(yè)應(yīng)用程序，都可以考慮從PWA開始。網(wǎng)絡(luò)從未如此強(qiáng)大。

基本上，如果您的應(yīng)用程序在瀏覽器中工作，則可以像應(yīng)用程序一樣工作。那就是未來。

以上是2024年的漸進(jìn)式網(wǎng)絡(luò)應(yīng)用程序（PWA）完整指南的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！