漸進式網頁應用程式

漸進式網頁應用程式 (PWA) 是一種網頁應用程式,其採用漸進式強化機制,可提供更可靠的體驗、運用新功能來提供更全面的整合體驗,以供安裝。此外,由於這是網頁應用程式,只要使用單一程式碼集,就能觸及任何位置、任何裝置的使用者。安裝完成後,PWA 看起來就與其他應用程式一模一樣,特別是:

  • 主畫面、應用程式啟動器、啟動器或開始選單中的圖示都有圖示。
  • 當你在裝置上搜尋應用程式時,系統會顯示這個按鈕。
  • 系統會在獨立視窗中開啟網頁,並與瀏覽器的使用者介面分開開啟。
  • 可存取更高層級的作業系統整合,例如網址處理或標題列自訂。
  • 離線時也能使用。

網路平台

網路是絕佳的平台。 它結合了跨裝置和作業系統的通用性、以使用者為中心的安全性模型,而且沒有任何公司能控管其規格或實作,使得它成為推送軟體的強大平台。

結合網路固有的連結機制,日後還可以搜尋這些內容,隨時隨地與任何人分享您找到的內容。 您每次造訪網站時,就是發布商部署的最新版本,網站體驗可以是暫時或永久性的。

透過單一程式碼集,網頁應用程式可以觸及任何地點,不受裝置限制。對開發人員來說,網路也會為開發人員提供透明且直覺的部署機制。 再也不必經過包裝、沒有額外的內容審查,也不必更新更新。 使用者造訪您的應用程式時,永遠都能取得最新版本。 網頁應用程式現在提供多種新功能和技術,可讓您即使離線,也能與應用程式互動或查看內容,但是幾年前所面臨的挑戰是無法解決的。

平台專屬應用程式

不論是行動版和電腦版,平台專屬應用程式都以豐富且可靠的聞名。而是會顯示在主畫面、座架和工作列上。無論網路連線為何,都能在獨立環境中啟動。他們可以讀取及寫入本機檔案系統中的檔案、存取透過 USB、序列或藍牙連線的硬體,以及與儲存在裝置上的資料互動,例如聯絡人和日曆活動。在平台特定應用程式中,您可以拍照、播放主畫面列出的歌曲,或在其他應用程式中使用媒體控製播放功能。這些應用程式就像執行裝置時一樣。

特定平台的應用程式目前面臨的挑戰是,這類應用程式與多個平台和裝置不相容,因此即使不應該從頭開始建立新應用程式,仍將 Android 應用程式移至 iOS 或 iOS 至 Windows 或 ChromeOS 並不容易。

讓兩種平台/遊戲的使用者受惠

考量平台應用程式和網頁應用程式的能力和觸及率,平台應用程式展現出最佳功能,而網頁應用程式則代表觸及範圍最高。Progressive Web Apps 是平台應用程式功能以及網頁應用程式的觸及範圍。Progressive Web App 包含來自這兩個世界的功能。

網頁

  • 可連結性
  • 預設為可存取
  • 烏比基托斯
  • 部署簡單
  • 更新簡單
  • 所有人都能發布

平台應用程式

  • 支援離線播放功能
  • 高效能
  • 裝置整合
  • 獨立體驗
  • 已安裝圖示
  • 豐富且可靠

採用此技術的好處

美國的影片串流服務 Hulu 打造了漸進式網頁應用程式版本的使用體驗,取代使用者評論不佳且使用效果不佳的電腦版應用程式。正如 2019 年 Google I/O 大會所述,開發人員可以在兩週內透過現有的網頁應用程式研究並實作這個體驗。

在 5 個月內,有 96% 的舊版應用程式使用者採用 PWA,回訪次數增加了 27%,參與度也提升了 5.5%。由於 PWA 位於啟動器和工作列上,因此比起僅存在於分頁中,更容易返回。

JD.ID 是印尼的電子商務平台,為許多產品提供運送服務,他們希望著重於效能和網路獨立的獨立體驗來拓展網路形象。採用這項功能強化功能後,該公司的整體行動轉換率增加了 53%,安裝使用者後的行動裝置轉換率提高了 200%,每日活躍使用者也增加了 26%。

Clipchamp 是瀏覽器內建的電腦版線上影片編輯器,可讓任何人透過影片述說精彩故事。與標準電腦版應用程式使用者相比,採用 PWA 的使用者留存率高出 9%。此外,他們推出 PWA 後的前五個月,每月安裝量增加了 97%。

Corel Corporation 的 Gravit Designer 是一款功能強大的電腦版向量設計工具,每日有數十萬名活躍使用者,要求資訊豐富、方便取用的向量插圖軟體。將 PWA 新增為使用者的安裝選項後,我們發現 PWA 使用者的活躍程度為 24%,且相較於其他平台和安裝選項,PWA 使回訪者增加 31%,而 PWA 使用者購買 Gravit Designer PRO 的機率是其他平台的 2.5 倍。

串流遊戲顛覆者

漸進式網頁應用程式具有強大功能,是提供雲端遊戲和遠端運算等串流平台的產業。自 2021 年起,大多數雲端遊戲供應商都推出漸進式網頁應用程式,讓您可以在任何裝置上透過瀏覽器或 PWA 安裝遊戲主機遊戲:iPhone、Android、iPad、筆記型電腦、Mac 或電腦。Amazon Luna、Microsoft Xbox Cloud Gaming、Facebook Gaming、Google Stadia、Nvidia GeForce Now 和 BlueStacks X 都透過瀏覽器提供雲端遊戲解決方案。多虧了 WebRTC、WebAssembly 和 GamePad API 等網路技術,這些效能和所有平台上的原生都能提供優異的效能體驗。

挑戰

介紹使用網路平台發布 PWA 的優點,也必須瞭解您可能會面臨的挑戰。

跨瀏覽器相容性

Apple 是跨裝置時代的重要公司,擁有 iOS、iPadOS、macOS 和 Safari。雖然 Apple 從來從未公開過 PWA 一詞,但自 2018 年起,Apple 和 iPhone 和 iPad 上的 Safari 就不斷支援 PWA 的安裝與離線功能。

然而,Apple 導入 PWA 規格時,會遺漏其他瀏覽器具備的許多功能,尤其是搭載 Chromium 引擎的瀏覽器。

另一方面,我們也推出 Firefox 及其 Gecko 引擎,實作項目包括更多 Android 上的 PWA 規格,以及較少的電腦版安裝功能。

這些限制包括缺少推播通知、整合 API (例如網路藍牙或 WebNFC),以及協助使用者安裝目前的網站,進而獲得應用程式體驗的安裝宣傳技術。此外,導入的功能也有一些錯誤。

如同所有網站開發一樣,發布 PWA 以及發布主要瀏覽器或作業系統版本更新時,必須在每個平台上測試使用體驗。如果某項功能無法使用,建議您一律提供備用解決方案或替代體驗。

瞭解 PWA

PWA 開發人員可能會遇到業務和使用者方面的認知問題。部分業主對 PWA 並不瞭解,或是對 PWA 的效能和挑戰有所誤解。

發布 PWA 時,下一個挑戰是確保使用者瞭解網站可供安裝,進而帶來應用程式安裝體驗。

部分平台 (例如 iOS 和 iPadOS) 上的安裝挑戰較為明顯,有時使用者體驗設計人員會加入畫面,向使用者說明如何安裝應用程式。

相容性

請記住,漸進式網頁應用程式只是網頁應用程式,因此內容和服務都是在標準規格和通訊協定的情況下運作。因此,從技術層面來說,PWA 能夠在網站執行的任何位置執行,使用者無需使用這個平台與任何「PWA 規格」相容。

然而,談到的 PWA 和相容性問題,我們通常會將重點放在如何跨瀏覽器進行限制,並評估線上互動情形:圖示安裝和離線支援。

除了傳統版網路平台支援之外,接著要檢查是否支援基本應用程式功能,例如圖示安裝和離線功能。

    97 %

    支援離線功能的瀏覽器

    88 %

    網路使用者可以安裝 PWA

資料來源為 StatCounter 且我可以使用的資料。

桌上型和筆記型電腦

在多重要素裝置的世界中,電腦裝置已變得難以掌握。不過,從作業系統的角度來看,這些瀏覽器和商店至少仍與 PWA 安裝和離線功能相容:

Windows 10 和 11
Google Chrome (73 版)、Microsoft Edge (第 79 版)、Microsoft Store
ChromeOS
內建 Chrome 瀏覽器 (第 72 版)、Play 商店 (第 85 版)
macOS、Linux 和 Windows 7 和 8.x
Google Chrome (73 版)、Microsoft Edge

在下列影片中,使用者可透過桌上型電腦從瀏覽器安裝 PWA,然後使用獨立視窗存取應用程式,就像存取其他應用程式一樣。

行動裝置

我們討論了手機和平板電腦,歡迎透過下列瀏覽器和應用程式商店,以離線功能安裝漸進式網頁應用程式:

iOS 和 iPadOS
Safari (自 iOS 11.3 以上版本)、AppStore (自 iOS/iPadOS 14 起,有部分限制)、企業發行的行動裝置設定。
Android
Firefox、Google Chrome、Samsung Internet、Microsoft Edge、Opera、Brave、Huawei 瀏覽器、百度、UCWeb、Play 商店 (已安裝 Google Chrome 第 72 版或與 TWA 相容的瀏覽器)、Galaxy Store、Google Play 管理版 iframe,供企業發布。

在下列影片中,使用者可透過瀏覽器對話方塊和「新增至主畫面」選單,從瀏覽器安裝 PWA。

其他裝置

其他某些小型裝置支援 PWA,例如遊戲主機 (Microsoft Store 的 Xbox) 或 XR 裝置 (Microsoft Hololens、Facebook 的 Oculus 計劃)。不過,其他配備瀏覽器的其他裝置通常都不支援 PWA,包括:

  • 遊戲主機
  • 智慧型電視
  • 智慧手錶
  • Cars

您的 PWA 一律會在所有裝置的瀏覽器中運作,且有特定限制。 這項功能在許多裝置上運作,可讓您建立多裝置歷程,讓使用者能在一部裝置上開始執行工作,並在另一部裝置上完成工作,資料會在不同裝置上同步完成,且使用完全相同的部署應用程式。

資源