支持渐进式 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] 给我们留言。