安装和卸载网络应用

本指南介绍了用户如何在设备上安装和卸载 PWA。如果您想了解如何将 Web 应用作为 PWA 安装,请参阅使 PWA 可安装

Web 应用安装历史

浏览器始终允许保存网站的快捷方式,称为“书签”。这些只是网站的链接。

某些操作系统 (OS) 增强了书签功能,允许将书签保存到常用位置,例如主屏幕或任务栏,并使用图标在操作系统的默认浏览器中启动网站。对于许多网站来说,这也只是一个网站链接。如果该网站是渐进式网络应用 (PWA),则将其保存到主屏幕会将 PWA 安装到用户的设备上,并将其完全集成到操作系统中,就像大多数设备上的原生应用程序一样。就像 PWA 可以安装一样,它们也可以卸载。

我们首先介绍前置条件——保存网站链接。

添加网站书签

所有浏览器都具有添加到收藏夹的书签功能。书签或收藏夹是网页的可点击快捷方式。书签允许用户快速访问网站,而无需输入 URL 或以其他方式搜索内容。对于长 URL 和访问非网站主页的常用内容,书签特别有用。

所有浏览器都允许用户查看和管理其书签,包括重命名和删除收藏夹。默认情况下,书签的显示包括已加书签页面的<title>元素的文本内容以及由网站的favicon组成的图标。

浏览器允许保存、编辑、移动、删除以及以其他方式管理书签。书签管理的 UI 因浏览器而异。

添加到主屏幕

智能手机,从 2007 年的 iPhone 开始,增加了“保存到主屏幕”功能。对于常规(非 PWA)网站,此功能类似于书签,但不是将页面的 favicon 和标题添加到书签菜单(浏览器功能)——以这种方式收藏添加图标到操作系统的桌面。

将非 PWA 网站添加到主屏幕不会在设备上安装该网站。相反,它会将开发人员定义的图标添加到主屏幕,单击该图标会在默认浏览器中打开已加书签的链接。

iPhone add to home screen, install prompt, icon, and delete functionality.

如果添加到主屏幕的网站是 PWA,则该 PWA 将安装在设备上。

从主屏幕删除图标会删除书签。删除确认会提供有关删除图标是否会删除书签或整个应用程序的信息。

安装和卸载 PWA

虽然安装 PWA 只需点击几下,但根据 Web 应用程序的功能,安装 PWA 的结果通常远不止创建指向互联网上页面的链接;安装 PWA 会更深入地将 Web 应用程序集成到用户的设备中。

根据 PWA、设备以及操作系统和浏览器的功能,安装 PWA 可能会启用类似本机的功能,例如为应用程序提供自己的独立窗口或将其注册为文件处理程序。这也意味着卸载 PWA(也只需要点击几下)不仅仅是删除 PWA 的图标。

安装 PWA

从 Web 安装 PWA 的 UI 因浏览器和平台而异。

安装 PWA 的用户界面因设备和操作系统的组合而异。“添加到主屏幕”用户界面在 iOS 上的 Safari 中安装 PWA。其他浏览器,包括 Android 版 Chrome,都将应用程序安装命令包含在浏览器设置菜单中。在桌面的 Chrome 和 Edge 中,当用户导航到页面时,如果该页面是 PWA 并且浏览器当前未安装该 PWA,则 URL 栏中将显示安装图标。

PWA install prompt in URL bar

当用户选择该图标时,浏览器会显示一个提示,询问他们是否要安装 PWA,如果他们接受,则会安装 PWA。

PWA installation confirmation prompt

安装后,PWA 的行为就像安装在操作系统上的其他应用程序一样。例如,在 macOS 上,该图标将显示在停靠栏中,并且具有与其他应用程序相同的图标选项。

PWA icon in the doc on MacOS

在大多数桌面浏览器上,安装提示位于 URL 栏中。在移动设备上,安装提示通常位于浏览器选项菜单中。无论浏览器或操作系统如何,都需要确认安装。

PWA installation on Chrome for Android, with confirmation, home screen icon, and offline experience.

安装后,PWA 的行为就像其他已安装的应用程序一样:点击应用程序图标会打开 PWA,即使用户处于离线状态。

所有现代桌面和移动设备都支持安装。浏览器是否可以在操作系统上安装 PWA 因浏览器/操作系统的组合而异。大多数浏览器都支持在所有操作系统(ChromeOS、macOS、Windows、Android、Linux 等)上直接安装 PWA,或者在安装扩展程序时安装 PWA。

Firefox 需要PWA 扩展程序

在 macOS 14(Sonoma)之前,可以从任何浏览器( Safari 外)在 macOS 上安装 PWA。对于 iOS 16.4 之前的版本,情况正好相反,其中 PWA 只能在 Safari 中安装。可以在 macOS 14.0 或更高版本以及 iOS/iPadOS 16.4 或更高版本中的任何支持浏览器中安装 PWA。

启动已安装的 PWA 时,它可以在自己的独立窗口(没有完整的浏览器 UI)中显示,但它仍然有效地在浏览器窗口中运行,即使通常的浏览器 UI 元素(例如地址栏或后退按钮)不可见。该应用程序将在操作系统保存其他应用程序的位置找到,位于浏览器特定的文件夹中。

通过浏览器安装的 PWA 仍然特定于此浏览器。这意味着用于安装 PWA 的浏览器是用于运行该 PWA 的浏览器。这也意味着您可以从不同的浏览器安装相同的 PWA,并且这两个应用程序将表现为两个不同的实例,并且不会共享任何数据。

用于安装 PWA 的浏览器会知道 PWA 已安装,但其他浏览器将无法访问已安装状态。例如,如果您使用 MS Edge 安装 PWA,则 Edge 会在您访问该网站时提示您打开 PWA,而 Chrome 将继续提示您安装该应用程序。如果您也使用 Chrome 安装 PWA,则您将有两个 PWA 副本。当打开 PWA 的多个实例时,数据不会在从不同浏览器安装的实例之间共享。

当您点击 Web 应用的图标时,它会在安装 PWA 的浏览器环境中打开,通常没有浏览器的 UI,但这取决于开发人员配置Web 应用清单的方式。类似地,用于卸载 PWA 的方法取决于用于安装它的浏览器。

卸载

在大多数移动操作系统上,卸载 PWA 的方式与卸载其他应用程序相同。在某些移动操作系统上,PWA 会显示在从应用商店下载的应用程序进行管理并可以卸载的相同控制面板中。

在 iOS 上,从 Safari 安装的 PWA 会列在“App 库”屏幕中并可搜索,但不会与“设置”下的其他已安装应用程序一起列出。在 iOS 上,长按图标会显示删除书签的 UI;从主屏幕删除图标会删除 PWA。

在某些桌面操作系统上,可以直接在打开的 PWA 中卸载 PWA。要卸载,请打开 PWA。在打开的应用程序的右上角,将有一个必须展开才能查看更多工具的图标。根据用于安装 PWA 的浏览器,将会有一个卸载 PWA 的链接,或者一个设置链接,该链接会打开浏览器的设置页面并显示卸载链接。单击下拉菜单中的卸载选项(如果有),或在浏览器选项卡中导航到应用程序设置,然后单击卸载。

App settings in MS Edge with an uninstall link

在 Edge 中选择打开的下拉菜单中的应用程序设置,打开了 MS Edge 浏览器edge://apps选项卡。在那里,我们提供了已安装应用程序的列表以及每个应用程序的选项,包括🗑️卸载。确认卸载。就是这样!

在 Edge 中,已安装的 PWA 会列出,并且可以通过访问edge://apps在您的 Edge 浏览器中进行管理。在 Chrome 中,可以通过访问chrome://apps在您的 Chrome 浏览器中查看和管理 Google 应用和已安装的 PWA 列表。

另请参阅