无需登录 数据私有 本地保存

Launch Handler 演示 - 控制 PWA 启动行为

5
0
0
0
Launch Handler API

Launch Handler API 是 W3C 标准组织定义的一组 Web API,用于控制渐进式 Web 应用(PWA)如何响应启动请求。当用户从外部链接、系统分享菜单或其他来源启动 PWA 时,该 API 允许开发者声明式地定义窗口处理策略,包括聚焦现有窗口、导航到新 URL 或创建新窗口实例。该 API 通过 manifest.json 中的 launch_handler 字段进行配置,是 PWA 实现类原生应用体验的关键技术之一。

PWA(渐进式 Web 应用)

PWA 即 Progressive Web App,是一种使用 Web 技术构建的应用形式,通过 Service Worker、Web App Manifest 等技术实现离线访问、推送通知、桌面安装等原生应用特性。PWA 的核心理念是"渐进增强",即在不支持高级特性的浏览器中仍能作为普通网页正常工作。Launch Handler API 是 PWA 技术栈中的重要组成部分,它解决了 PWA 在多窗口管理方面的体验短板,使 PWA 的启动行为更接近桌面原生应用。

client_mode

client_mode 是 launch_handler 配置中的核心字段,定义了 PWA 收到启动请求时的窗口处理策略。该字段支持四个值:focus-existing 表示聚焦到已打开的 PWA 窗口(不改变 URL),navigate-existing 表示将现有窗口导航到新 URL,navigate-new 表示始终创建新窗口实例,auto 表示交由浏览器自动决定(默认行为,通常等同于 navigate-existing)。开发者应根据应用的使用场景选择合适的模式,并考虑移动端单实例限制对行为的影响。

manifest.json

manifest.json 是 Web App Manifest 规范定义的 JSON 格式配置文件,用于向浏览器声明 PWA 的元数据信息,包括应用名称、图标、主题色、启动 URL、显示模式等。在 Launch Handler 的上下文中,manifest.json 中的 launch_handler 字段用于配置启动行为。该文件通常放置在 Web 应用的根目录下,并在 HTML 中通过 link 标签引用。manifest.json 是 PWA 能够被"安装"到用户设备上的关键配置,浏览器通过解析该文件来确定应用的外观和行为参数。

route_to

route_to 是 launch_handler 配置中的高级字段,提供比 client_mode 更细粒度的窗口路由控制。该字段允许开发者针对不同启动来源设置差异化的处理策略。支持三个值:existing-client 将启动请求路由到现有的 PWA 客户端窗口、new-client 创建全新的 PWA 客户端实例、existing-client-navigate 路由到现有客户端并触发 URL 导航。route_to 通常与 launching_from 字段配合使用,针对特定启动来源(如 share-target 或 navigate)配置独立的路由行为。

launching_from

launching_from 是 route_to 配置中的来源标识字段,用于指定触发启动请求的来源类型。通过该字段,开发者可以为不同的启动来源配置独立的路由策略。常见的来源值包括 navigate(浏览器地址栏导航)、share-target(Web Share Target API 分享接收)等。例如,当用户通过分享目标启动应用时,可能需要使用 existing-client-navigate 模式将内容展示到现有窗口中,而通过普通导航启动时则可以使用 new-client 创建新窗口。这种细粒度控制使 PWA 能够在各种启动场景下提供最优的用户体验。

Service Worker

Service Worker 是运行在浏览器后台的 JavaScript 脚本,独立于网页主线程,能够拦截和处理网络请求、管理缓存、实现离线访问等功能。虽然 Service Worker 与 Launch Handler API 没有直接的配置关系,但它是 PWA 技术栈的核心基础设施。Launch Handler 决定了应用如何启动,而 Service Worker 则决定了应用启动后的离线能力和资源加载策略。两者协同工作,共同构建完整的 PWA 体验。开发者在配置 Launch Handler 时,通常也需要确保 Service Worker 的正确注册和激活。

scope

scope 是 manifest.json 中定义的字段,用于指定 PWA 的作用域范围。scope 决定了哪些 URL 属于该 PWA 的控制范围,只有在 scope 范围内的 URL 触发的启动请求才会被 Launch Handler 拦截和处理。scope 通常设置为 "/" 表示覆盖整个域,也可以设置为特定路径如 "/app/" 来限制作用域。scope 与 start_url 配合使用:start_url 定义应用的入口页面,scope 定义应用的控制边界。在配置 Launch Handler 时,理解 scope 的范围对于正确处理启动请求至关重要。

display: standalone

display 是 manifest.json 中控制 PWA 窗口显示模式的字段。standalone 模式是 PWA 最常用的显示设置,它使应用以独立窗口形式运行,移除了浏览器的地址栏、书签栏等 UI 元素,提供接近原生应用的视觉体验。其他 display 值包括 fullscreen(全屏显示)、minimal-ui(保留部分浏览器控件)和 browser(标准浏览器标签页)。display: standalone 与 Launch Handler 的关系在于:只有当 PWA 以 standalone 模式运行时,Launch Handler 的窗口管理策略才会生效。在 browser 模式下,每次点击链接都会打开新的浏览器标签页,Launch Handler 配置不会被应用。

Web Share Target API

Web Share Target API 是 W3C 定义的 Web API,允许 PWA 将自身注册为系统分享目标,接收来自其他应用的分享数据。当用户在其他应用中点击"分享"并选择 PWA 时,系统会向 PWA 发送包含分享内容的启动请求。Launch Handler API 与 Web Share Target API 紧密配合:share_target 触发的启动请求会经过 Launch Handler 的处理流程,由 client_mode 或 route_to 决定如何处理窗口。在实际开发中,为分享目标配置合适的 route_to 行为尤为重要,确保分享内容能够被正确接收和展示。

渐进增强(Progressive Enhancement)

渐进增强是一种 Web 开发策略,指在确保基础功能在所有浏览器和设备上都能工作的前提下,逐步为支持高级特性的环境添加增强体验。在 Launch Handler 的应用场景中,渐进增强意味着开发者应当始终为不支持 Launch Handler API 的浏览器提供合理的回退行为。例如,即使配置了 focus-existing 模式,当浏览器不支持 Launch Handler 时,用户点击链接仍应能正常打开 PWA 页面,只是不会触发窗口聚焦逻辑。Chrome 98+ 支持该 API,而 Firefox 和 Safari 尚未支持,因此渐进增强策略在此场景下尤为重要。

深层链接(Deep Link)

深层链接是指指向应用内部特定页面或内容的 URL,而非应用的首页。在 PWA 中,深层链接允许用户通过直接 URL 访问应用的某个特定视图。Launch Handler 与深层链接的关系主要体现在 navigate-existing 模式下:当用户点击指向 PWA scope 内某个特定路径的链接时,如果 PWA 窗口已经打开,navigate-existing 模式会将现有窗口导航到该深层链接 URL,而非打开新窗口。这使得 PWA 能够像原生应用一样响应各种入口链接,提供连贯的用户体验。在配置 Launch Handler 时,确保应用能够正确处理不同路径的导航是实现深层链接支持的关键。