開始使用

漸進式網頁應用程式仍屬於網站,提供進階功能。 而且不會與任何技術堆疊相輔相成,您可以從頭開始使用新網站,或是直接更新現有網站,不必重新全面檢查。 本指南將說明如何建立良好的 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 提供穩定可靠的功能,同時善用網路強大的功能。

提供離線體驗

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

完全無障礙

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

使用多項強大功能 (如有)

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

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

適用於任何輸入類型

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

提供權限要求的相關資訊

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

遵循健康程式碼的最佳做法

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

資源