服务工作者：当他点击通知时将用户重定向到不同的 url

Posted 2023-02-23

【中文标题】服务工作者：当他点击通知时将用户重定向到不同的 url

【英文标题】：Service worker: Redirecting a user to different url when he clicks the notification

【发布时间】：2016-09-13 18:42:23

【问题描述】：

此 sn-p 有助于将应用选项卡置于焦点位置或使用该 URL 打开一个新选项卡。如果选项卡已经打开，是否有办法更改 URL（基于用户单击的通知）？

  event.waitUntil(
  clients.matchAll(
      type: 'window'
  )
  .then(function(windowClients) 
      for (var i = 0; i < windowClients.length; i++) 
          var client = windowClients[i];
          if (url.test(client.url) && 'focus' in client) 
              return client.focus();
          
      
      if (clients.openWindow) 
          return clients.openWindow('/#/chat');
      
  )
  );

【问题讨论】：

我会建议一种不同的架构，您可以通过该架构向客户端发送消息，然后由客户端决定在您需要的任何情况下做什么。 IOW，如果需要集中注意力，client.postMessage('focus')。如果需要打开一个新窗口，client.postMessage('window', url)。如果需要重定向，client.postMessage('redirect', url)

同意！这就是我现在正在做的事情，但我想知道既然我已经有了标签，是否可以从这里开始。

【参考方案1】：

WindowClient.navigate() 方法听起来像你想要的。您应该能够执行以下操作：

// Assume that you want to find the first window that is currently open
// to originalUrl, and navigate that window to navigationUrl.
// If there is no window currently at originalUrl, then open a new window.
event.waitUntil(
  clients.matchAll(type: 'window')
    .then(clients => clients.filter(client => client.url === originalUrl))
    .then(matchingClients => 
      if (matchingClients[0]) 
        return matchingClients[0].navigate(navigationUrl)
                 .then(client => client.focus());
      

      return clients.openWindow(navigationUrl);
    )
);