漸進式網頁應用程式 (PWA) 是以新式 API 建構及強化，可提供強化功能、穩定性和可安裝性，而且只要使用單一程式碼集，即可觸及任何裝置、位置、裝置。為協助您建立最佳體驗，請善用核心和最佳檢查清單和建議來引導您。
核心漸進式網頁應用程式檢查清單
「漸進式網頁應用程式檢查清單」說明瞭應用程式可讓所有使用者安裝及使用的應用程式，無論應用程式的大小或輸入類型為何。
無論線上體驗如何，效能都十分重要，因為高成效網站能夠吸引及留住使用者，比起成效不佳的網站更有效。網站應著重於改善以使用者為中心的成效指標。
為什麼要
速度是吸引使用者「使用」應用程式的關鍵。事實上，網頁載入時間從一秒到 10 秒，使用者跳出的機率增加了 123%。效能不會因 load 事件而停止。使用者不應想知道自己是否註冊互動 (例如點選按鈕)。捲動和動畫應自然流暢。效能會影響整體體驗，包括使用者感受到應用程式的方式，以及應用程式的實際執行情況。
雖然所有應用程式都有不同需求，但 Lighthouse 的效能稽核是以 Core Web Vitals 為依據，而且在稽核作業中獲得高分，就越有可能讓使用者享有愉快的使用體驗。您也可以透過 PageSpeed Insights 或 Chrome 使用者體驗報告，取得網頁應用程式的實際成效資料。
方式
請參閱我們的快速載入時間指南，瞭解如何讓 PWA 快速啟動並維持快速運作。
使用者就能在安裝你的網頁應用程式前，使用他們選擇的任何瀏覽器存取網頁應用程式。
為什麼要
漸進式網頁應用程式屬於網頁應用程式，因此必須能在各種瀏覽器中運作，而不只是在單一應用程式中執行。
其中一個有效的做法是，在彈性網頁設計的 Jeremy Keith 提到，找出核心功能，以最簡單的技術提供該功能，然後盡可能改善使用體驗。在多數情況下，這表示您只要從 HTML 開始著手，即可打造核心功能，並進一步運用 CSS 和 JavaScript 提升使用者體驗，打造更引人入勝的體驗。
比方說，提交表單。最簡單的實作方式，是提交 POST 要求的 HTML 表單。建構完成後，您可以利用 JavaScript 驗證表單，並透過 AJAX 提交表單，讓支援表單的使用者享有更優質的體驗。
考量到使用者會透過各種裝置和瀏覽器瀏覽您的網站。您不能只指定範圍的頂部。透過功能偵測，您可以讓各種潛在使用者 (包括目前可能不存在的瀏覽器和裝置) 享有良好的使用體驗。
方式
Jeremy Keith 的彈性網頁設計是絕佳的資源，說明如何以這種漸進式的跨瀏覽器方法思考網頁設計。
延伸閱讀
- 清單 Apart 的「瞭解漸進式增強」是這個主題的簡要說明。
- 《Smashing》雜誌的漸進式強化：簡介與使用方式提供實作簡介與深入說明主題的連結。
- MDN 有一篇文章標題為「實作功能偵測」，說明如何直接查詢地圖項目，以便進行偵測。
使用者可在任何螢幕大小上使用 PWA，而且所有內容都能透過任何可視區域大小使用。
為什麼要
各種裝置的大小不一，而且使用者可能會以不同大小使用您的應用程式，即使在同一個裝置上也沒問題。因此，請務必確保內容不僅可視可視區域順利顯示，還須確保網站能在所有可視區域大小的情況下使用所有功能和內容。
使用者想完成的工作和他們想存取的內容，不會受到可視區域大小改變。內容可依不同的可視區域大小重新安排，而且應該要有不同的呈現方式。事實上，如同 Luke Wroblewski 在「行動優先」一書中指出，比起其他方法，他從小一大部分過來，反過來可以改善網站設計：
> 使用行動裝置時，軟體開發團隊只須處理應用程式中的重要資料與動作。320 x 480 像素的螢幕畫面中並沒有 > 空間，擺放多餘的非必要元素。> 你必須決定工作的優先順序
方式
回應式設計有許多資源，包括 Ethan Marcotte 發表的原始文章、與此相關的重要概念以及相關的書籍和講座。如要將討論範圍縮小至回應式設計的內容層面，請參閱「內容優先設計」和「內容型回應式版面配置」。最後，雖然他主要針對行動裝置，但瀏覽 Josh Clark 的《Seven Deadly Mobile Myths》課程內容與回應式網站的少量檢視畫面相關，與使用行動裝置時的回應式網站同等相關。
使用者處於離線狀態時，相較於切換回預設的瀏覽器離線頁面，將他們保留在 PWA 中能提供更順暢的使用體驗。
為什麼要
使用者希望已安裝的應用程式無論連線狀態如何都正常運作。平台專屬應用程式在離線時一律不會顯示空白頁面，漸進式網頁應用程式也一律不應顯示瀏覽器預設的離線網頁。提供自訂離線體驗，無論是使用者前往未快取的網址，或是使用者嘗試使用需要連線的功能，都能讓使用者享有自己在裝置上執行的功能。
方式
在 Service Worker 的 install 事件期間，您可以預先快取自訂的離線網頁供日後使用。您可以在使用者離線時，使用預先快取的自訂離線網頁回應。您可以參照我們的自訂離線網頁範例來查看這項功能的實際執行情況，並瞭解如何自行實作。
使用者會在裝置上安裝或新增應用程式，與這些應用程式的互動通常較高。
為什麼要
安裝漸進式網頁應用程式可讓其外觀、風格及行為方式與其他已安裝的應用程式相同。使用者是從同一個位置啟動其他應用程式，它會在獨立於瀏覽器的應用程式視窗中執行，也會在工作清單中顯示，就像其他應用程式一樣。
為什麼您想讓使用者安裝您的 PWA？也就是您預期使用者從應用程式商店安裝應用程式的原因。安裝應用程式的使用者是參與度最高的目標對象，且參與度指標也高於一般訪客，通常與行動裝置上的應用程式使用者一樣。這些指標包括增加重複造訪的次數、網站停留時間較長，以及轉換率。
方式
您可以按照可安裝指南的說明，瞭解如何將 PWA 設為可安裝、如何測試是否可安裝，並嘗試自行執行。
最佳漸進式網頁應用程式檢查清單
要建立真正優異的漸進式網頁應用程式 (就像是一流的應用程式一樣)，您需要核心檢查清單以外的地方。漸進式網頁應用程式檢查清單的最佳方式，就是讓 PWA 就像是裝置運作的一部分，同時還能善用強大的網路功能。
在不需嚴格連線的情況下，應用程式可像離線運作一樣運作。
為什麼要
除了提供自訂的離線網頁外，使用者也期望漸進式網頁應用程式可以離線使用。舉例來說，旅遊和航空公司應用程式應提供行程詳細資料和登機證，以便在離線時使用。音樂、影片和 Podcast 應用程式應允許離線播放。社群和新聞應用程式應快取近期內容，以便使用者在離線時閱讀。使用者也希望在離線時保持驗證狀態，因此請針對離線驗證進行設計。離線 PWA 可為使用者提供類似於應用程式的體驗。
方式
決定使用者希望哪些功能可離線運作後，您就必須提供適合離線使用的內容，並能據此調整內容。此外，您也可以使用 IndexedDB 這個瀏覽器內建的 NoSQL 儲存系統儲存及擷取資料，並使用背景同步處理功能，讓使用者在離線時採取動作，並延後伺服器通訊時間，直到使用者恢復穩定連線為止。另外，您也可以使用服務工作站儲存其他類型的內容 (例如圖片、影片檔案和音訊檔案) 以供離線使用，並藉此實作安全長效的工作階段，進而讓使用者通過驗證。從使用者體驗的角度來說，您可以使用架構畫面，讓使用者在載入過程中瞭解速度和內容，然後視需要改回使用快取內容或離線指標。
所有使用者互動均通過 WCAG 2.0 的無障礙需求。
為什麼要
多數在日常生活中，多數人都會希望以 WCAG 2.0 無障礙規範的方式使用 PWA。人類可以與 PWA 的互動和瞭解情況，處理能力可能存在許多問題，需求可能是暫時性或永久性的。您可以藉由讓 PWA 易於存取，確保所有人都能順利使用。
方式
W3C 的「網頁無障礙功能簡介」是很好的起點。大多數的無障礙功能測試都必須手動完成。Lighthouse 的無障礙功能稽核、axe 和無障礙功能深入分析等工具可協助您自動執行某些無障礙功能測試。此外，使用語意正確元素 (例如 a 和 button 元素)，而不是自行建立這些元素。這樣可確保您需要建構更進階的功能，滿足易於存取的期望，例如使用箭頭與分頁的時機。A11Y 營養資訊卡針對一些常見元件提供了極佳的建議。
你可以透過 Google 搜尋輕鬆找到 PWA。
為什麼要
網路的最大優勢之一，就是能透過搜尋功能發掘網站和應用程式。事實上，在所有網站流量中，有超過半數來自自然搜尋。請務必確認內容有採用標準網址，而且搜尋引擎可以為網站建立索引，對使用者才能找到 PWA。採用用戶端轉譯功能時尤其如此。
方式
首先，請確保每個網址都有不重複的描述性標題和中繼說明。接下來，您可以透過 Google Search Console 和 Lighthouse 的搜尋引擎最佳化稽核功能，偵錯及修正 PWA 的可偵測性問題。您也可以使用 Bing 或 Yandex 的網站管理員工具，並考慮在 PWA 中透過 Schema.org 的結構定義，納入結構化資料。
無論透過滑鼠、鍵盤、觸控筆或觸控操作，PWA 都同樣有效。
為什麼要
裝置提供多種輸入方式，因此使用者應能在使用應用程式時，順暢切換。同樣重要的是，輸入法不應取決於螢幕大小，也就是說，大型可視區域必須支援觸控，而且小型可視區域需要支援鍵盤和滑鼠。為獲得最佳能力，請確保您的應用程式及其所有功能都支援使用者可能選擇使用的輸入法。在適當的情況下，您也應該改善體驗，允許輸入特定的控制項 (例如提取重新整理)。
方式
PointerEvents API 提供整合式介面，方便您處理多種輸入選項，特別適合新增觸控筆支援。如要同時支援觸控和鍵盤，請確認您使用的是正確的語意元素 (錨點、按鈕、表單控制項等)，而且不要使用非語意的 HTML 重新建構這類元素 (適合無障礙功能)。加入可在懸停時啟動的互動時，請確保這些互動也能透過點擊或輕觸的方式啟動。
要求權限以使用功能強大的 API 時，請提供背景資訊，並只在需要 API 時才詢問。
為什麼要
會觸發權限提示的 API (例如通知、地理位置和憑證) 刻意幹擾使用者，因為這些 API 與功能相關的功能往往需要選擇啟用。在沒有其他背景資訊的情況下觸發這些提示 (例如載入網頁時)，會降低使用者接受這些權限的可能性，日後也會較不信任這些權限。相反地，請在向使用者提供情境中說明需要權限的原因後，才觸發這些提示。
方式
您可以參考「權限使用者體驗」一文和使用者體驗星球的「詢問使用者權限的正確方法」一文，瞭解如何設計權限提示；不過，只要以行動裝置為重，則適用於所有 PWA。
讓程式碼集保持健全，可更輕鬆地達成目標及提供新功能。
為什麼要
建構現代化的網頁應用程式包含許多工作，請確保應用程式保持在最新狀態，並讓程式碼集健全運作，方便您提供符合這份檢查清單中其他目標的新功能。
方式
我們會執行多項高優先順序檢查，以確保程式碼集的健康良好：避免使用有已知安全漏洞的程式庫、確保您未使用已淘汰的 API、移除程式碼集內的網路反模式 (例如使用 document.write() 或使用非被動捲動事件監聽器)，甚至在無法載入數據分析或其他第三方程式庫時，進行最終編碼以確保 PWA 不會破壞。請考慮要求在多個瀏覽器和發布版本中進行靜態程式碼分析 (例如程式碼分析) 和自動化測試。這些技術可協助您在錯誤進入實際工作環境前找出錯誤。