从 Web 上安装 PWA 的用户界面因浏览器和平台的不同而异。
安装 PWA 的用户界面因设备和操作系统的组合而异。在 iOS 的 Safari 上,用户界面“添加到主屏幕”会安装 PWA。其他浏览器,包括 Android 上的 Chrome,在浏览器设置菜单中包含应用程序安装命令。在桌面上的 Chrome 和 Edge 中,当用户导航到页面时,如果页面是 PWA,并且浏览器当前未安装该 PWA,URL 地址栏中将显示一个安装图标:
当用户选择该图标时,浏览器会显示一个提示,询问是否要安装 PWA,如果用户接受,PWA 将被安装。
一旦安装,PWA 将像操作系统上的其他应用程序一样运行。例如,在 macOS 上,图标将显示在 Dock 中,并具有与其他应用程序相同的图标选项:
在大多数桌面浏览器上,安装提示位于 URL 栏中。在移动设备上,安装提示通常位于浏览器选项菜单中。无论是哪种浏览器还是操作系统,都需要确认安装。
一旦安装,PWA 的行为就像其他已安装的应用程序一样:单击应用程序图标即可打开 PWA,即使用户处于离线状态也可以打开。
所有现代桌面和移动设备都支持安装。PWA 是否可以由浏览器在操作系统上安装取决于浏览器/操作系统的组合。大多数浏览器直接或在安装扩展程序后支持在所有操作系统(如 ChromeOS、MacOS、Windows、Android、Linux 等)上安装 PWA。
Firefox 需要 PWA 扩展。
对于 PWA 来说,苹果是独特的:在 macOS 上,除了 Safari 之外,可以从任何浏览器安装 PWA。对于 iOS 16.4 之前的版本,情况恰好相反,PWA 只能在 Safari 中安装。在 iOS/iPadOS 16.4 或更高版本上,可以从任何支持的浏览器上安装 PWA。
安装的 PWA 启动时,它可以显示在其自己的独立窗口中(没有完整的浏览器界面),但它仍然在浏览器窗口中运行,即使通常的浏览器界面元素(如地址栏或返回按钮)不可见。应用程序将出现在操作系统保存其他应用程序的位置,位于特定于浏览器的文件夹中。
由浏览器安装的 PWA 仅针对该浏览器。这意味着用于安装 PWA 的浏览器是运行该 PWA 的浏览器。这还意味着你可以使用不同的浏览器安装相同的 PWA,并且这两个应用程序将作为两个不同的实例运行,并且不共享任何数据。
用于安装 PWA 的浏览器将知道 PWA 已安装,但其他浏览器将无法访问安装状态。例如,如果你使用 MS Edge 安装一个 PWA,在访问该站点时,Edge 会提示你打开 PWA,而 Chrome 将继续提示你安装该应用程序。如果你也使用 Chrome 安装 PWA,你将拥有两个副本的 PWA。当打开来自不同浏览器安装的多个 PWA 实例时,实例之间不共享数据。
当你点击 Web 应用的图标时,它会在安装 PWA 的浏览器环境中打开,通常没有浏览器的用户界面,尽管这取决于开发者配置的 Web 应用清单。类似的,卸载 PWA 的方法取决于用于安装它的浏览器。