電腦版漸進式網頁應用程式

電腦版漸進式網頁應用程式 (PWA) 是絕佳的跨平台、跨瀏覽器應用程式建構方式，可提供以使用者安全和隱私權為中心的安全性模型，並透過網頁固有的連結功能內建分享功能。使用現代化 API 建構新網頁應用程式，或強化現有網頁應用程式，讓這些應用程式具備類似電腦應用程式的功能、可靠性及可安裝性。漸進式網頁應用程式是為 ChromeOS 提供網頁應用程式的最佳方式。

在 ChromeOS 上，網路平台的力量是核心所在；網路應用程式是核心平台功能。安裝的 PWA 會顯示在 ChromeOS 啟動器中，可以固定至應用程式架，並與作業系統的其餘部分深度整合。

首先，請查看漸進式網頁應用程式檢查清單，確認網頁應用程式通過核心漸進式網頁應用程式檢查清單。您可以使用 PWABuilder 提供自訂離線頁面，並讓使用者安裝應用程式。然後根據這些建議，讓 PWA 在 ChromeOS 上大放異彩。

可安裝

與一般網頁應用程式相比，PWA 的主要優點之一就是可以安裝，就像傳統的電腦應用程式一樣。web.dev 上的「漸進式網頁應用程式」路徑有一個專門介紹如何讓 PWA 可供安裝的部分，您可以從這裡開始。如要讓 ChromeOS 將 PWA 視為可安裝的應用程式，必須符合下列條件，您可以使用 Lighthouse 的可安裝稽核檢查這些條件：

  • 必須有有效的網頁應用程式資訊清單
  • 必須符合 Chrome 的安裝條件
    • 在 ChromeOS 上，系統會在多功能方塊中顯示 PWA 安裝提示，不需達到使用者參與程度的啟發式門檻。

圖示是 PWA 識別資訊的重要部分，因此請務必使用有趣且獨特的圖示，甚至可以加入透明度！由於 PWA 只有一個程式碼集，且可跨所有平台共用，因此請務必提供可遮蓋圖示。請務必一併加入一般圖示，以支援不支援可遮蓋圖示的作業系統。

安裝 PWA 後，啟動器和應用程式架都會顯示 PWA。安裝 PWA 後，您還能使用其他功能，讓應用程式更加出色。

離線工作注意事項

只要讓使用者能安裝應用程式，就能享有許多可探索性、可用性和功能方面的優勢。讓 PWA 可供安裝不代表整個體驗都必須離線運作。不過，為了讓已安裝的網頁應用程式感覺像傳統應用程式，應該要有某種形式的離線功能。只要有基本的自訂離線網頁即可開始使用；使用者希望已安裝的應用程式在連線狀態變更時不會當機。就像傳統應用程式離線時絕不會顯示空白頁面一樣，PWA 也絕不應顯示瀏覽器預設的離線頁面。自訂離線頁面可以顯示訊息，告知使用者需要連線才能玩遊戲，也可以提供其他內容讓使用者在連線前打發時間。針對未快取或需要連線的頁面/功能提供這類自訂離線體驗，有助於彌補使用者體驗的應用程式差距。

您可以在 Service Worker 的 install 事件期間建立簡單的離線頁面，方法是預先快取所需頁面以供日後使用，並在使用者離線時傳送該頁面做為回應。您可以參考自訂離線網頁範例，瞭解實際運作情形，並學習如何自行導入。

如要提供更完善的體驗，除了 Cache Storage API，您也可以使用 IndexedDB 進行瀏覽器內 NoSQL 儲存，並使用背景同步功能，讓使用者在離線時採取行動，並延後伺服器通訊，直到使用者再次連上穩定網路為止。您也可以實作安全且長期有效的工作階段等模式，讓使用者保持驗證狀態，並實作骨架畫面，快速讓使用者知道您正在載入內容，必要時可回復為快取內容或離線指標。

可觸控

幾乎所有 ChromeOS 裝置都支援觸控功能，許多裝置也支援觸控筆，因此除了正常的鍵盤和滑鼠輸入方式外，您還必須確保應用程式能順暢支援這兩種輸入方式。指標事件 API 專門用於處理這類情況！您可能不需要變更某些與指標相關的基本事件，例如 click 事件。其他事件 (例如 mouseup 或 touchstart) 應遷移至對應的指標事件，確保這些事件能順暢地與任何指標搭配運作。您甚至可以視需要分別管理不同輸入類型。對於需要大量觸覺使用者輸入的應用程式和遊戲，改用指標事件 API 後，在 ChromeOS 裝置上的體驗將大不相同。

在網頁上流暢繪圖

如果您要建構的應用程式可讓使用者以手指或觸控筆繪圖，要讓輸入和輸出之間的延遲時間夠短，讓使用者感覺流暢，一直以來都是一大難題。為 ChromeOS 建構這類以 Canvas API 為基礎的應用程式時，建議使用 canvas.getContext() 的 desynchronized 提示，提供低延遲的算繪效果。如要使用畫布的 desynchronized 提示，請按照下列步驟操作：

const canvas = document.createElement('canvas'); // or select one from the DOM
const ctx = canvas.getContext('2d', {
  desynchronized: true,
  // Other options here…
});

if (ctx.getContextAttributes().desynchronized) {
  // Low-latency supported! Do something awesome with it.
} else {
  // Low-latency not supported! Fall back to less awesome stuff
}

觸控設計注意事項

設計網頁應用程式時，請務必考量觸控和觸控筆支援功能。您可能認為理所當然的互動 (例如懸停) 無法順利運作，甚至無法透過其他輸入方式進行。設計觸控和觸控筆友善介面時，請注意以下最佳做法：

  • 請勿根據螢幕大小假設輸入內容。請改用功能偵測 (最好是在輸入時)，判斷如何回應。請注意，在 ChromeOS 上，使用者可以在單一工作階段中，順暢地切換使用滑鼠、觸控和觸控筆。
  • 請確保使用者預期會觸控的元素具有足夠大的最小目標大小，以免誤觸周圍的元素。
  • 將懸停視為漸進式強化，並確保可透過其他方式 (例如長按或輕觸) 達成觸控和觸控筆互動。
  • 觸控使用者希望能夠直接與螢幕上的元素互動，例如在地圖上使用雙指撥動縮放，而不是使用放大/縮小按鈕。視情況新增常見的觸控手勢，可讓應用程式操作起來更自然。

讓 AI 具備能力

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

注意：這些功能可能仍在考慮階段，也可能已發布，且可能僅適用於桌機或行動裝置，而非兩者皆適用。ChromeOS 使用者可能會在桌面版功能推出時取得這些功能，但跨平台支援 (包括 ChromeOS 的穩定支援) 有時需要數年時間。