Question

我正在使用由服务人员处理的推送通知。

使用通知的主要动机是提供诸如“呼叫至”或“邮件至”之类的操作，尽管该行为与单击“ mailto：”链接相同。

它可以在Windows上使用chrome（例如，单击即可启动邮件应用），但在android上无法使用chrome，导致黑色标签上写有网址“ 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);
  }
});

Answer 1

已更新其他信息

这似乎是一个以多种方式表现出来的错误-声称已在此处针对不相关的来源进行了修复-https://bugs.chromium.org/p/chromium/issues/detail?id=792990

通知功能本身内部没有太多选项，您只能使用创建或使用窗口执行其他选项的openWindow。

Chrome面临的问题在MDN中也得到认可-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窗口的功能，因此您可能必须设置一个支持_top的中间页-即

// Your intermediate page 
window.open('mailto...','_top')

结束语 问题本身是 ugly -浏览器应该知道意图，例如：应用程序，邮件程序等。-似乎Chrome for android将其视为另一个URL，但不幸失败。

有没有办法打开服务人员的mailto：和tel：链接？

1 个答案: