Service Worker onClick 이벤트 - 범위가있는 창에서 URL을 여는 방법은 무엇입니까?

Question

나는 푸시 알림 클릭 이벤트를 처리하는 서비스 노동자가 :

self.addEventListener('notificationclick', function (e) { 
    e.notification.close(); 

    e.waitUntil(
     clients.openWindow(e.notification.data.url) 
    ); 

}); 

알림이 데이터에서 URL을 소요하고 새로운 창에 표시되어 있습니다.

코드는 작동하지만 다른 동작이 필요합니다. 사용자가 링크를 클릭하면 서비스 작업자 범위 내에 열려있는 창이 있는지 확인해야합니다. 그렇다면 창에 초점을 맞추고 주어진 URL로 이동해야합니다.

나는 이것을 answer에 확인했지만 정확히 내가 원하는 것은 아니다.

어떻게 할 수 있습니까?

P. 이 코드를 작성했지만 여전히 작동하지 않습니다. 그러나 처음 두 메시지는 로그에 표시됩니다.

self.addEventListener('notificationclick', function (e) { 
    e.notification.close(); 
    var redirectUrl = e.notification.data.redirect_url.toString(); 
    var scopeUrl = e.notification.data.scope_url.toString(); 
    console.log(redirectUrl); 
    console.log(scopeUrl); 

    e.waitUntil(
     clients.matchAll({type: 'window'}).then(function(clients) { 
      for (i = 0; i < clients.length; i++) { 
        console.log(clients[i].url); 
        if (clients[i].url.toString().indexOf(scopeUrl) !== -1) { 
         // Scope url is the part of main url 
         clients[i].navigate(givenUrl); 
         clients[i].focus(); 
         break; 
        } 
      } 
     }) 
    ); 

}); 

Answer 1

올바르게 이해하면 링크 된 코드 대부분이 여기에서 작동합니다.

• 개 이상있는 경우, 어딘가에 그들 중 하나
  • 이동을 선택하고 다른
• 새 창

를 열고 초점

먼저 모든 클라이언트를 검색

오른쪽?

event.waitUntil(
    clients.matchAll({type: 'window'}) 
    .then(clients => { 
     // clients is an array with all the clients 
     if (clients.length > 0) { 
     // if you have multiple clients, decide 
     // choose one of the clients here 
     const someClient = clients[..someindex..] 
     return someClient.navigate(navigationUrl) 
      .then(client => client.focus()); 
     } else { 
     // if you don't have any clients 
     return clients.openWindow(navigationUrl); 
     } 
    }) 
); 

Answer 2

다음은 예상대로 작동하는 코드 조각입니다. scope_url과 함께 redirect_url을 웹 알림에 전달 중입니다. 그 후 scope_url이 sw 위치의 일부인지 확인합니다. 그 후에 만 ​​redirect_url로 이동합니다.

self.addEventListener('notificationclick', function (e) { 
    e.notification.close(); 
    var redirectUrl = e.notification.data.redirect_url; 
    var scopeUrl = e.notification.data.scope_url; 

    e.waitUntil(
     clients.matchAll({includeUncontrolled: true, type: 'window'}).then(function(clients) { 
      for (i = 0; i < clients.length; i++) { 
        if (clients[i].url.indexOf(scopeUrl) !== -1) { 
         // Scope url is the part of main url 
         clients[i].navigate(redirectUrl); 
         clients[i].focus(); 
         break; 
        } 
      } 
     }) 
    ); 

});