功能

漸進式網頁應用程式不只在畫面上轉譯內容,或連線到網路服務,可執行其他工作。PWA 可以處理檔案系統中的檔案、能與系統剪貼簿互動、存取連接至裝置的硬體等等。每種 Web API 都適用於您的 PWA,安裝應用程式後還可使用一些額外 API。

你可以透過 What Web Can Do Today 來瞭解每個平台提供哪些功能。如需個別 API 或功能,請使用「Can I Use」(可以使用)MDN 上的瀏覽器相容性表格。

PWA 中的第一個字母表示循序漸進,出自漸進式強化功能偵測概念。您不應預期應用程式在各種裝置上的運作方式都相同。由於 PWA 在不同國家/地區擁有多樣化的情境和功能,因此由於具有漸進式進展,因此讓 PWA 成為絕佳的平台。

也就是說,您在開發應用程式時,需要在部分裝置可能無法使用時進行開發,並在使用前檢查應用程式的可用性。

使用 JavaScript 之前,您必須確認 JavaScript 有沒有存在,或詢問 API 是否能在特定裝置上提供服務。

功能強大的網路

網路世界無可匹敵。例如:

  • 您可以使用 WebRTC、地理位置及推送訊息功能,建構超地方視訊通訊應用程式。
  • 您可以將應用程式設為可安裝。
  • 你可以使用 WebAssembly 新增影片特效。
  • 您甚至能透過 WebGL 和 WebXR,進入虛擬實境。

強化 PWA

以下將 PWA 功能 API 分成四個群組:

  • 綠色:在技術可行的情況下,適用於所有平台的各瀏覽器。大多數這類零件出貨已有多年,且經認定為成熟階段,你可以安心使用。這個群組的 API 範例為地理位置 API。
  • 淺綠色:API 僅適用於部分瀏覽器。有鑑於某些平台不支援部分平台,他們的功能也在支援的瀏覽器子群組中成熟,因此您可以放心使用這些平台功能。這個群組中的 API 範例為 WebUSB。
  • 黃色:實驗性 API。這些 API 尚未完備;只能在部分瀏覽器使用,在測試或試用中才能使用。我們在實驗功能章節中討論了這些功能。
  • 紅色:無法在 PWA 中使用的 API 群組,以及無法長期新增的 API。這個群組中的 API 範例為地理圍欄。

綠色能力

以下列出在 PWA 中可使用的最重要功能。

基本概念

  • 使用 Cache API 在本機快取檔案,如快取章節所述。
  • 使用網路工作站在執行緒中執行工作,如複雜管理章節所述。
  • 使用不同策略在 Service Worker 中管理網路要求,如 Service Worker 章節所述。
  • 2D Canvas:使用 Canvas API 在螢幕上轉譯 2D 圖形。
  • 2D 和 3D 高效能 Canvas (或稱 WebGL),用於算繪 3D 圖形。
  • WebAssembly (或稱 WASM):用於執行低階編譯程式碼以提升效能。
  • 即時通訊:使用 WebRTC API
  • 網頁效能 API:用於評估及協助提供更優質的體驗。詳情請參閱 Performance API 指南
  • 使用 IndexedDB 和儲存空間管理功能將資料儲存在本機,以便查詢配額及要求永久儲存空間,如離線資料章節所述。
  • 支援 Web Audio API低階音訊
  • 使用 Page Visibility API 執行前景偵測
  • 網路通訊:使用 Fetch APIWebSocket API

硬體和感應器

  • 遊戲搖桿:使用 GamePad API 讀取與裝置連線的標準遊戲手把和搖桿所提供的資訊。
  • 使用網路驗證或 WebAuthn 進行生物特徵辨識驗證 (例如臉部或指紋辨識)。

作業系統整合

淺綠功能

以下列出您可以在 PWA 中使用的重要功能,請注意這些功能不一定適用於所有瀏覽器。

基本概念

  • WebGL 2.0新版 WebGL 規格,適用於 OpenGL 3.0。
  • 轉碼器:低階存取視訊串流的個別影格和音訊區塊;對於需要透過 Web Codecs API 完全控管媒體處理方式的網頁應用程式來說相當實用。

硬體和感應器

  • 環境光度除了可讀取感應器 API 外,也能讀取裝置周圍的環境光度或照明度。
  • 震動功能會在裝置支援時,透過 Vibration API 為使用者提供觸覺回饋。
  • 錄製媒體功能會使用 MediaRecorder API,擷取 MediaStream 或 HTMLMediaElement 物件 (例如 <video> 標記) 產生的資料,以便進行分析、處理或儲存至磁碟。
  • 如果將 Wake Lock 套用到螢幕,當 PWA 需要持續執行時,可使用 Screen Wake Lock API 防止裝置變暗或鎖定螢幕。
  • 只要採用 WebXR Device API虛擬實境就能在 PWA 中使用頭戴式和其他裝置。
  • 您可以在 PWA 中透過許多方式執行擴增實境,例如使用 WebXR Device APISafari 快速查看應用程式 AR 內容
  • 使用 Idle Detection API 偵測不活躍的使用者
  • 透過 Screen Orientation API網頁應用程式資訊清單orientation 屬性 (適用於已安裝的應用程式),方向鎖定功能會在螢幕顯示 PWA 時,鎖定螢幕方向為直向或橫向。
  • 有了簡報 API,您就能在投影機和次要顯示器上顯示內容
  • 鎖定指標即可接收指標 (滑鼠、觸控板和指標) 的差異移動資訊,而非位置值 (對某些遊戲來說非常實用),這是一種對 Pointer Lock API 非常實用的功能。

作業系統整合

資源