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