功能

漸進式網頁應用程式不只在畫面上轉譯內容，或連線到網路服務，可執行其他工作。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 API 和 WebSocket 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 API 或 Safari 快速查看應用程式 AR 內容。
  • 使用 Idle Detection API 偵測不活躍的使用者。
  • 透過 Screen Orientation API 或網頁應用程式資訊清單的 orientation 屬性 (適用於已安裝的應用程式)，方向鎖定功能會在螢幕顯示 PWA 時，鎖定螢幕方向為直向或橫向。
  • 有了簡報 API，您就能在投影機和次要顯示器上顯示內容。
  • 鎖定指標即可接收指標 (滑鼠、觸控板和指標) 的差異移動資訊，而非位置值 (對某些遊戲來說非常實用)，這是一種對 Pointer Lock API 非常實用的功能。

作業系統整合

資源