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

Posted 2023-02-24

【中文标题】有没有办法从服务人员打开 mailto: 和 tel: 链接？

【英文标题】：Is there a way to open mailto: and tel: links from a service worker?

【发布时间】：2020-06-29 09:32:59

【问题描述】：

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

使用通知的主要动机是提供“呼叫”或“邮寄至”等操作，但我认为该行为与单击“邮寄：”链接相同。

它在 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);
  
);

【问题讨论】：

不应该是mailto: 没有斜线吗？

原始代码没有斜杠。我在某个地方看到了他们并试了一下。没注意到我用斜杠写了 sn-p，但都不起作用。

【参考方案1】：

更新了更多信息

这似乎是一个以多种方式表现出来的错误 - 声称已在此处修复了一个不相关的来源 - 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 窗口的能力，您可能需要设置一个支持_top 的中间页面 - 即

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

结束语 问题本身是丑陋的 - 浏览器应该知道意图，例如：应用程序、邮件程序等 - 似乎 Chrome for android 将其视为另一个 URL 并且惨遭失败。

【讨论】：

正如我在 cmets 中所说，我使用的是 mailto: 从一开始就没有斜线（我将更新问题，以免造成更多混乱）。创建一个仅调用 window.open 的页面是我的选择之一，后来被丢弃了，因为它是一个丑陋的解决方法。

并没有真正解决我的问题，但如果没有办法像我想要的那样做，那就没有什么可做的了。感谢您的帮助。

感谢您的赏金让我开心:)