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

效能對任何線上體驗而言至關重要，因為與效能不佳的網站相比，效能高的網站更能吸引及留住使用者。請著重針對以使用者為中心的成效指標進行最佳化。

原因

速度是吸引使用者「使用」應用程式的關鍵。 事實上，當網頁載入時間從 1 秒增加到 10 秒，使用者跳出的機率會增加 123%。不論是 load 事件，效能也不會停止。使用者不應想知道自己的互動 (例如點選按鈕) 是否已註冊。捲動和動畫時，應獲得流暢的體驗。 效能會影響整個體驗，影響範圍涵蓋應用程式行為和使用者觀感。

雖然所有應用程式的需求各不相同，但 Lighthouse 中的效能稽核是以網站體驗核心指標為基礎，如果這些稽核評分較高，使用者就更有可能享受愉快的使用體驗。您也可以使用 PageSpeed Insights 或 Chrome 使用者體驗報告，取得網頁應用程式的實際效能資料。

做法

請按照快速載入時間指南操作，瞭解如何提升 PWA 的啟動速度，並保持運作快速。

使用者不必先安裝，就能使用任何瀏覽器存取網頁應用程式。

原因

漸進式網頁應用程式是最優先的網頁應用程式，也就是說，這類應用程式必須能在不同瀏覽器中運作。

有效的做法是根據彈性網頁設計的 Jeremy Keith 找出核心功能，以最簡單的技術提供這些功能，然後盡可能強化體驗。在多數情況下，這表示您只須從 HTML 著手，就能建立核心功能，再利用 CSS 和 JavaScript 提升使用者體驗，打造更引人入勝的體驗。

例如提交表單最簡單的實作方式，就是提交 POST 要求的 HTML 表單。建構完成之後，您可以利用 JavaScript 執行表單驗證，並透過 AJAX 提交表單，改善支援表單的使用者體驗。

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

做法

Jeremy Keith 的彈性網頁設計是一項絕佳資源，可協助您瞭解如何針對這種跨瀏覽器、漸進式的方法設計網頁設計。

延伸閱讀

• List Apart 的 瞭解漸進式強化功能提供了相關主題的詳細說明。
• 《Smashing》雜誌的《 Progressive Enhancement: What It is, and How to Use It?》，提供了實用的介紹，以及更多進階主題的連結。
• MDN 的「 實作功能偵測」一文會探討如何透過直接查詢的方式偵測功能。

使用者可在任何大小的螢幕上使用 PWA，且您的 PWA 的所有內容皆以任何大小的可視區域顯示。

原因

不同裝置的大小各有不同，使用者或許可以使用不同大小的應用程式，即使是在相同裝置上也沒問題。因此，除了確保內容符合可視區域外，網站的所有功能和內容也應可供所有可視區域大小使用。

使用者想完成的工作以及他們想要存取的內容，都不會因可視區域大小而改變。您可以依據不同的可視區域大小重新排列內容，且所有內容應該都會出現。事實上，Luke Wroblewski 的書籍《Mobile First》指出，首先針對大螢幕進行小幅調整和設計，可提升網站的設計：

行動裝置需要軟體開發團隊專心處理應用程式最重要的資料和動作。320 x 480 像素的螢幕中也不會有多餘的非必要元素。您必須排定優先順序。

做法

許多與回應式設計的資源有關，包括 Ethan Marcotte 撰寫的原始文章，當中含有 一系列重要概念，以及相關書籍和講座。如要將討論縮小到回應式設計的內容層面，請參閱 內容優先設計和 內容無回應的回應式版面配置。最後，儘管將重心放在行動裝置，但 Josh Clark 的《 七大死結行動迷思》系列課程和回應式網站小規模網站的相關知識，與大眾更適合行動裝置瀏覽相同。

當使用者處於離線狀態時，比起直接返回預設的瀏覽器離線網頁，將他們保留在 PWA 中，可享有更順暢的體驗。

原因

使用者希望安裝的應用程式無論連線狀態為何，都能正常運作。特定平台專用的應用程式不會在離線時顯示空白網頁，PWA 也不應顯示瀏覽器預設的離線網頁。 提供自訂的離線體驗，不論是在使用者前往未經快取的網址，還是使用者嘗試使用需要連線的功能時，都能提供自訂的離線體驗，讓使用者享有類似裝置執行環境的體驗。

做法

在 Service Worker 的 install 事件期間，您可以友善載入自訂離線頁面供日後使用。如果使用者離線，您可以透過友善快取的自訂離線頁面回應。您可以按照自訂離線網頁範例查看實際範例，瞭解如何自行實作。

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

原因

安裝漸進式網頁應用程式可讓應用程式的外觀、風格和運作方式，與所有其他已安裝的應用程式無異。這個套件是從使用者啟動其他應用程式的位置啟動。這個應用程式會在獨立的應用程式視窗中執行，與瀏覽器分開執行，且會顯示在工作清單中，就像其他應用程式一樣。

和裝置專用應用程式一樣，安裝應用程式的使用者就是您最忠實的使用者，而且通常也會提供與行動裝置應用程式使用者相當的參與度指標。這些指標包括重複造訪次數、網站停留時間長，以及轉換率比一般訪客高。

做法

如要瞭解如何安裝 PWA，請參閱我們的安裝指南。

在不需要網路連線的情況下，應用程式離線運作的方式和線上運作相同。

原因

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

做法

決定使用者預期哪些功能可離線使用後，您就必須依據離線環境提供內容，並做出適當調整。您可以使用瀏覽器內 NoSQL 儲存系統 IndexedDB 來儲存及擷取資料，以及運用背景同步處理功能，讓使用者在離線時採取行動，並將伺服器通訊延遲，直到使用者再次保持連線穩定為止。您也可以使用服務工作處理程序儲存其他類型的內容 (例如圖片、影片檔案和音訊檔案)，供離線使用，以及實作安全的長效工作階段，確保使用者通過驗證。從使用者體驗的角度來看，您可以使用 架構畫面，讓使用者在載入時瞭解速度和內容，以便視需要改回快取內容或離線指標。

所有使用者互動都會通過 WCAG 2.0 無障礙功能規定。

原因

大多數使用者在生活中某個時間點，都會希望在符合 WCAG 2.0 無障礙規範的情況下使用 PWA。事實上，人類有能力與 PWA 互動，並瞭解您的 PWA，需要的可能是暫時性或永久性。只要開放您的 PWA，所有人都能使用。

做法

不妨先從 W3C 的「 網頁無障礙簡介」一文著手。大部分的無障礙設計測試都必須手動完成。您可以運用無障礙功能Lighthouse 中的稽核、axe和無障礙功能深入分析等工具，自動執行部分無障礙功能測試。此外，請務必使用語意正確的元素，不要自行 (例如 a 和 button 元素) 重新建立這些元素。如此一來，當您需要建構更進階的功能時，就能確保符合無障礙功能的期望 (例如何時應使用箭頭與分頁)。A11Y 營養資訊卡針對一些常見元件提供了絕佳的建議。

有人運用搜尋功能發現您的 PWA。

原因

網路最大的優點之一，就是可透過搜尋功能探索網站和應用程式。事實上，在所有網站流量中，有超過一半來自自然搜尋。為確保潛在使用者能找到您的 PWA，請務必確保內容有標準網址，且搜尋引擎能夠為網站建立索引。採用用戶端轉譯時尤其重要。

做法

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

無論是透過滑鼠、鍵盤、觸控筆或是觸控方式，您都能操控 PWA。

原因

裝置提供多樣的輸入方式，而使用者在使用應用程式時，應該要能順暢切換裝置。同樣重要的是，輸入法不應依賴螢幕大小，也就是說，大型可視區域必須支援觸控功能，小型可視區域也必須支援鍵盤和滑鼠。請盡可能確保應用程式及其所有功能皆可支援使用者可能選擇的任何輸入方式。在適當情況下，改善體驗來允許輸入專屬的控制項 (例如下拉即可重新整理)。

做法

Pointer Events API 提供統一的介面，讓您使用各種輸入選項，特別適合新增觸控筆支援功能。如要同時支援觸控和鍵盤，請確認你使用的是正確的語意元素 (錨點、按鈕、表單控制項等)，不要使用非語意 HTML 重新建構這些元素。加入會在懸停時啟動的互動時，請確認這些互動也可以在點擊或輕觸時啟動。

要求權限使用功能強大的 API 時，請提供背景資訊，並只在需要 API 時才詢問。

原因

如果 API 會觸發權限提示 (例如通知、地理位置和憑證)，設計上就會刻意對使用者造成乾擾，因為這類 API 通常與需要使用者選擇啟用的強大功能有關。如果在未提供其他背景資訊的情況下觸發這些提示 (例如載入網頁時)，可以降低使用者接受這些權限的可能性，日後也比較不會信任這些權限。相反地，只有在向使用者說明需要該項權限的理由後，才觸發這些提示。

做法

請參閱「權限使用者體驗」文章和使用者體驗星球的「 向使用者要求權限的正確方式」一文提供的實用資源，瞭解如何設計權限提示，並將重點放在行動裝置，同時適用於所有 PWA。

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

原因

建構現代化網頁應用程式的過程中，往往需要投入許多心力。讓應用程式保持在最新狀態，程式碼集的健康狀態將更健全，您可以更輕鬆地提供符合這份檢查清單所列其他目標的新功能。

做法

透過幾項高優先順序檢查，可確保程式碼集健康狀態良好：

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