共用方式為

PWA 的最佳做法

本文列出讓 PWA 成為用戶絕佳應用程式的最佳做法。 當使用者安裝應用程式時，他們對於這些應用程式可以執行的動作有特定的期望，例如離線工作、深入整合到作系統，或執行非簡單的運算工作。

閱讀此頁面上的最佳做法，以瞭解如何讓您的 PWA 看起來和感覺就像使用者所預期的一樣。

此頁面假設您已經有 PWA。 若要深入瞭解如何先建置簡單的 PWA，請 參閱開始使用 PWA。

提供自訂安裝

如果您遵循開始使用 PWA 中的步驟，就可以使用瀏覽器網址列中的 [應用程式可用] 按鈕來安裝您的應用程式。

在應用程式使用者介面中，自定義安裝體驗對您的用戶來說可能更為明顯，並導致更多安裝。

若要建立自定義安裝體驗，請使用 beforeinstallprompt 事件，並在您的應用程式中提供您自己的安裝按鈕。

若要查看事件的 beforeinstallprompt 程式代碼範例，請檢查 PWAmp 示範原始程式碼。 若要測試自訂安裝，請開啟 PWAmp 示範，然後按兩下 [更多工具 (...) >關於>在應用程式中安裝應用程式] 。

提交至應用程式市集

許多使用者會在其裝置的 App Store 上尋找您的應用程式。 從官方應用程式市集下載可為您的使用者提供可信任且熟悉的體驗。

您可以使用 PWA Builder，將 PWA 發佈至適用於 Windows 的 Microsoft 市集、適用於 iOS 的 App Store 或適用於 Android 的 Play 市集。

若要瞭解如何使用 PWA Builder 併發佈至 Microsoft Store，請參閱 將 PWA 發佈至 Microsoft Store。

建立絕佳的應用程式圖示

許多使用者會依其圖示在其裝置上尋找應用程式。 若要協助使用者更輕鬆地找到您的應用程式，請選擇可辨識的圖示，確定它很醒目提示，並確定它能適應應用程式安裝所在的裝置。

在 Windows 上，您的應用程式圖示會出現在許多位置，例如任務欄、[開始] 功能表或 Alt+Tab 工作切換器。 提供多個影像大小，以確保您可以在這些位置輕鬆辨識您的應用程式圖示。

若要瞭解 Windows 上需要的影像大小，請參閱定義圖示和主題色彩中的圖示影像大小。

使用獨立應用程式視窗

原生應用程式有自己的專用視窗。 PWA 可以定義它們在主機作系統中的顯示方式。

若要在沒有瀏覽器瀏覽使用者介面的獨立視窗中顯示 PWA，請使用 Web 應用程式指令清單檔案中的 顯示 成員，並將它設定為 standalone。

如果您的應用程式有數個 HTML 頁面，請確定使用者可以使用應用程式內的按鈕或連結在頁面之間切換。 使用指令 minimal-ui 清單成員的 display 值，讓使用者使用應用程式標題欄中瀏覽器所呈現的上一個和下一個按鈕，在頁面之間切換。

若要建立更沉浸式的原生體驗， 桌面 PWA 也可以選擇隱藏預設作系統標題欄，並改為顯示自己的內容。 顯示標題欄通常為 的內容，可協助 PWA 感覺更像原生應用程式。 許多傳統型應用程式，例如 Visual Studio Code、Microsoft Teams 和 Microsoft Edge 都已這麼做。

若要取代標題列，請 參閱使用視窗控制項重疊在標題欄區域中顯示內容。

在作系統中整合

用戶預期已安裝的應用程式會以某種方式與主機作系統整合。

您的應用程式可以使用作系統整合功能，例如快捷方式、應用程式之間的共用、徽章、檔案處理或鏈接處理，來提供更熟悉、吸引人且順暢的體驗。

捷徑

快捷方式可讓您以滑鼠右鍵按下應用程式圖示，來定義應用程式功能的直接連結。

請參閱 定義應用程式快捷方式 (長按或按滑鼠右鍵功能表) 。

應用程式共用

PWA 可以透過作系統的 [共用] 對話框，將內容分享給其他應用程式，以及接收來自其他應用程式的內容。

請參閱 與其他應用程式共享內容。

圖示徽章

PWA 可以在其應用程式圖示上顯示狀態徽章，以警示使用者應用程式中是否有新內容。

請參閱使用徽章、通知和推播訊息重新吸引使用者中的在應用程式圖示上顯示徽章。

檔案處理

您可以將 PWA 註冊為特定檔案類型的檔案處理程式。

當作系統中的使用者開啟特定檔案時，使用 PWA 檔案處理程式功能自動啟動您的應用程式。

請參閱 處理 PWA 中的檔案。

註冊您的應用程式是連結或通訊協定處理程式，可在其他應用程式中使用特定連結時自動啟動您的應用程式。

請參閱 處理 PWA 的連結 和 處理 PWA 中的通訊協定。

部件

實驗性功能

建立您自己的應用程式小工具，以顯示在作系統小工具儀錶板中，例如 Windows 11 小工具面板。

請參閱 在 Windows 小工具面板中顯示 PWA 小工具。

支持離線案例

當連線到速度緩慢或不可靠的網路，或即使沒有因特網存取時，通常仍可開啟和使用已安裝的應用程式。 已安裝應用程式的使用者預期這些應用程式會在這些情況下繼續運作。 它們也預期應用程式的網路相依部分會正常處理與自定義訊息和本機快取功能的連線不足。

若要改善保留期，請將服務背景工作角色新增至您的 PWA。 您可以使用服務背景工作角色的 Fetch 和 Cache API，以及本機數據記憶體存取，為您的使用者提供良好的離線體驗。

您可以在數個步驟中提供良好的離線體驗：

  1. 快取應用程式啟動、顯示內容，以及讓使用者執行最常見的工作所需的所有靜態資源。
  2. 針對無法快取的頁面，重新導向至自定義離線頁面。
  3. 正常處理應用程式的工作，這些工作無法在沒有因特網存取時使用。
  4. 實作進階案例，例如讓使用者下載數據以供脫機檢視。

另請參閱:

將數據儲存在本機

若要為您的使用者提供豐富且快速的體驗，請使用 PWA 可用的不同永續性數據儲存選項，例如：

  • 快取記憶體，以儲存應用程式的靜態資源。
  • 本機和會話記憶體，用來儲存少量的用戶數據。
  • IndexedDB，用來儲存較大、結構化的用戶數據。
  • 檔系統存取 API，以將檔案儲存在磁碟上。

若要深入瞭解，請參閱 在裝置上儲存數據。

使用進階功能

已安裝的應用程式通常會執行網站通常不支援的進階運算案例。

若要提供類似應用程式的體驗，請使用進階 Web 功能，例如：

請確定您的應用程式最重要的工作可以在所有瀏覽器和裝置上完成。 請參閱 在多個瀏覽器和裝置上測試。

讓您的應用程式看起來像是實際的應用程式

使用者會在其裝置上安裝應用程式以達成特定工作，而且對於這些工作在使用者介面中的呈現方式，以及他們如何在主機作系統中整合，有一些期望。

若要讓使用者輕鬆且熟悉地完成應用程式最重要的工作，請進行設計選擇，例如：

  • 請勿像網站一樣使用大型標頭區域來流覽至其他頁面。 請改用功能表隱喻。
  • 請勿像網站一樣使用大型頁尾區域來取得更多連結和資訊。
  • 使用字 system-ui 型讓您的內容感覺更原生且載入更快。
  • 使用較少的連結，且偏好較大的點擊目標。
  • 使用 prefers-color-scheme CSS 媒體功能來支援作系統的淺色和深色主題。
  • background-color在 Web 應用程式指令清單中提供 和 theme-color ，以自訂應用程式視窗。 請參閱 Web 應用程式指令清單。
  • 專注於最重要的工作、解除內容雜亂，以及簡化使用者介面。
  • 使用 CSS 網格線配置、CSS彈性方塊 配置 (flexbox) 、 CSS 媒體查詢和 回應式影像，根據裝置的外形規格重新組織使用者介面。
  • 藉由立即註冊用戶互動來改善認知效能。
  • 如果轉譯下一個畫面需要時間，請考慮使用基本架構畫面。 請參閱 使用 CSS 自定義屬性建置基本架構畫面。

在多個瀏覽器和裝置上測試

透過漸進式 Web Apps，您可以從一個程式代碼基底為所有裝置提供應用程式。 若要確定您的應用程式可在任何地方運作，請在多個瀏覽器、作系統和裝置上進行測試。

請確定應用程式最重要的案例可在任何地方運作，並逐漸增強支援裝置的體驗。

若要在多個環境中測試您的應用程式，請考慮下列技術：

支援深層連結

若要透過 Web 和社交媒體改善應用程式的探索和共用，請將應用程式的每個頁面路由傳送至唯一的 URL，並支援 深層連結。

另請參閱

本機：PWA：

本機：DevTools：

MDN：

維琪百科：

GitHub：

其他：