開始使用

首要步驟

漸進式網頁應用程式仍屬於網站，提供進階功能。而且不會與任何技術堆疊相輔相成，您可以從頭開始使用新網站，或是直接更新現有網站，不必重新全面檢查。本指南將說明如何建立良好的 PWA 模式實作。以下提供幾個入門策略：

先從小額開始！這個方法包括從基本的資訊清單檔案、簡易的離線網頁，以及負責提供離線網頁的 Service Worker 開始，並快取一些重要的 CSS 和 JavaScript。藉助重要的 CSS 和 JavaScript 快取功能，您現有的網頁應用程式可以離線運作，同時提升效能。

選擇一項會對使用者或業務帶來重大影響的新功能 (例如推播通知或檔案處理)。這樣您就能設法將程式碼調整至 PWA 集區，而且不會同時進行過多變更。

可使用應用程式的現有部分或特定使用者歷程 (例如影片播放或登機證)，然後以離線優先的 PWA 的形式支援單獨使用，或是同時使用兩者。這有助於您進行低風險實驗，重新思考 PWA 使用者體驗。

如果您正在重新設計網站，或是從頭開始設計，那麼這項策略便非常實用。與其他策略相比，這項服務可讓您更輕鬆地建構 PWA 設計模式，尤其能從一開始就充分運用服務工作人員的所有強大優勢。

將 PWA 發布至應用程式商店的功能後，即可將 PWA 納入 PWA 啟動器，並上傳至商店，例如 Google Play 商店或 Windows 商店。如果您已有特定平台的應用程式，可以將該應用程式替換為在商店中發布的 PWA。

如此一來，現有使用者就能將體驗升級到 PWA，而新使用者仍可從瀏覽器或應用程式商店使用或安裝 PWA。除此之外，您還將打造一款適合所有人的應用程式，不僅能節省成本和時間，還能改善使用者體驗。

「漸進式網頁應用程式」是一個網站，因此以下問題所在：何時會成為漸進式網頁應用程式？答案其實並不簡單，因為 PWA 概念並非參照特定技術或堆疊，因此 PWA 是包含各種技術元件的模式。

雖然所有瀏覽器並沒有獨特的規則，但有一組名為「漸進式網頁應用程式檢查清單」的建議，可協助您建立使用者喜愛的 PWA。

由於 PWA 適用於所有裝置 (從行動裝置到電腦)，因此核心漸進式網頁應用程式檢查清單會說明如何讓「所有」使用者 (無論螢幕大小或輸入類型) 都能安裝可靠的應用程式。

核心需求如下：

成效是網站成功的重要關鍵，因為成效良好的網站比起成效不佳的網站更能吸引並留住使用者。網站應著重於改善以使用者為中心的成效指標。

漸進式網頁應用程式屬於網頁應用程式，因此必須能在各種瀏覽器中運作，而不只是在單一應用程式中執行。不過，各種瀏覽器提供的體驗不盡相同。可能有特定瀏覽器不支援的功能，為了提供良好的體驗，建議您改用備用方案。

使用者可在任何螢幕大小上使用 PWA，而且所有內容都能透過任何可視區域大小存取。

使用者離線時，相較於返回預設的瀏覽器離線頁面，將他們保留在 PWA 中，能提供更順暢且原生的體驗。

使用者在主畫面中安裝或新增應用程式後，較常使用這些應用程式，而且只要安裝 PWA，即可運用更多功能打造更優質的使用者體驗。

想要建立真正優異的漸進式網頁應用程式 (這就像一流應用程式一樣無比)，您需要的不只是核心檢查清單。優質的漸進式網頁應用程式檢查清單，是要讓 PWA 提供穩定可靠的功能，同時善用網路強大的功能。

如果允許使用者離線使用 PWA，您將能為他們打造與應用程式相似的真實體驗。請找出不需要連線的功能，讓使用者至少能使用部分功能。

確保螢幕閱讀器可解讀應用程式的內容和互動，使用者只要用鍵盤就能理解、標有焦點，且色彩對比強烈。您可以藉由讓 PWA 易於存取，確保所有人都能順利使用。

包括推送訊息、WASM 和 WebGL，以及檔案系統存取權、聯絡人選擇器，以及與應用程式商店整合等等。利用這些實用工具打造功能極高且深度整合的 PWA，可讓您打造功能齊全的使用者體驗，而且先前只能保留給平台應用程式，讓使用者隨時隨地都可使用。

所有網站流量中有超過半數來自自然搜尋。確認內容有標準網址，且搜尋引擎能夠為網站建立索引，是使用者找到 PWA 的重要關鍵。

您應能在順暢使用應用程式時切換輸入類型，且輸入法不應取決於螢幕大小。

只在提供情境中說明的理由後，才觸發權限 (例如通知、地理位置和憑證) 提示，以提高使用者接受提示的機率。

因此，請讓應用程式保持在最新狀態，並讓程式碼集維持健全狀態，能夠更輕鬆地提供符合這份檢查清單中其他目標的新功能。