功能強大的 PWA

雖然部分 PWA 功能廣為人知，例如可讓網頁應用程式接收及發布平台通知的 Notifications API，但網頁即將推出許多新功能，可讓應用程式更強大。Chromium Web Capabilities 專案 (又稱 Project Fugu 🐡) 致力於啟用強大的全新網路標準，同時保留網路的獨特之處：以使用者為中心的安全性、低摩擦係數和跨平台相容性。

縮小應用程式差距

這些功能大多是為了縮小傳統電腦或行動應用程式與網頁應用程式之間的差距而建構，首批主要功能可讓網頁應用程式存取平台的聯絡人挑選器和分享功能，並讓已安裝的 PWA 註冊為平台分享目標和顯示圖示徽章，僅舉幾例。

每項功能都經過廣泛的標準化程序，徵求社群意見，協助塑造 API，確保最終設計安全、私密且值得信賴。新功能會記錄在公開追蹤器中，並可分為五大類：

已付運

適用於最新穩定版 Chrome。只要正確偵測到功能，即可放心使用。

在 Origin 試用階段

這項功能以 Chrome 來源試用 (OT) 的形式提供，讓 Chrome 團隊在實際使用情境中驗證實驗性功能和 API，並讓您提供 API 可用性和有效性的意見回饋。OT 屬於選擇加入性質，可讓您與使用者進行這項功能的 Beta 版測試，不必要求他們在瀏覽器中切換任何特殊標記。API 可能會在 OT 後變更，且 OT 保證會在推出前一段時間內無法使用，因此不應將 OT 視為新 API 的搶先推出機制。

開發人員試用版

這項功能目前僅適用於 Chrome 旗標。這些 API 仍處於實驗階段，且仍在積極開發中。不適合用於實際工作環境，很可能含有錯誤，且 API 可能會變更。開發人員可以利用這段時間自行試用實驗功能，但不應指示使用者啟用標記來使用這些功能。

已開始

開發作業已開始，但目前沒有可用的 API。

審核中

使用者表示有興趣，但尚未開始實作的 API。如果 API 尚未啟動，請為該 API 加上星號，或在問題中新增您的用途，協助 Chromium 團隊排定優先順序。

強化 PWA

建構 PWA 時，請考慮導入下列 API 和最佳做法，大幅提升網頁應用程式的質感。根據一般用途案例分類，您的應用程式可受益於一或多個 API，進而改善整體使用者體驗。標有 🔮 的 API 處於原始碼試用階段，標有 🚩 的 API 處於開發人員試用階段，標有 📱 的 API 目前在行動裝置上穩定運作，且已開始實作電腦版，而提及的任何其他 API 則處於穩定狀態 (但可能無法在所有平台上使用)。僅列出 Chrome 目前穩定版、Beta 版 (標示為 β) 或 Canary 版 (標示為 α) 的可用 API；這份清單會定期更新，反映已發布的 API。

應用程式安裝

如要讓網頁應用程式與其他已安裝的應用程式並列顯示 (例如在工作列、啟動器、桌面和應用程式切換器中)，請考慮實作下列 API，讓 PWA 可供安裝。選擇性：完成這個程式碼研究室。

  • 網頁應用程式資訊清單 - 向瀏覽器和作業系統提供網頁應用程式的相關資訊，例如名稱、標誌、啟動應用程式的網址，以及網頁應用程式的顯示方式。
  • Service Worker 和 Cache Storage API：允許網頁應用程式建立 Proxy 伺服器，並控管瀏覽器快取的處理方式。Service Worker 會對瀏覽器的 fetch 事件做出反應，並在離線時回應網頁應用程式資訊清單中指定的啟動網址擷取要求，提供內容。這是可安裝的必要條件。
  • 登入時執行 🚩β - 您可以將 PWA 設為在使用者登入時自動啟動。
  • 應用程式圖示快速鍵：在支援的平台上，透過已安裝應用程式圖示的內容選單 (例如在行動裝置上長按，在電腦上按一下滑鼠右鍵)，提供網路應用程式特定網址的快速鍵 (例如開始即時通訊、上傳相片等)。
  • getInstalledRelatedApps - 允許網頁應用程式檢查 PWA、Android 應用程式或 Windows (UWP) 應用程式是否已安裝。

自動調整且容易使用

如要讓不同裝置的使用者，以及有不同生理和/或心理需求的使用者都能使用您的網頁應用程式，建議您實作下列功能：

  • 回應式設計 - 確保網頁應用程式能為各種大小的螢幕提供可用或至少不會中斷的體驗，讓不同裝置和視窗位置的使用者都能使用您的應用程式。
  • WCAG 2.0 指南 - 確保網頁應用程式適用於各種身心能力的使用者，而不僅限於神經典型和身體健全的人。另請參閱英國政府的「無障礙設計須知」。

營利與發布

  • 網路付款 - 彈性標準的線上付款介面，適用於任何瀏覽器或裝置，以及任何付款方式或付款服務供應商。
  • Digital Goods API 🔮 - 彈性的標準介面，可從網頁應用程式查詢及管理應用程式內購交易，包括支援常見的購買類型，例如一次性購買、重複購買 (例如遊戲中的寶石/貨幣) 和訂閱。與網路付款服務搭配運作。
  • 可信賴的網頁活動 - 為 PWA 建立 Android 應用程式，以便在相容的商店 (例如 Google Play) 中上架供人下載。

剪貼簿存取權

  • 非同步剪貼簿 - 讀取及寫入使用者剪貼簿中的文字和圖片，並監聽使用者的複製和貼上事件。

通知

如果您的網路應用程式需要通知使用者 (例如即時通訊應用程式或正在處理的背景編碼)，建議您實作下列 API：

  • 網路推播通知 - 允許網頁應用程式在使用者選擇接收通知後，向他們推送通知。
  • 徽章 API - 允許已安裝的網頁應用程式在應用程式圖示上設定應用程式專屬徽章，並視需要顯示數字。
  • 通知觸發條件 🔮 - 在符合觸發條件時傳送通知給使用者，例如時間或位置 (類似日曆活動通知)

意圖分享和通訊協定處理

  • 網址通訊協定註冊 🚩α - 讓網頁應用程式使用安裝資訊清單，將自己註冊為自訂網址通訊協定/配置的處理常式。
  • 網頁分享 - 在支援的裝置上使用內建的系統分享使用者介面，將網址、文字和檔案分享到裝置上安裝的其他應用程式。不必安裝應用程式。
  • 網頁分享目標 - 在支援的裝置上，讓已安裝的 PWA 顯示在內建的系統分享 UI 中，允許使用者從其他應用程式分享文字和檔案到您的應用程式。

開啟及儲存檔案

  • 檔案處理 API 🚩 - 讓已安裝的網頁應用程式向作業系統註冊其處理 (讀取/串流/編輯) 具有指定 MIME 類型和/或副檔名的檔案的能力，例如在內容選單的「開啟應用程式…」清單中顯示。
  • File System Access API：在每個工作階段中，都能穩定存取使用者的檔案系統，並視應用程式需求進行下列互動：
    • 從本機檔案系統讀取檔案 - 顯示檔案選擇器，並允許使用者選擇一或多個要開啟的檔案，包括依 MIME 類型和副檔名限制允許的檔案類型。
    • 將變更儲存至開啟的檔案：直接將變更儲存至透過 FSA 開啟的檔案，不必提示使用者選擇檔案儲存位置或下載副本。
    • 在本機檔案系統中建立新檔案：允許使用者在本機檔案系統中建立新檔案 (可選擇是否使用預設副檔名)，然後讓應用程式存取該檔案並儲存。
    • 最近開啟的檔案 - 使用 FSA 建立的檔案控制代碼可以儲存在 IndexedDB 中，讓您在使用者工作階段之間顯示最近使用的檔案清單 (不過編輯權限仍不會在工作階段之間保留)
    • 讀取、寫入及操控目錄 - 允許使用者在本地檔案系統中選擇目錄，然後讓應用程式讀取內容、建立、讀取及刪除檔案和子目錄，並判斷相對檔案路徑。
  • 壓縮串流 - 使用 gzip 和 deflate 壓縮演算法壓縮或解壓縮。

視窗管理

  • 全螢幕 API - 允許使用者讓網頁應用程式中的元素 (例如影片) 佔滿整個畫面
  • 跨螢幕視窗放置 API 🔮 - 允許網頁應用程式取得連線螢幕的相關資訊，並根據這些螢幕放置視窗，以便建立多視窗、多螢幕網頁應用程式。
  • 分頁應用程式顯示模式 🚩 - 允許已安裝的網頁應用程式顯示在一或多個分頁中，而不只是單一視窗。

更深入的 OS 整合

  • 本機字型 API 🔮 - 允許網頁應用程式列出本機安裝的字型，並要求低階 (以位元為導向) 的 SFNT 容器存取權 (包括完整字型資料)，讓應用程式自訂算繪本機安裝的字型。
  • 喚醒鎖定 - 允許網頁應用程式防止螢幕進入休眠狀態，讓網頁應用程式執行長時間執行的工作，而不必擔心遭到中斷 (例如檔案轉碼，或在烹飪時保持食譜開啟)
  • 閒置偵測 🔮 - 讓網頁應用程式偵測使用者何時未主動使用裝置。

擴大離線支援

如要讓網路應用程式在離線狀態下運作得更順暢，建議導入下列 API：

  • 背景同步：離線時，將需要連線的要求排入佇列，然後在網路連線可用時，於背景同步處理網路應用程式的資料，而不是完全不處理離線要求。例如，允許系統在重新連線後傳送訊息，或同步處理文件的增量變更。
  • 定期背景同步 - 允許已安裝且經常使用的網頁應用程式定期喚醒服務工作人員 (根據經過的最短時間)，並執行 (例如更新快取)，讓使用者開啟應用程式時能看到最新內容。
  • Content Indexing API：讓網頁應用程式告知瀏覽器有哪些內容可離線存取，以便瀏覽器向使用者顯示這些內容。
  • 背景擷取 - 允許長時間執行的背景擷取作業，例如下載電影或上傳影片和圖片，且不會有服務工作人員遭終止的風險。

媒體串流、編碼和解碼

如果網路應用程式會播放媒體檔案 (例如影片或音訊檔案)，建議您實作下列 API：

  • 自動調整串流 - 允許影片串流根據網路效能切換位元率
  • 子母畫面 - 允許使用者將影片從網頁應用程式彈出到永遠置頂的視窗，然後獨立移動和調整大小
  • 媒體工作階段 API - 允許使用者透過硬體和作業系統層級的軟體功能 (例如鍵盤或鎖定畫面上的播放/暫停/停止按鈕)，控制網頁應用程式的媒體播放作業，以及控制作業系統層級的媒體通知 (例如標題、藝人、專輯和插圖)
  • Chromecast API：讓使用者將媒體內容投放到可用的 Chromecast 接收器，例如在電視上播放網頁應用程式中的影片。
  • Web Codecs 🔮 - 存取內建的硬體和軟體媒體編碼器和解碼器，適用於低延遲直播等即時用途，以及檔案的編碼、解碼和轉碼。

擴大輸入支援

進階周邊裝置支援

  • 網頁 USB - 允許網頁應用程式從您的應用程式存取非標準 (即鍵盤和滑鼠) USB 裝置
  • Serial API 🔮 - 新增 API，可透過實體或虛擬序列埠與硬體裝置通訊。

您的 PWA 檢查清單

準備好使用這些強大的新 API，進一步提升 PWA 體驗了嗎？請從下列用途中選擇一項，查看建議使用的 API 組合，或自行建立檢查清單並完成！