支持漸進式 Web 應用的前 10 大瀏覽器(2022 年更新)

已發表: 2022-06-28

Progressive Web Apps 最重要的功能之一是它們是自適應的,這意味著它們總是在屏幕尺寸和瀏覽器功能方面提供最佳體驗。 然而,了解每個瀏覽器的功能以及與漸進式 Web 應用 (PWA) 功能的兼容性仍然是有益的。 以下列出了最流行的PWA 支持的瀏覽器及其兼容性。 這一切都總結在下表​​中。 考慮到屏幕類型和操作系統,選擇一個吸引您的瀏覽器並檢查其與各種功能的兼容性。

內容

PWA 支持的瀏覽器

由於最近流行的這些應用程序,領先的 Web 瀏覽器提供商在以後的版本中添加了功能改進以支持 PWA。 下面列出的瀏覽器和版本是兼容的。

  • 桌面瀏覽器(全面支持): Chrome、Firefox、Opera、Edge、Safari
  • 桌面瀏覽器(部分支持/過時版本): QQ瀏覽器、百度瀏覽器
  • 手機瀏覽器(全面支持): Chrome、Firefox、Safari、UC瀏覽器、三星互聯網、Mint瀏覽器、微信
  • 手機瀏覽器(部分支持/過時版本): QQ瀏覽器、安卓瀏覽器、Opera Mobile
pwa 支持的瀏覽器
PWA 瀏覽器支持概述
鉻合金Chrome 可能是最流行的瀏覽器(Apple 設備除外),但它並不是在各個方面都最好,也不是功能最多。 有些功能在 Chrome 上不可用,但其他瀏覽器(如 Firefox、Opera 或 Safari)具有這些功能。 這並不是說 Chrome 不是一個好程序,但您應該知道還有更好的選擇。

對於移動設備:在 Chrome 中,支持 PWA 的站點的地址欄中會出現一個按鈕,這與 Edge 中的非常相似。

對於桌面設備:在 Chrome 中,對於完全支持 PWA 功能的網站,您會在 Chrome 主菜單中看到安裝應用選項。 選擇該選項後,應用程序圖標會出現在您的主屏幕上。 (請注意,對於沒有 PWA 功能的區域,您可以選擇添加到主屏幕。)長按選項仍然包括卸載,但其下方是站點設置,該設置不適用於商店安裝的應用程序。
火狐Firefox 是一個開源項目,開創了多種網絡功能,其背後的公司一直是在線隱私的堅定支持者。 它還以大量可用的擴展而聞名。

儘管 Firefox 支持多個 PWA API,但它無法將它們安裝為具有類似應用程序體驗的獨立系統應用程序。

Android 版本的 Firefox 支持 PWA,而桌面版本不支持。 另一方面,Mozilla 試圖通過站點特定瀏覽器提供支持。

在 Android 設備中:在 Firefox 中,為 PWA 站點提供了一個簡單的安裝選項。 點擊此選項後,將出現“添加到屏幕”對話框。 一個小的橙色 Firefox 標誌出現在 Firefox 創建的 PWA 的主屏幕圖標上的主應用程序徽標的右下角。 為了獲得更真實的應用體驗,與在 Chrome 中製作的體驗不同,您不會看到“站點設置”選項。
蘋果瀏覽器對於桌面設備:在 macOS 上安裝 PWA 與在 Windows 上安裝相同,只是默認的 Safari 無法將網站設為 PWA。 在 Launchpad 中,您的新程序可見,但不在 Applications Finder 文件夾中。

對於移動設備:在 iOS 和 iPadOS 中,Apple 只允許 Safari 生成 PWA; 第三方瀏覽器除外。 與其他啟用 PWA 的瀏覽器不同,Safari 不使用術語安裝和應用程序。 要將一個添加到您的 iOS 或 iPad 的主屏幕,請轉到支持 PWA 的站點,點擊頁面底部的共享向上箭頭,然後選擇添加到主屏幕。 您可以對任何網站執行此操作,但您不會獲得真正 PWA 提供的離線功能。
邊緣在 Microsoft 的桌面操作系統上安裝 PWA 最容易使用默認的 Windows 網絡瀏覽器 Edge。

這是因為它將應用程序添加到您的“開始”菜單的方式與您安裝傳統方法的任何其他應用程序相同(使用下載的程序安裝程序或從 Microsoft Store 應用程序)。
歌劇Opera 於 1995 年發布,使其成為最古老的網絡瀏覽器之一。 Opera 的專用用戶群之所以增長,是因為它能夠集成廣泛的功能,否則這些功能將僅限於擴展程序和獨立應用程序。

Opera 32 for Android 現在可以使用 PWA - 添加到主屏幕兼容性。 您會發現一些專門用於彌合原生應用程序和“移動網絡”之間差距的功能,以及一系列錯誤修復、穩定性增強和更新的 Chromium 引擎,以實現最佳兼容性和安全性(或者,至少,在移動設備上查看的網頁)。
QQ瀏覽器騰訊瀏覽器是 QQ 瀏覽器在 2000 年首次發佈時的名稱。它使用 WebKit 和 Trident 兩個引擎這一事實使這款瀏覽器與眾不同。

過去它曾經支持 PWA,但對於新版本則不支持。
百度瀏覽器百度瀏覽器是一款適用於 Windows 和 Android 的免費網絡瀏覽器,無需加密或易於解密的加密即可將個人用戶數據發送到百度服務器。

它也是低端 Android 設備資源上最輕的瀏覽器,並且容易在軟件更新期間通過中間人攻擊執行任意代碼。
UC瀏覽器UC Browser 是一款主要為移動設備設計的跨平台網絡瀏覽器。 它以其最小的應用程序大小和數據壓縮技術而聞名,這使其在新興市場很受歡迎,在這些市場中,用戶的手機設備內存較少且互聯網速度較慢。

雲加速、多文件格式下載、HTML5 Web 應用程序和云同步功能以及“快速下載”功能,即一次下載多個文件的功能,是瀏覽器的其他功能之一。
三星互聯網這是每台三星手機上的默認和預裝瀏覽器。 它基於運行 Chrome 和 Microsoft Edge 的 Chromium 項目。

三星智能手機提供了標準 Android 體驗的替代方案。 如果您訪問 PWA 網站,您的瀏覽器將顯示一個徽章。 如果您經常使用 Google Sheets 或任何其他 Web App,瀏覽器將為您提供最出色的 Web App 體驗。
薄荷瀏覽器適用於 Android 手機的最重要的網絡瀏覽器之一是 Mint Browser。 您可以在一個緊湊的盒子中獲得極快的速度、隱私和安全性。 當您重視用戶體驗而不是高端技術時,10 MB 的應用程序就是救命稻草。

Mint Browser 擁有多種安全機制,以確保安全瀏覽,並為所有用戶提供世界一流的安全服務和商品。 為了進一步加強用戶對與小米共享數據的控制,當前的升級為所有用戶提供了一個選項,可以在隱身模式下打開/關閉聚合數據收集。
微信微信每月用戶群超過 10 億,是中國最受歡迎的消息傳遞程序。 雖然它最初是一個聊天服務,但它已經演變成一個應用程序,可以讓你付款、叫出租車,甚至預訂航班。

但是,如果您不住在中國,則不太可能使用過它。

PWA 不支持的瀏覽器

還有一些特定的瀏覽器不主動支持 Angular 6 或 PWA 所需的自定義元素。

  • Microsoft Edge 當前強制 PWA 在其應用商店中可用,以便在此瀏覽器上受支持。
  • 在桌面上,Safari 和 Firefox 不支持 PWA 安裝。 它們支持離線功能,但體驗將始終從瀏覽器用戶界面開始。 它可能會全屏顯示,但絕不會是桌面上的獨立窗口。

支持用戶體驗的核心 PWA 功能

  1. 後台同步

此功能會定期刷新網站上的數據。 用戶將始終可以訪問最新信息。

  1. 網絡推送通知
推送通知

服務工作者在後台執行的能力允許這種能力。 用戶可以通過點擊主屏幕上的提醒來訪問該網站。

  1. 離線模式
tigren pwa 離線工作

一旦安裝在瀏覽器中,離線可訪問性會處理應用程序文件的緩存,攔截網絡請求,然後根據網絡是否可用採取適當的措施。

此功能允許在沒有連接的情況下訪問應用程序,並提供更好的用戶體驗。 即使互聯網連接可用,也不需要從 Web 服務器加載特定文件,因為它們已經保存在本地。

  1. 添加到主屏幕
pwa 用法

此 PWA 功能可以將網站安裝在移動設備上。 它會在屏幕上生成一個快捷方式,以便用戶只需觸摸圖標徽章而不是再次輸入鏈接即可快速訪問該站點。 此功能可在所有瀏覽器中訪問。

  1. 主屏幕/啟動屏幕

PWA 的另一個獨特之處在於,儘管在瀏覽器中運行,但它們可以直接放在用戶的主屏幕上,並提供身臨其境的全屏體驗。

除 iOS 外,所有瀏覽器都啟用了此功能,這有助於減少等待網站加載時的焦慮。

  1. 地理位置

Geolocation API 可用於訪問有關應用程序用戶地理位置的信息,從而可以找到他的位置(在用戶同意的情況下)。 它還可以讓您密切關注用戶並在他們的位置發生變化時收到通知。

  1. 視頻和圖像捕捉

如今,“媒體捕獲 API”讓 Web 應用程序可以直接訪問來自設備(相機和麥克風)的音頻和視頻輸入。 Web App 允許您閱讀和管理這些提要。 因此,您可以在不離開瀏覽器的情況下捕捉圖片或錄製視頻。

結論

世界上幾乎每個瀏覽器系統都以某種方式支持 PWA。 雖然不完全支持 iOS 上的 PWA,但瀏覽器開始打破障礙並允許一些 PWA 功能在 Apple 設備上運行。

這可能暗示全球的瀏覽器正在考慮 PWA 與原生應用程序具有相同的潛力,並開始提供更令人難以置信的支持來改善用戶體驗。

如果您即將為您的公司建立一個 PWA 網站並正在尋找合法的 PWA Web 開發機構,那麼 Tigren 是您的最佳選擇。

我們已經建立了成功的 PWA 項目,可以滿足許多企業的需求。 我們的團隊致力於為客戶提供最好的結果。 欲了解更多信息,請在[email protected] 給我們留言。