如何打造優質的漸進式網頁應用程式？

成效是任何線上成功的關鍵 因為高成效網站能吸引和留住使用者 。著重於以使用者為中心進行最佳化 成效指標

原因

速度是讓使用者使用應用程式的關鍵。事實上，網頁載入時間從 1 秒延長到 10 秒後，使用者離開的機率就會增加 123%。效能也不會隨著 load 事件而停止。使用者不該不會覺得 使用者是否進行互動 (例如按下按鈕) 無論是否已註冊捲動和動畫時，應獲得流暢的流暢度。 效能會影響整個體驗，包括應用程式的運作方式和使用者對應用程式的看法。

雖然每個應用程式的需求各有不同，但 Lighthouse 中的效能稽核作業是以 Core Web Vitals 為依據，如果稽核分數高，使用者就更有可能享有愉快的體驗。您也可以使用 PageSpeed Insights 或 Chrome 使用者體驗報告 ，取得網頁應用程式的實際效能資料。

方式

請參閱快速載入時間指南，瞭解如何讓 PWA 快速啟動並維持快速。

使用者可以在安裝網頁應用程式前，使用任何瀏覽器存取該應用程式。

原因

漸進式網頁應用程式是最優先的網頁應用程式，這類應用程式必須 。

根據 Jeremy Keith 在 Resilient Web Design 一文中提到的有效做法，您可以找出核心功能，使用最簡單的技術提供這些功能，然後盡可能提升使用體驗。在許多情況下，這意味著從 使用 HTML 建立核心功能，透過 運用 CSS 和 JavaScript 打造更吸引人的使用體驗。

例如提交表單實作這項功能最簡單的方法，就是提交 POST 要求的 HTML 表單。建構完成後，您可以使用 JavaScript 改善使用體驗，執行表單驗證並透過 AJAX 提交表單，為支援這項功能的使用者提供更優質的體驗。

使用者會透過各種裝置和瀏覽器瀏覽您的網站。您不能只鎖定該光譜的頂端。使用功能偵測功能，為盡可能廣泛的潛在使用者提供可用的體驗，包括使用尚未存在的瀏覽器和裝置的使用者。

方式

Jeremy Keith 的彈性網頁設計 提供了豐富的資源，方便使用者瞭解 Google Cloud 提供的 採用跨瀏覽器、漸進式方法

延伸閱讀

• A List Apart 的「Understanding Progressive Enhancement」一文，是這個主題的絕佳入門資訊。
• 破壞雜誌 漸進式增強：定義與運用方式？ 提供了實用的介紹，以及更多進階主題的連結。
• MDN 實作特徵偵測功能 文章討論如何藉由直接查詢來偵測功能。

使用者可以在任何螢幕尺寸上使用 PWA，且所有內容皆可在任何可視區域尺寸下使用。

原因

裝置大小各有不同，使用者可能在 提供多種大小選項，即使是一部裝置也沒問題。因此最重要的是 可確保內容不但符合可視區域的大小 網站上的功能和內容都適用於各種大小的可視區域。

使用者要完成的工作和要存取的內容不會因可視區域大小而改變。您可以根據不同的可視區域大小重新排列內容，且內容應該會以某種方式顯示。事實上，就像 Luke Wroblewski 讀書的《Mobile First》一樣， 先從小處著手，再針對大螢幕調整設計 網站的設計：

行動裝置需要軟體開發團隊負責 也就是應用程式中最重要的資料和動作。320 x 480 像素的螢幕根本沒有空間放置多餘的非必要元素。您必須優先處理。

方式

我們在回應式設計上有許多資源，包括 原始版本 本文由 Ethan Marcotte 提供 1 個 一系列重要概念 以及相關書籍和講座如要將討論範圍縮小到回應式設計的內容方面，請參閱內容優先設計和內容外回應式版面配置。最後，儘管把重點放在行動裝置 七大「致命行動」迷思 作者：Josh Clark 的表現同樣與小巧的回應式畫面相關 和行動版網站一樣重要

當使用者離線時，如果讓他們留在 PWA 中，比起返回預設瀏覽器的離線頁面，可提供更流暢的體驗。

原因

無論連線狀態為何，使用者都希望已安裝的應用程式能夠正常運作。在這個平台專屬應用程式中，不會 且 PWA 一律不應顯示瀏覽器預設的離線網頁。 提供自訂的離線體驗，讓使用者在瀏覽到 尚未快取的網址，且使用者嘗試使用的功能會 網頁需要網路連線，讓你在網路世界中 應用程式、執行個體

方式

在服務工作者的 install 事件期間，您可以預先快取自訂離線頁面，以便在使用者離線時顯示。請參閱「建立離線備用頁面」，瞭解如何自行實作。請注意，Chrome 會 如果沒有提供，就會顯示基本離線網頁。

使用者在裝置中安裝或新增應用程式的使用者，通常會與這些遊戲互動

原因

安裝漸進式網頁應用程式後，其外觀、操作方式和行為都會與所有其他已安裝的應用程式相同。從使用者啟動時使用的平台啟動 的其他應用程式。這類應用程式會在專屬的應用程式視窗中執行，與瀏覽器分開，並會像其他應用程式一樣顯示在工作清單中。

與裝置專屬應用程式一樣，安裝應用程式的使用者是參與度最高的目標對象，而且參與度指標通常與行動裝置上的應用程式使用者相同。這些指標包括比一般訪客更高的重複造訪次數、在網站停留時間更長，以及轉換率更高。

方式

按照可安裝的指南操作 。

如果應用程式不一定要連線，則可在離線和線上狀態下正常運作。

原因

除了提供自訂離線網頁，使用者也期望 PWA 並可離線使用舉例來說，旅遊和航空公司應用程式應在離線時提供行程詳細資料和登機證。音樂 影片，和 Podcast 製播應用程式應允許離線播放。社交和 新聞應用程式應快取近期內容，讓使用者離線閱讀。 使用者也會希望在離線狀態下保持驗證狀態，因此設計 離線驗證離線 PWA 可為使用者提供真正的應用程式體驗。

方式

決定使用者希望離線使用的功能後 那就要製作內容，方便離線使用 定義。您可以使用 IndexedDB (瀏覽器內的 NoSQL 儲存系統) 儲存及擷取資料，並使用背景同步處理功能，讓使用者在離線時執行動作，並延後伺服器通訊，直到使用者再次取得穩定連線為止。您可以使用服務 利用工作站儲存其他類型的內容，例如圖片、影片檔案 離線使用，以及實作 安全的長效工作階段 讓使用者已通過驗證從使用者體驗的角度來看 使用 骷髏畫面 可讓使用者在載入時，大致瞭解廣告的速度和內容 然後視需要改回快取內容或離線指標

所有使用者互動都會通過 WCAG 2.0 無障礙需求

原因

大多數使用者在生活中的某個時刻，會想以某種方式使用 PWA 已針對 WCAG 2.0 無障礙需求人類能夠與 需要瞭解 PWA 的存在，因此這些需求可能是暫時性的 永久的更新和永久資料為 PWA 加入無障礙功能，讓所有人都能使用。

方式

您可以從 W3C 的網頁無障礙功能簡介著手。大部分的無障礙設計測試都必須 手動完成。無障礙功能的 Lighthouse 稽核、axe 和 無障礙功能深入分析等工具，可協助您自動化部分無障礙功能測試。此外， 使用語意正確的元素，而非重新建立這些元素 自行管理，例如 a 和 button 元素。這可確保您在需要建構更進階的功能時，能符合無障礙設計的預期 (例如何時使用箭頭與分頁)。A11Y 營養資訊卡 針對一些常見元件提供不錯的建議。

使用者可以輕鬆透過搜尋功能找到您的 PWA。

原因

網路最大的優點之一，就是您可以 網站和應用程式事實上，超過一半的網站流量都來自自然搜尋。可以確定 標準網址已存在內容，且搜尋引擎可以將您的 網站極為重要，必須讓潛在使用者能夠找到您的 PWA。這是 特別是採用用戶端轉譯時

方式

首先，請確認每個網址都有專屬的描述性標題和中繼說明。接著，您就能使用 Google Search Console 和搜尋引擎最佳化的稽核 Lighthouse 中的標記，以便偵錯及修正 PWA 的能見度問題。您也可以使用 Bing 或 Yandex 的網站擁有者工具，並考慮在 PWA 中使用 Schema.org 的結構定義來加入結構化資料。

無論是使用滑鼠、鍵盤、觸控筆或觸控螢幕，都能順利操作 PWA。

原因

裝置提供多種輸入方式，使用者在使用應用程式時，應可在這些輸入方式之間順暢切換。同樣重要的是，輸入方式不應依賴螢幕大小，也就是說，大型檢視區必須支援觸控，小型檢視區則必須支援鍵盤和滑鼠。請盡可能確保應用程式和所有功能支援使用者可能選擇的任何輸入法。在適當的情況下改善體驗， 特定輸入的控制介面 (例如下拉即可重新整理)。

方式

Pointer Events API 提供整合式介面，可使用各種輸入選項。 尤其適合新增觸控筆支援功能支援手機的兩邊觸控功能 請使用正確的語意元素 (錨定、按鈕、表單控制項等) 且不需使用 非語意式 HTML當您加入會在懸停時啟動的互動時，請確保這些互動也能在點擊或輕觸時啟動。

要求使用強大 API 的權限時，請提供相關資訊，並僅在需要 API 時要求。

原因

會觸發權限提示的 API (例如通知、地理位置和憑證) 是故意設計為會干擾使用者，因為這些 API 通常與需要使用者選擇加入的強大功能有關。如果在網頁載入時等沒有其他背景資訊的情況下觸發這些提示，使用者不太可能接受這些權限，而且日後更可能不信任這些提示。請改為在向使用者說明需要該權限的原因後，才觸發這些提示。

方式

權限使用者體驗 和使用者體驗 Planet 的 要求使用者授予權限的正確方式 都有助於瞭解如何設計權限提示 都會套用至所有 PWA

確保程式碼集的健康狀態有助於達成目標 並提供新功能

原因

建構現代化網頁應用程式的過程中，往往需要投入許多心力。請務必讓應用程式保持最新狀態，並確保程式碼集健全，這樣您就能更輕鬆地提供符合本檢查清單中其他目標的新功能。

方式

為了確保健康狀態良好，執行多項高優先順序檢查 codebase:

• 請避免使用含有已知安全漏洞的程式庫。
• 請確認您使用的不是已淘汰的 API。
• 從程式碼集移除不安全的程式碼編寫做法 (例如使用 document.write() 或非被動捲動事件的事件監聽器)。
• 您甚至可以用防禦性的程式碼確保 PWA 不會因為 無法載入數據分析或其他第三方程式庫。
• 建議您進行靜態程式碼分析 (例如程式碼檢查) 並自動測試多個瀏覽器和發布版本。這些技巧有助於在錯誤進入實際工作環境前，先行找出錯誤。