scheme调起原理与pwa实现

前端花园
142 阅读4分钟

场景是我们开发的pwa应用需要调起其他移动应用的页面，然后可能需要它们再跳回我们的应用。如果是ios左上角直接有返回，安卓可能就需要对方应用调起我们的scheme链接了

Scheme 调用应用的原理

URI Scheme（也称为 URL Scheme 或协议方案）是 URI（Uniform Resource Identifier，统一资源标识符）的最开头部分，例如 http://、mailto:// 或自定义的 myapp://，它用于指定资源的访问协议或处理方式。当系统（如操作系统、浏览器或应用框架）遇到一个 URI 时，会根据 Scheme 来决定如何处理这个资源，包括调用相应的应用来打开它。

基本原理

  1. Scheme 的作用：Scheme 指示了资源的类型和处理协议。例如，http:// 告诉浏览器使用 HTTP 协议从服务器获取网页；tel:// 会调用手机的拨号应用。自定义 Scheme（如 alipay://）则允许第三方应用注册并处理特定链接，实现深层链接（Deep Linking），从而从外部（如网页、短信或另一应用）直接跳转到应用内的特定页面或功能。
  2. 注册与调用过程：
  • 注册：应用在开发时需要在配置文件中声明支持的 Scheme。例如，在 Android 中，通过 AndroidManifest.xml 中的 <intent-filter> 标签指定 android:scheme="myscheme"；在 iOS 中，通过 Info.plist 文件中的 CFBundleURLTypes 注册 Scheme。安装应用后，操作系统会记录这个关联。
  • 调用：当用户点击或系统接收到一个匹配 Scheme 的 URI 时（如通过浏览器、邮件或 NFC），OS 会查询已注册的应用列表，选择匹配的应用启动它，并将 URI 的剩余部分（如路径、查询参数）传递给应用。应用内部通过监听（如 Android 的 Intent 或 iOS 的 openURL 方法）来解析 URI 并执行相应操作，例如导航到特定页面或处理数据。
  • 浏览器中的处理：在 Web 环境中，浏览器会根据 Scheme 决定是否交给 OS 处理。如果是自定义 Scheme 且有注册的应用，浏览器会触发 OS 的应用选择器或直接打开应用；否则，可能显示错误或提示安装。

这个机制广泛用于应用间通信、支付回调、分享链接等场景，但需注意安全风险，如 Scheme 劫持（恶意应用伪装注册相同 Scheme）。

在 PWA 应用中实现 Scheme 调用

Progressive Web App (PWA) 是基于 Web 技术的应用，可以像原生应用一样安装和运行，但它不像原生应用那样直接注册 OS 级 Scheme。PWA 通过浏览器（如 Chrome、Edge）的 Web 标准来实现类似功能，主要依赖 “URL Protocol Handler Registration” 机制，让安装后的 PWA 能够处理自定义协议（Custom URI Scheme）。

实现步骤概述

  1. 前提条件：
  • PWA 必须符合安装标准：包括有效的 manifest.json 文件、服务 worker（Service Worker）和 HTTPS 支持。
    • 浏览器支持：目前主要在 Chromium-based 浏览器（如 Chrome、Edge）中可用，Safari 等可能不支持或有限制。
  1. 在 Manifest.json 中注册 Protocol Handler：
  • 在 PWA 的 manifest.json 文件中添加 "protocol_handlers" 数组，指定要处理的协议、标题和处理 URL 模板。
  • 示例配置：
{
  "protocol_handlers": [
    {
      "protocol": "web+music",
      "title": "Music PWA",
      "url": "/handle?uri=%s"
    }
  ]
}
  • protocol：自定义协议，如 web+music（推荐以 web+ 开头以避免冲突）。
  • title：显示在浏览器提示中的名称。
  • url：当协议被调用时，PWA 导航到的路径，%s 是占位符，会被替换为实际 URI 的剩余部分（如 web+music://play/song?id=123 中的 play/song?id=123）。
  1. 处理逻辑在 PWA 内实现：
  • 在 PWA 的 JavaScript 代码中，监听 load 或其他事件，解析传入的 URI 参数（通过 window.location 或 URLSearchParams）。
    • 示例 JS 处理：
const urlParams = new URLSearchParams(window.location.search);
const uri = urlParams.get('uri');
if (uri) {
  // 解析 uri 并执行相应操作，如导航或数据处理
  console.log('Handling URI:', uri);
}
  • 如果需要动态注册，可以使用 navigator.registerProtocolHandler(protocol, url, title) API，但对于 PWA，通常通过 manifest 静态注册。
  1. 安装与测试：
  • 用户安装 PWA 后，浏览器会提示或自动注册协议处理程序。
  • 测试：从浏览器或外部链接调用自定义 URI（如 <a href="web+music://action">Open</a>），如果 PWA 已安装，它会作为选项出现或直接打开。
  • 注意：协议注册需用户确认，且仅在 PWA 安装后生效。iOS Safari 当前不支持此功能，需考虑 fallback（如重定向到网页）
avatar
文章
阅读
粉丝