html怎么做protocol_handlers协议_html PWA protocol_handlers协议处理【精选】-html教程-PHP中文网

必须通过manifest.json声明protocol_handlers，仅在已安装pwa、https/localhost环境、用户点击链接并授权后生效；protocol需以web+开头，url页面须返回200且被service worker控制，参数通过document.referrer解析。

html怎么做protocol_handlers协议_html pwa protocol_handlers协议处理【精选】

不能用 HTML 或 JavaScript 直接注册 protocol_handlers——必须靠 manifest.json 声明，且仅在已安装的 PWA 中、HTTPS/localhost 环境下、用户主动授权后才生效。

protocol_handlers 必须写在 manifest.json 里

浏览器根本不读 <meta> 或 window.navigator.registerProtocolHandler()（该 API 已被 Chrome/Edge 废弃）。唯一有效路径是：在 manifest.json 中声明 protocol_handlers 数组，并确保该文件通过 <link rel="manifest" href="/manifest.json"> 被正确加载。

protocol_handlers 必须是数组，每个项含 protocol（如 "web+myapp"）和 url（相对路径，如 "launch.html"）
protocol 名强烈建议以 web+ 开头；myapp:// 类非标准前缀在 Chrome 119+ 已被禁用
url 对应的页面必须返回 HTTP 200（不能重定向），且必须被 Service Worker 控制（即在 scope 内、被 cache.addAll() 或 fetch 事件拦截）
服务器需返回 Content-Type: application/manifest+json 响应头，否则 Chrome 会静默忽略整个 manifest

用户授权是硬门槛，拒绝后无法自动重试

即使 manifest 配置完全正确，也必须由用户完成两个动作：① 将 PWA 添加到主屏幕（即“已安装”状态）；② 主动点击一次对应协议链接（如 web+myapp://open?id=123）。此时浏览器才会弹出“是否允许 myapp 处理 web+myapp:// 链接？”提示。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

该提示只出现一次；若用户点“拒绝”，后续再点同协议链接也不会再弹窗
重置方法：Chrome 访问 chrome://settings/handlers → 找到你的 PWA 条目 → 点“清除”或手动启用
开发调试时，先用 npx serve -s -l 5000 启本地 HTTPS 服务（或直接用 https://localhost:5000），再添加到主屏幕
HTTP 环境（非 localhost）下，protocol_handlers 完全不工作

触发后参数不在 URL 里，得从 document.referrer 解析

浏览器不会把 web+myapp://open?id=123#hash 自动拆成 query 或 hash 注入 launch.html。它只会把完整原始链接作为 document.referrer 传过去——前提是 launch.html 是通过协议触发首次加载的（不是用户手动刷新）。

在 launch.html 中尽早执行：const url = new URL(document.referrer); console.log(url.searchParams.get('id'));
若 document.referrer 为空，大概率是页面被重定向过，或未被 Service Worker 控制导致上下文丢失
不要依赖 window.location.href——它通常是 about:blank 或空字符串
如果需要更健壮的传参，可改用 targetURL + launchQueue（需配合 Launch Handler API），但那是另一套机制

常见失败原因：页面没被 SW 控制 or 返回了 302

点击协议链接后跳转失败、打开新标签页、或白屏，90% 是因为 url 指向的页面未满足两个硬性条件：HTTP 状态码必须为 200，且该页面必须被当前激活的 Service Worker 拦截并响应（不能 fallback 到网络）。

检查方式：打开 DevTools → Application → Service Workers → 看 “Controlled pages” 是否包含你的 launch.html
在 Service Worker 的 fetch 事件中加日志，确认该请求是否被拦截；若没拦截，说明 scope 配置太窄或路径不匹配
避免用 index.html 作 url，除非 start_url 明确覆盖它，且 scope 包含根路径
用 Edge 或 Chrome 的 Application → Manifest 工具，直接查看 “Protocol Handlers” 面板是否识别到配置项——不显示就代表 manifest 解析失败