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

效能是任何線上體驗成功的關鍵，因為效能優異的網站更能吸引及留住使用者，著重於以使用者為本的效能指標進行最佳化。

原因

速度是讓使用者使用應用程式的關鍵。事實上，網頁載入時間從 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 的《Resilient Web Design》是一本優良的參考資料，說明如何運用這項跨瀏覽器的漸進式方法，思考網頁設計。

延伸閱讀

• A List Apart 的「 Understanding Progressive Enhancement」一文，是這個主題的絕佳入門資訊。
• Smashing Magazine 的 Progressive Enhancement: What It Is, And How To Use It? 提供實用資訊和進階主題的連結。
• MDN 的「 實作特徵偵測」一文討論如何直接查詢特徵來偵測特徵。

使用者可以在任何螢幕尺寸下使用 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 通常與需要使用者選擇加入的強大功能有關。如果在網頁載入時等沒有其他背景資訊的情況下觸發這些提示，使用者不太可能接受這些權限，而且日後更可能對這些提示產生不信任感。請改為在向使用者說明需要該權限的原因後，才觸發這些提示。

方式

如要瞭解如何設計權限提示訊息，請參閱「權限使用者體驗」一文，以及 UX Planet 的「 如何向使用者要求權限」一文。這些都是很好的資源，可協助您瞭解如何在設計時著重於行動裝置，並套用至所有 PWA。

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

原因

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

方式

我們提供多項高優先順序檢查，確保程式碼庫健全無虞：

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