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

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

原因

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

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

方式

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

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

原因

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

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

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

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

方式

Jeremy Keith 的《Resilient Web Design》是一本優良的參考資源，說明如何在這種跨瀏覽器的漸進式方法中，思考網頁設計。

延伸閱讀

• List Apart 的 瞭解漸進式強化功能提供了相關主題的詳細說明。
• Smashing Magazine 的 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 也絕不會顯示瀏覽器的預設離線頁面。提供自訂的離線體驗，不論是在使用者前往未經快取的網址，還是使用者嘗試使用需要連線的功能時，都能提供自訂的離線體驗，讓您享有類似裝置執行體驗。

方式

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

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

原因

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

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

方式

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

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

原因

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

方式

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

所有使用者互動都符合 WCAG 2.0 無障礙規範。

原因

大多數使用者在某個時間點上，都希望以 WCAG 2.0 無障礙規定涵蓋的方式使用 PWA。使用者與 PWA 互動及瞭解 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 通常與需要使用者選擇加入的強大功能有關。如果在未提供其他背景資訊的情況下觸發這些提示 (例如載入網頁時)，可以降低使用者接受這些權限的可能性，日後也比較不會信任這些權限。相反地，只有在向使用者說明需要該項權限的理由後，才觸發這些提示。

方式

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

維持健全的程式碼庫，有助於達成目標並提供新功能。

原因

建構現代化網頁應用程式需要花費許多心力，只要讓應用程式保持最新狀態，並確保程式碼集運作正常，您就能更輕鬆地提供符合本檢查清單中其他目標的新功能。

方式

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

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