漸進式網頁應用程式不只在畫面上轉譯內容,或連線到網路服務,可執行其他工作。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。
硬體和感應器
- 地理位置會透過不同的供應商 (例如透過 Geolocation API 取得衛星或 Wi-Fi) 取得使用者的位置。
- 攝影機和麥克風會使用媒體裝置介面接收相機和麥克風的媒體串流。
- 感應器會運用 Sensors API 或舊版介面 (例如 DeviceMotionEvent 和 DeviceOrientationEvent) 從加速計、陀螺儀、磁力儀和其他設備收集即時資訊。在 Safari 上,您必須透過非標準權限對話方塊要求才能使用這些權限。
- 有了遊標事件和觸控事件,觸控和指標可取得所有觸控操作和指標點擊的相關資訊,協助你以手指、滑鼠、觸控板或筆尖點按。
- 遊戲搖桿:使用 GamePad API 讀取與裝置連線的標準遊戲手把和搖桿所提供的資訊。
- 使用網路驗證或 WebAuthn 進行生物特徵辨識驗證 (例如臉部或指紋辨識)。
作業系統整合
- 「語音合成和語音辨識」透過 Web Speech API,使用平台安裝的語音對使用者說話,並辨識使用者說的內容。
- 利用 Web Share API 將 PWA 中的內容分享到裝置上的其他應用程式和位置,詳情請參閱「OS 整合」章節。
- 存取剪貼簿後,就能以不同格式儲存及擷取剪貼簿中的內容,而如同 OS 整合章節所述,有了 Clipboard API。
- 使用 Credential Management API 管理使用者的憑證和密碼。
- 使用 Picture-in-Picture API 在 OS 中啟用子母畫面影片播放功能。
- 採用全螢幕 API,如 Windows 章節所述,以全螢幕顯示內容。
淺綠功能
以下列出您可以在 PWA 中使用的重要功能,請注意這些功能不一定適用於所有瀏覽器。
基本概念
- WebGL 2.0:新版 WebGL 規格,適用於 OpenGL 3.0。
- 轉碼器:低階存取視訊串流的個別影格和音訊區塊;對於需要透過 Web Codecs API 完全控管媒體處理方式的網頁應用程式來說相當實用。
硬體和感應器
- 進階相機控制項除了使用 Media API 外,也能存取平移、傾斜和縮放控制項。
- 藍牙 LE:使用 Web Bluetooth API 與附近的藍牙低功耗裝置通訊。詳情請參閱「透過 JavaScript 與藍牙裝置通訊」。
- 近距離無線通訊:透過輕量級 NFC 資料交換格式 (NDEF) 訊息,透過 NFC 交換資料,例如使用 WebNFC API 的 NFC 標記或卡片。您也可以參閱「在 Android 版 Google Chrome 與 NFC 裝置互動」一文瞭解詳情。
序列週邊裝置:適用於透過序列埠、USB 或透過藍牙連線使用 Web Serial WPI 連入裝置的裝置進行低階存取。您可以點選下方連結,瞭解如何讀取序列埠及寫入序列埠。
USB 裝置存取權:與透過 USB WebUSB API 連線的裝置進行通訊。詳情請參閱在網路上存取 USB 裝置。
人機介面裝置可讓 PWA 使用 WebHID API,與準備人為互動、少見的任何裝置互動。請參閱這份指南,瞭解如何連線至不常見的 HID 裝置。
- 環境光度除了可讀取感應器 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 非常實用的功能。
作業系統整合
- 如「OS 整合」章節所述,您可以使用 File System Access API 在裝置上讀取及寫入檔案。
- 透過「網頁分享目標」取得其他應用程式的內容,詳情請參閱「OS 整合」章節。
- 使用 Contact Picker API 取得聯絡人資料,如「OS 整合」章節所示。
- 在未使用 PWA 時於背景執行同步處理。有了 Background Synchronization API。
- 在未使用 PWA 時安排工作排程,借助 Web Periodic Background Synchronization API。
- 使用網路推送和 Web Notifications API 傳送通知。
- 有了 Background Fetch API,可以在使用者未使用 PWA 時在背景傳輸檔案。
- 使用 Media Session API 整合媒體播放與作業系統。
- 有了 Payment Request API,即可在 PWA 中管理付款。Apple 也在 Payment Request API 上方提供了 Apple Pay JS 程式庫。
- 查詢網路狀態,例如連線類型 (4G、Wi-Fi) 和使用 Network Information API 儲存資料旗標。
- 使用 Screen Capture API 擷取使用者的螢幕畫面,以便進行螢幕側錄或分享螢幕畫面。
- 使用裝置端硬體加速偵測工具使用裝置端硬體加速偵測工具,包括條碼 (人臉和文字 OCR 仍在開發中) 使用 Shape Detection API 偵測形狀。
- 使用裝置記憶體介面查詢裝置的記憶體。
- 透過簡訊使用動態密碼:這樣您就能使用 WebOTP API 從伺服器發送的簡訊自動接收驗證碼。Safari 會根據
<input>
元素實作解決方案子集。詳情請參閱 WebKit 的網誌。 - 使用 Virtual Keyboard API 管理行動裝置螢幕上顯示的虛擬鍵盤。