如果您有对快应用感兴趣，抑或是有读过快应用相关博文，那您应该知道，快应用可以在各种手机设备浏览器（含微信、或其他应用），通过 url 和 deeplink 的方式，拉起快应用；但，在高版本 Chrome，为何无法通过 url 拉起快应用呢？本篇文章就跟大家探讨下这个问题的原因，以及解决办法。
浏览器可以通过 url 拉起 快应用 的原理
在快应用官方文档 URL 跳转配置一节（URL 跳转配置，是指在 H5 页面中可以通过调用接口跳转到应用）中，有介绍，通过 url 拉起 快应用的操作方法。通过所提供的脚本、以及具体调用方法，以及在 chrome://inspect 中跟进的 console 日志，可以得出，通过脚本加载及 api 的调用，在浏览器页面，发起了一个 HTTP 请求，类似如下格式：
查阅 thefatherofsalmon.com 这个域名，虽有被注册，但并未暴露 API，加之在桌面端与移动端的区别，可以大胆踹测，url 拉起快应用的大致原理是：当手机端触发 http://thefatherofsalmon.com 请求，手机系统会对改 GET 请求进行拦截，获取其所携带的参数，然后自动拉起对应的快应用。按照这个推理，您也可以在自己可控的网站，加入一段 js 脚本（如下示例），即可调起指定的快应用：
// 微博快应用
fetch('http://thefatherofsalmon.com/?i=com.sina.weibo.quickapp').then(res => res.json()).then(res => console.log(res))
// 曼妙句子快应用
fetch('http://thefatherofsalmon.com/?i=com.graceful.sentences').then(res => res.json()).then(res => console.log(res))
Chrome 为何无法通过 url 拉起快应用？
当您在手机端，采用 Chrome 浏览器，打开注入脚本的网页，很可能就无法拉起快应用。这是什么原因呢？如果您熟练使用 chrome://inspect ，就很容易查找到原因：Chrome 禁止 https 发起 http 请求，导致上述提及的请求无法发送出去（发生错误，具体如下截图及说明），也就无法拉起快应用。
如上报错，具体相关信息，可以参见 Chromium Blog 文章：No More Mixed Messages About HTTPS：
Today we’re announcing that Chrome will gradually start ensuring that https:// pages can only load secure https:// subresources. In a series of steps outlined below, we’ll start blocking mixed content (insecure http:// subresources on https:// pages) by default. This change will improve user privacy and security on the web, and present a clearer browser security UX to users.
综合如上信息，即能得出结论：https 网页，在 Chrome 版本高于 79 版本，因为限制了混合内容的加载（关于混合内容，可参见文章：What is mixed content?）；从而导致，该类型网页，无法通过 url 拉起快应用；
细心的朋友，可能会提出，那么可否手动将发起的 thefatherofsalmon.com 请求，从 http 协议修改成为 https 呢？从目前的实践来看，尚不能起作用，因为手机端并没对 https://thefatherofsalmon.com 做监听（牵扯到证书相关）。
在 Chrome 如何自动拉起快应用呢？
除了通过 url 拉起快应用，Deeplink 方式也可以拉起；而 JavaScript 又是如此灵活的语言，想在 Web 页面，实现自动拉起快应用，就很容易想到如下方式；相信聪明的开发者如您，在了解了问题的前因，会有更多更优雅的解决方案；如果您感兴趣，欢迎留言分享。
// 判断是 Chrome 浏览器，执行如下代码：
const aNodeDom = document.createElement('a');
aNodeDom.setAttribute('href', 'hap://app/com.sina.weibo.quickapp');
aNodeDom.setAttribute('target', '_self');
aNodeDom.setAttribute('id', 'open-in-quickapp');
if(document.getElementById('open-in-quickapp')) {
document.body.removeChild(document.getElementById('open-in-quickapp'));
}
document.body.appendChild(aNodeDom);
setTimeout(() => {
aNodeDom.click();
}, 100)
关于 deeplink，不太了解的朋友，可以参见 Dive into mobile app deep linking、创建指向应用内容的深层链接等文章。
您可能喜欢的文章
