共用方式為

PWA 的最佳實務

本文列出了讓你的 PWA 成為優秀應用程式的最佳實務。 使用者安裝應用程式時，對這些應用程式能做什麼有特定的期待，例如離線運作、深度整合作業系統，或執行非簡單的運算任務。

閱讀本頁的最佳實務，學習如何讓你的 PWA 看起來和感覺符合使用者的期待。

本頁假設你已經擁有 PWA。 想了解更多關於如何先建立一個簡單的 PWA，請參考 「開始開發 PWA」。

提供客製化安裝

只要你依照「開始開發 PWA」的步驟，瀏覽器地址列中的「可用應用程式」按鈕即可安裝你的應用程式。

在應用程式使用者介面中自訂安裝體驗，對使用者來說會更明顯，進而帶來更多安裝。

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

想看活動的程式碼範例 beforeinstallprompt ，請查看 PWAmp 示範原始碼。 要測試自訂安裝，請開啟 PWAmp 示範版，然後在應用程式中點選「 更多工具 」 (...) >「關於>安裝」應用程式 。

提交至應用程式商店

許多用戶會在裝置的應用商店尋找你的應用程式。 從官方應用程式商店下載，能為用戶提供值得信賴且熟悉的體驗。

你可以使用 PWA Builder 將你的 PWA 發佈到 Windows 的 Microsoft Store、iOS 的 App Store 或 Android 的 Play Store。

想了解如何使用 PWA Builder 並發佈到 Microsoft Store，請參見 「發佈 PWA 到 Microsoft Store」。

打造一個很棒的應用程式圖示

許多使用者透過圖示在裝置上找到應用程式。 為了幫助使用者更容易找到你的應用程式，選擇一個易於辨識的圖示，確保它突出，並能適應安裝應用程式的裝置。

在 Windows 上，你的應用程式圖示會出現在許多地方，例如工作列、開始選單或 Alt+Tab 工作切換器。 提供多種圖片大小，確保應用程式圖示在這些位置容易辨識。

要了解 Windows 需要什麼樣的圖片大小，請參閱「定義圖示與主題顏色」中的圖示圖片大小。

使用獨立的應用程式視窗

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

若想在沒有瀏覽器導覽介面的獨立視窗中顯示你的 PWA，請使用你的網頁應用程式清單檔案中的 顯示 成員，並設定為 standalone。

如果你的應用程式有多個 HTML 頁面，請確保使用者能在頁面間透過按鈕或連結在頁面間移動。 利用 minimal-ui 清單成員的值 display ，讓使用者能透過瀏覽器在應用程式標題欄中呈現的上一頁和下一頁按鈕在頁面間切換。

為了打造更具沉浸感、原生的體驗， 桌面 PWA 也可以選擇隱藏預設作業系統標題列，改為顯示自己的內容。 在標題列通常所在的位置顯示內容，能讓 PWA 感覺更像原生應用程式。 許多桌面應用程式，如 Visual Studio Code、Microsoft Teams 和 Microsoft Edge 已經具備此功能。

若要替換標題欄，請參考 標題欄區域中使用 Window Controls Overlay 顯示內容。

整合進作業系統

使用者期望已安裝的應用程式能以某種方式與主機作業系統整合。

透過作業系統整合功能，如捷徑、應用程式間分享、徽章、檔案處理或連結處理，您的應用程式能提供更熟悉、有趣且無縫的體驗。

捷徑

捷徑讓你可以透過右鍵點擊應用程式圖示來定義直接連結到你的應用程式功能。

請參考 長按或右鍵選單 (定義應用程式捷徑) 。

應用程式共用

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

請參見 「與其他應用程式分享內容」。

聖像徽章

PWA 可以在應用程式圖示上顯示狀態徽章，提醒使用者應用程式中已有新內容。

請參閱「在應用程式 圖示中顯示徽章 」的「 重新與用戶互動」的徽章、通知和推播訊息。

檔案處理

你可以註冊你的 PWA 作為特定檔案類型的檔案處理者。

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

請參見 PWA 中的處理檔案。

註冊你的應用程式是一個連結或協定處理程式，能在其他應用程式使用特定連結時自動啟動你的應用程式。

請參閱 Handle 連結到 PWA 及 Handle 協議中的 Handle。

小工具

實驗特徵

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

請參閱 Windows Widgets 板上的「顯示 PWA 小工具」。

支援離線劇本

當連接緩慢或不穩定的網路，甚至沒有網路連線時，已安裝的應用程式通常仍可開啟並使用。 已安裝應用程式的使用者預期它們能在這些條件下繼續運作。 他們也期望應用程式中依賴網路的部分能以自訂訊息和本地快取功能優雅地處理連線缺失。

為了提升留任率，可以在你的 PWA 中加入一位服務人員。 你可以利用服務工作者 Fetch 、 Cache API 以及本地資料儲存存取，為使用者提供良好的離線體驗。

你可以透過幾個步驟提供良好的離線體驗：

  1. 快取應用程式啟動、顯示內容及讓使用者執行最常用任務所需的靜態資源。
  2. 將無法快取的頁面重新導向到自訂的離線頁面。
  3. 優雅地處理無法在沒有網路的情況下使用的應用程式任務。
  4. 實作進階情境，例如讓使用者下載資料離線查看。

另請參閱:

本地儲存資料

為了為用戶提供豐富且快速的體驗，請使用PWA可用的多種持久資料儲存選項，例如：

  • 快取儲存，用來儲存應用程式的靜態資源。
  • 本地與會話儲存，用來儲存少量使用者資料。
  • IndexedDB，用來儲存更大、結構化的使用者資料。
  • 檔案系統存取 API，用於將檔案儲存在磁碟上。

欲了解更多，請參閱 裝置上的儲存資料。

使用進階功能

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

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

確保你的應用程式最重要的任務能在所有瀏覽器和裝置上完成。 請參見 「在多個瀏覽器和裝置上測試」。

讓你的應用程式看起來和感覺像真正的應用程式

使用者會在裝置上安裝應用程式以完成特定任務，並且對這些任務在使用者介面中的呈現方式以及與主機作業系統的整合有特定期待。

為了讓使用者輕鬆且熟悉地完成應用程式最重要的任務，請做出如下設計選擇：

  • 不要像網站那樣用很大的標題區來導覽其他頁面。 改用菜單的比喻。
  • 不要像網站那樣用大頁尾區域來提供更多連結和資訊。
  • 用字 system-ui 體讓你的內容感覺更原生，載入速度更快。
  • 使用較少的連結，偏好較大的命中目標。
  • 透過偏好 色彩方案 CSS 媒體功能，支援作業系統的淺色與暗色主題。
  • 在你的網頁應用程式清單中提供 background-color 一個 和 theme-color ，以自訂應用程式視窗。 請參閱 網頁應用程式清單。
  • 專注於最重要的任務，整理內容，並簡化使用者介面。
  • 根據裝置的外型重新組織使用者介面，使用 CSS格線佈局、 CSS彈性盒式佈局 (flexbox) 、 CSS媒體查詢及 響應式影像。
  • 透過立即登記使用者互動來提升感知效能。
  • 如果渲染下一個畫面需要時間，可以考慮使用骨架畫面。 請參見 「使用 CSS 自訂屬性建構骨架畫面」。

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

使用 Progressive Web Apps，你可以從一個程式碼庫提供適用於所有裝置的應用程式。 為了確保你的應用程式在任何地方都能正常運作，請在多個瀏覽器、作業系統和裝置上測試。

確保應用程式中最重要的情境在所有平台都能正常運作，並逐步提升支援裝置的體驗。

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

支援深度連結

為了提升應用程式在網路和社群媒體上的發現與分享，請將應用程式的每個頁面導向到獨特的 URL，並支援 深度連結。

另請參閱

本地：PWA：

本地：DevTools：

MDN：

維基百科：

GitHub：

他：

  • Last updated on