PWA 的最佳實踐

適應所有瀏覽器

您的 PWA 基於 Web 技術。這意味著，除了可以在裝置上安裝之外，PWA 也可以在 Web 瀏覽器中執行。為了確保相容性，必須在各種瀏覽器和作業系統上測試您的應用。

考慮使用者可能使用的各種瀏覽器，並滿足廣泛的潛在使用者群體。使用功能檢測可以為最廣泛的受眾提供可用的體驗。

功能檢測也有助於漸進增強 (Progressive Enhancement)，這是一種設計理念，可以為儘可能多的使用者提供出色的體驗。

透過漸進增強，您首先使用最簡單的技術來確保您應用的核心功能普遍可用，然後為支援的裝置增強體驗。

例如，使用 HTML 的 <form> 元素處理表單提交意味著該表單將在所有瀏覽器中正常工作，包括不支援 JavaScript 的瀏覽器。然後，您可以逐步增強表單，透過新增客戶端驗證和基於 JavaScript 的提交處理，為相容裝置提供更好的體驗。

適應所有裝置

與在各種瀏覽器上測試應用的重要性一樣，跨裝置測試可確保您的應用對最廣泛的受眾都可用。

響應式設計對於 PWA 至關重要，可以確保內容在任何螢幕尺寸上都可訪問。使用者應該能夠訪問所有功能和內容，而無論其裝置的螢幕尺寸如何。透過在不同的視口大小下重新排列內容，您可以優先顯示重要資料和操作。

確保使用者無論如何訪問您的內容都能與您的應用進行互動。支援鍵盤和滑鼠，以及觸控或觸控筆輸入方法。確保您的所有應用功能都可以透過任何輸入方法進行訪問。

最後，使用語義化 HTML 元素，而不是重新建立自己的按鈕或表單元素，因為語義化 HTML 元素可以開箱即用地支援所有使用者輸入方法。

提供離線體驗

已安裝應用的使用者的期望是它們始終可用；即使連線到緩慢或不可靠的網路，或者裝置完全離線。

自定義離線頁面

至少，您的 PWA 應該提供一個自定義離線頁面，告知使用者他們已離線，而不是顯示通用的瀏覽器錯誤頁面。自定義離線頁面可提供跨瀏覽器和裝置更一致的體驗，並使使用者與您的應用保持互動。

您可以透過使用 Service Worker 來攔截網路請求，並在使用者離線時響應自定義離線頁面，從而提供自定義離線頁面。

離線操作

要進一步提供類應用體驗，您的 PWA 應該在使用者離線時也能執行。這意味著使用者即使離線也可以繼續使用您應用的部分，最好是全部功能。

考慮以下場景：使用者撰寫了一封長郵件並點選“傳送”，卻沒意識到他們已失去網路連線。因為您的應用支援離線執行，該郵件將被本地儲存，並在裝置重新聯網後自動傳送。

瞭解更多關於離線和後臺操作的資訊。

支援深層連結

深層連結是超連結，指向您應用域內的特定頁面。例如，您應用的主頁可能位於 https://example.com/，但您也可以連結到特定產品頁面 https://example.com/products/123。

透過唯一 URL 引用任何資源的能力是 Web 最強大的功能之一。由於 PWAs 構建在 Web 技術之上，因此它們可以，也應該，利用這一特性。

透過唯一的 URL 使您應用的不同部分可用，允許使用者收藏、直接導航到以及共享您應用內的特定內容。它還允許搜尋引擎索引您應用的內容，並透過 Web 搜尋使其可發現。

提高速度

使用者對已安裝的應用的期望與對網站不同。使用者期望網站需要時間載入和導航，尤其是在網路連線較差的情況下。然而，他們期望已安裝的應用始終快速響應。

您的應用載入和執行核心功能的速度在使用者參與度和留存率方面起著關鍵作用。應用響應越慢，使用者越可能放棄。

有工具、API 和最佳實踐可以幫助衡量和改進效能。要了解更多，請參閱 Web 效能。

使其易於訪問

可訪問性對於確保每個人都能使用您的應用至關重要，無論個人能力如何，或者他們使用什麼裝置來訪問您的應用。可訪問性確保儘可能多的人可以使用您的應用。法律也要求可訪問性。此外，可訪問性通常會為所有人帶來更好的使用者體驗，而不僅僅是那些有永久或暫時性殘疾的人。

瞭解如何在可訪問性中使您的應用易於訪問。

提供類應用體驗

與作業系統整合

使用者期望已安裝的 PWA 的行為方式與任何已安裝的平臺特定應用相同。要提供使用者期望的類應用體驗，請以某種方式將您的應用與作業系統整合。例如：

• 使用 Notifications API 向用戶裝置傳送通知。
• 使用 file_handlers Web 應用清單成員處理檔案。
• 在應用圖示上顯示徽章。
• 啟用應用之間的資料共享。

許多 Web 應用清單成員 可用於自定義您的應用在使用者裝置上的顯示方式，並更深入地與作業系統整合。

應用的外觀和感覺

使用者安裝應用是為了獲得比網站更專注的體驗，並更有效地完成任務。他們期望應用更精簡，減少混亂，並專注於最重要的任務。

確保您的 PWA 提供類應用體驗，請考慮以下指南：

• 使用 standalone 顯示模式，為您的應用提供自己的專用視窗。
• 定義您的應用圖示.
• 使用 prefers-color-scheme 媒體功能檢測使用者的首選主題，並相應地調整您應用的主題。
• 自定義您應用的主題和背景顏色，以提供更精緻的體驗，使其感覺更像平臺特定應用。
• 精簡內容，專注於您的應用允許使用者完成的最重要任務。這可能意味著刪除傳統網站中常見的大型標題和頁尾，而是用選單的隱喻替換它們。
• 使用 system-ui font-family 使您的內容感覺更像原生平臺，並且載入速度更快，而無需使用者下載自定義字型。

另見

• What makes a good Progressive Web App on web.dev (2022)。
• Best practices for PWAs on learn.microsoft.com (2023)。