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