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

URL 协议处理演示 - 将 PWA 注册为 URL 处理器

5
0
0
0

术语表

以下术语与 URL 协议处理演示工具及 PWA 开发密切相关:

PWA(Progressive Web App)

渐进式 Web 应用,是一种使用 Web 技术构建的应用程序,具有原生应用的用户体验特征。PWA 通过 Service Worker 实现离线能力,通过 Web App Manifest 支持安装到设备桌面,并可以访问操作系统级别的功能,如推送通知和 URL 协议处理。PWA 的核心理念是渐进增强,即在不支持高级功能的浏览器中仍能提供基本的 Web 体验。

Protocol Handlers

协议处理器,是 PWA 的一项高级功能,允许 PWA 注册处理特定的 URL 协议。通过在 manifest.json 中配置 protocol_handlers 字段,PWA 可以声明自己能够处理哪些协议(如 web+myapp)。当用户点击这些协议的链接时,操作系统会自动唤起对应的 PWA 来处理请求,实现类似原生应用的协议响应能力。

manifest.json

Web 应用清单文件,是 PWA 的核心配置文件。它以 JSON 格式定义了应用的元数据信息,包括应用名称、图标、启动 URL、显示模式、主题颜色等。对于 Protocol Handlers 功能,manifest.json 中的 protocol_handlers 字段用于声明 PWA 可以处理的 URL 协议列表。浏览器在安装 PWA 时会读取该文件并注册相应的协议处理程序。

protocol_handlers 字段

manifest.json 中的协议处理器配置字段,是一个数组类型,每个元素包含 protocol(协议名称)和 url(处理 URL 模板)两个属性。protocol 必须使用 web+ 前缀(自定义协议)或系统预设协议名称。url 中的 %s 占位符会被替换为经过 URI 编码的完整协议 URL。

registerProtocolHandler API

JavaScript 运行时 API,允许 Web 应用在运行时动态注册协议处理器。与 manifest.json 中的静态声明不同,registerProtocolHandler 需要用户手势触发(如点击按钮),注册后对所有该浏览器的访问生效(不限于 PWA)。该 API 是 manifest protocol_handlers 的补充方案,两者可以配合使用。

URI 编码

URL 编码,是将 URL 中的特殊字符转换为百分号编码格式的过程。在 Protocol Handlers 的上下文中,当用户点击协议链接时,原始 URL(如 web+myapp:path/data?id=1)会经过 encodeURIComponent() 编码后替换到处理模板的 %s 位置。编码后的 URL 为 web+myapp%3Apath%2Fdata%3Fid%3D1,其中 : 变为 %3A/ 变为 %2F? 变为 %3F= 变为 %3D

decodeURIComponent()

JavaScript 内置函数,用于将经过 URI 编码的字符串还原为原始格式。在 PWA 处理协议 URL 时,首先从 URL 查询参数中获取编码后的字符串,然后使用 decodeURIComponent() 还原为原始的协议 URL(如将 web+myapp%3Apath%2Fdata 还原为 web+myapp:path/data),以便进行后续的解析和处理。

Service Worker

服务工作者,是 PWA 实现离线能力和高级功能的关键技术。它是一个在浏览器后台运行的 JavaScript 脚本,可以拦截和处理网络请求、管理缓存、推送通知等。对于 Protocol Handlers,Service Worker 虽然不直接参与协议处理,但它是 PWA 架构的核心组成部分,确保应用在各种网络环境下都能正常工作。

web+ 前缀

Web 应用自定义协议的命名空间前缀。根据规范,Web 应用只能注册使用 web+ 开头的自定义协议(如 web+myappweb+notes),不能直接注册系统级协议(如 myapp:)。这个限制是为了避免与操作系统注册的原生协议冲突,确保 Web 应用的协议处理不会干扰系统功能。

HTTPS

超文本传输安全协议,是 HTTP 的加密版本。PWA 的所有高级功能(包括 Protocol Handlers)都要求在 HTTPS 环境下运行,这是为了确保数据传输的安全性和防止中间人攻击。开发者需要确保 PWA 应用部署在有效的 HTTPS 服务器上,本地开发环境可以使用 localhost 进行测试。