漸進式 Web 應用
漸進式 Web 應用(PWA)是使用 Web 平臺技術構建的應用程式,但提供類似於平臺原生應用程式的使用者體驗。
與網站一樣,PWA 可以透過單一程式碼庫在多個平臺和裝置上執行。與平臺原生應用程式一樣,它可以安裝在裝置上,可以在離線和後臺模式下執行,並且可以與裝置和其他已安裝的應用程式整合。
指南
《PWA 指南》提供了 PWA 不同方面的概念性解釋。它們旨在幫助您瞭解 PWA 可能實現的各種功能,並提供足夠的指導來幫助您瞭解如何實現它們。
- 什麼是漸進式 Web 應用?
-
對 PWA 的介紹,將其與傳統網站和平臺原生應用程式進行比較,並概述其主要功能。
- 使 PWA 可安裝
-
PWA 的一個定義性方面是它可以安裝在裝置上,然後對使用者來說就像一個平臺原生應用程式,是他們裝置上的永久功能,他們可以直接從作業系統啟動,就像任何其他應用程式一樣。在本指南中,我們將探討“可安裝”的含義,PWA 需要提供什麼才能使其可安裝,以及如何自定義安裝體驗。
- 安裝和解除安裝 Web 應用
-
本指南涵蓋了使用者如何在裝置上安裝和解除安裝 PWA。
- 離線和後臺操作
-
在本指南中,我們將介紹一套技術,這些技術使 PWA 即使在裝置網路連線不穩定的情況下也能提供良好的使用者體驗,並在主應用程式未執行時在後臺執行操作。
- 快取
-
概述了使 PWA 能夠本地快取資源的 API,以及 PWA 用於實現離線功能的常見策略。
- PWA 的最佳實踐
-
PWA 應適應不同的瀏覽器和裝置,具有可訪問性,效能良好,並與作業系統良好整合。本指南提供了一系列最佳實踐,以幫助您確保您的 PWA 儘可能出色。
如何
《PWA 操作指南》提供了有關實現特定 PWA 功能的詳細說明。
- 建立獨立應用
-
描述了當 PWA 啟動時,如何指定它應在自己的專用視窗中啟動,而不是在瀏覽器標籤頁中啟動。
- 定義您的應用圖示
-
描述瞭如何定義當 PWA 安裝在裝置上時使用的自定義圖示集。
- 自定義應用的顏色
-
描述瞭如何為 PWA 設定背景和主題顏色。
- 顯示徽章
-
描述瞭如何在 PWA 的圖示上顯示徽章:例如,通知使用者他們收到了新訊息。
- 將常用應用操作作為快捷方式公開
-
描述瞭如何公開 PWA 的常用操作,這些操作可以從作業系統的應用程式快捷選單啟動。
-
描述了 PWA 如何透過使用作業系統的應用程式共享機制與其他 PWA 共享資料。
- 從 PWA 觸發安裝
-
描述了開發人員如何提供自己的 UI 來邀請使用者安裝其 PWA。
- 將檔案與 PWA 關聯
-
描述瞭如何建立檔案型別與您的 PWA 之間的關聯,以便當使用者單擊檔案時,您的 PWA 會被啟動以處理該檔案。
教程
使用這些PWA 教程從頭開始構建 PWA,這些教程將引導您完成從開始到結束的步驟,並沿途解釋應用程式的各種功能是如何實現的。
- 建立您的第一個 PWA
-
這個入門級教程將引導您建立跟蹤月經週期的 PWA。課程包括建立功能齊全的 Web 應用程式所需的 HTML、CSS 和 JavaScript 的概述,設定測試環境,以及完整的解釋,指導學習者完成將 Web 應用程序升級為 PWA 的過程;包括開發和檢查清單檔案、新增服務工作者,以及使用服務工作者刪除過時的快取。
- 深入瞭解 PWA
-
這個中級教程將引導您建立一個 PWA,該 PWA 列出了提交到 js13kGames 2017 競賽的 A-Frame 類別的遊戲資訊。本教程包含建立 PWA 的所有基礎知識,並增加了通知、推送和應用程式效能等附加功能。
參考
我們的《PWA 參考》列出了 MDN 上記錄的所有您需要構建 PWA 的功能。
Web 應用清單
- Web 應用清單成員
-
開發人員可以使用 Web 應用清單成員來描述 PWA,自定義其外觀,並更深入地將其整合到作業系統中。
Service Worker API
與應用的通訊
以下 API 可由服務工作者用來與其關聯的客戶端 PWA 進行通訊
Client.postMessage()-
允許服務工作者向其客戶端 PWA 傳送訊息。
- Broadcast Channel API
-
允許服務工作者及其客戶端 PWA 建立基本的雙向通訊通道。
離線操作
以下 API 可由服務工作者用於使您的應用程式離線工作
Cache-
用於儲存可供應用程式離線時重複使用的資源的 HTTP 響應的持久化儲存機制。
Clients-
一個用於提供對服務工作者控制的文件的訪問的介面。
FetchEvent-
在每次客戶端 PWA 發起 HTTP 請求時,在服務工作者中分派的一個事件。該事件可用於將請求正常傳送到伺服器並儲存響應以備將來使用,或攔截請求並立即以先前快取的響應進行響應。
後臺操作
以下 API 可由服務工作者用於在您的應用程式未執行時在後臺執行任務
- Background Synchronization API
-
一種在網路連線穩定時將任務延遲到服務工作者中執行的方式。
- Web Periodic Background Synchronization API
-
一種在具有網路連線的週期性時間間隔內註冊要在服務工作者中執行的任務的方式。
- 後臺抓取 API
-
服務工作者管理可能花費大量時間(例如影片或音訊檔案)的下載的方法。
其他 Web API
- IndexedDB
-
用於儲存大量結構化資料(包括檔案)的客戶端儲存 API。
- Badging API
-
一種在應用程式圖示上設定徽章的方法,提供低干擾的通知。
- Notifications API
-
一種傳送在作業系統級別顯示通知的方式。
-
一種用於將文字、連結、檔案和其他內容共享給使用者在其裝置上選擇的其他應用程式的機制。
- Window Controls Overlay API
-
適用於安裝在桌面作業系統上的 PWA 的 API,可隱藏預設的視窗標題欄,從而允許應用程式在應用程式視窗的整個表面區域顯示。
另見
- web.dev 上的漸進式 Web 應用
- web.dev 上的學習 PWA
- learn.microsoft.com 上的漸進式 Web 應用 (2023)