javascript - 有没有办法从服务人员打开 mailto: 和 tel: 链接?
问题描述
我正在使用服务工作者处理的推送通知。
使用通知的主要动机是提供“呼叫”或“邮寄至”等操作,但我认为该行为与单击“邮寄:”链接相同。
它在 Windows 上使用 chrome 工作(例如在点击时启动邮件应用程序),但在 android 上使用 chrome 失败,导致一个黑色标签,上面写着 url“mailto:...”。
// Service Worker
self.addEventListener('notificationclick', function(event) {
const { contactRequest } = JSON.parse(event.notification.data);
switch(event.action) {
case 'call':
return clients.openWindow('tel:' + contactRequest.phone);
case 'mail':
return clients.openWindow('mailto:' + contactRequest.email);
}
});
解决方案
更新了更多信息
这似乎是一个以多种方式表现出来的错误 - 声称在这里修复了一个不相关的来源 - https://bugs.chromium.org/p/chromium/issues/detail?id=792990
通知功能本身的选项并不多,您只能使用openWindow
创建或使用窗口来执行附加选项。
MDN 也承认 Chrome 面临的问题 - https://developer.mozilla.org/en-US/docs/Web/API/Clients/openWindow
这里有两种方法
- 打开或关注您的应用程序并添加
hash
哪些服务器作为单击通知的标记 - 这使您可以添加目标_top
或_blank
归功于MDN的伪代码
// Notification click event listener
self.addEventListener('notificationclick', e => {
// Close the notification popout
e.notification.close();
// Get all the Window clients
e.waitUntil(clients.matchAll({ type: 'window' }).then(clientsArr => {
// If a Window tab matching the targeted URL already exists, add a "#mailNotification"
const hadWindowToFocus = clientsArr.some(windowClient => windowClient.url === e.notification.data.url ? (windowClient.navigate(e.notification.data.url+"#mailNotification").then(function(client){client.focus()}), true) : false);
// Add additional code to add a
// Otherwise, open a new tab to the applicable URL and focus it.
if (!hadWindowToFocus) clients.openWindow(e.notification.data.url+"#mailNotification").then(windowClient => windowClient ?
windowClient.navigate(e.notification.data.url+"#mailNotification").then(function(client){client.focus()})
: null);
}));
// Then in your page, you can just use window.onhashChange event
window.onhashchange = weFixChromeLinks
function weFixChromeLinks () {
// ... Create an anchor tag that is formatted to your mailto has a target _top or _blank, hide the link and dispatch a click.
}
- 较早的方法
由于该clients.openWindow
方法不提供以_top
窗口为目标的能力,因此您可能必须设置一个支持 a 的中间页面_top
- 即
// Your intermediate page
window.open('mailto...','_top')
结束语 问题本身很丑- 浏览器应该知道意图,例如:应用程序、邮件程序等 - 似乎 Chrome for android 将其视为另一个 URL 并且惨遭失败。
推荐阅读
- javascript - chart.js 中的单个折线图上是否可以有 2 个数据集?
- hyperledger-fabric - 在 Hyperledger 中加入启用 TLS 的对等通道时出错
- css - 如何使用自定义图标而不是 Fontawesome 图标
- hyperledger-fabric - 多主机 Kafka-zookeeper 超级账本结构网络
- java - 无法从 .java 类文件加载主类
- wordpress - Gutenberg: Dynamic Block - 在编辑器中显示保存的数据
- c - envz_get 和 getenv 是否引用相同的环境变量池?
- android-intent - 无法使用 FLAG_INCLUDE_STOPPED_PACKAGES 标志触发处于停止状态的 BroadcastReceiver
- android - React Native Keyboard 推送标题(Android)
- scala - 如何更改凭据文件的路径(无环境变量)