서비스 작업자가 소리내어 재생

Question

서비스 작업자가 오디오 파일을 재생할 수 있습니까?

나는 io.sound 라이브러리를 사용하기 위해 노력하고있어하지만 그것이 작동하지 않도록, 창을 필요로하는 자바 스크립트 플러그인입니다.

나는 새 창을 열고 해당 창에 메시지를 게시하려고 해요 제프에 의해 제안 편집

. 이건 내 코드입니다 :

이 기능은 현재 self.addEventListener ("푸시"(이벤트) => {...}

내부 event.waitUntil (..)에서 호출

function notifyClientToPlaySound() { 
    idbKeyval.get('pageToOpenOnNotification') 
    .then(url => { 

     console.log("notifyClientToPlaySound", url); 

     clients.matchAll({ 
      type: "window" 
      //includeUncontrolled: true 
     }) 
     .then((windowClients) => { 

      console.log("notifyClientToPlaySound - windowClients", windowClients); 
      for (var i = 0; i < windowClients.length; i++) { 
       var client = windowClients[i]; 
       if (client.url === url && "focus" in client) { 
        notify({ event: "push" }); 
        return client.focus(); 
       } 
      } 

      //https://developer.mozilla.org/en-US/docs/Web/API/Clients/openWindow 
      if (clients.openWindow) { 
       return clients.openWindow("/") 
        .then(() => { 
         notify({ event: "push" }); 
        }); 
      } 
     }) 
    }); 
} 

self.addEventListener("push", (event) => { 
    console.log("[serviceWorker] Push message received", event); 

    event.waitUntil(
     idbKeyval.get('fetchNotificationDataUrl') 
     .then(url => { 
      console.log("[serviceWorker] Fetching notification data from -> " + url); 

      return fetch(url, { 
       credentials: "include" 
      }); 
     }) 
     .then(response => { 
      if (response.status !== 200) { 
       // Either show a message to the user explaining the error 
       // or enter a generic message and handle the 
       // onnotificationclick event to direct the user to a web page 
       console.log("[serviceWorker] Looks like there was a problem. Status Code: " + response.status); 
       throw new Error(); 
      } 

      // Examine the text in the response 
      return response.json(); 
     }) 
     .then(data => { 
      if (!data) { 
       console.error("[serviceWorker] The API returned no data. Showing default notification", data); 
       //throw new Error(); 
       showDefaultNotification({ url: "/" }); 
      } 

      notifyClientToPlaySound(); <------ HERE 

      var title = data.Title; 
      var message = data.Message; 
      var icon = data.Icon; 
      var tag = data.Tag; 
      var url = data.Url; 

      return self.registration.showNotification(title, { 
       body: message, 
       icon: icon, 
       tag: tag, 
       data: { 
        url: url 
       }, 
       requireInteraction: true 
      }); 
     }) 
     .catch(error => { 
      console.error("[serviceWorker] Unable to retrieve data", error); 

      var title = "An error occurred"; 
      var message = "We were unable to get the information for this push message"; 
      var icon = "/favicon.ico"; 
      var tag = "notification-error"; 
      return self.registration.showNotification(title, { 
       body: message, 
       icon: icon, 
       tag: tag, 
       data: { 
        url: "/" 
       }, 
       requireInteraction: true 
      }); 
     }) 
    ); 
}); 

그러나 clients.openWindow가 호출 될 때, 그것은 다음과 같은 예외가 반환

Uncau을 ght (약속 있음) DOMException : 창을 열 수 없습니다.

어떻게 해결할 수 있습니까?

Answer 1

웹 알림 API의 실제 사양은 알림을 표시 할 때 지정할 수있는 sound property을 참조하며 이론적으로 서비스 작업자로부터 알림을 표시 할 때 선택한 소리를 재생할 수 있습니다.

그러나이 서신을 작성한 시점에서 사양이이 속성을 참조하지만 it's not supported in any browsers입니다.

가장 좋은 방법은 현재 서비스 담당자가 제어하는 ​​열린 창을 따라 post a message이되고 message 이벤트에 대한 응답으로 창을 소리내어 재생하도록합니다.

가있는 경우 가능한 제어 클라이언트 없습니다 (예를 들어, 서비스 노동자는 push 이벤트에 의해 각성, 귀하의 사이트가 브라우저에서 현재 열려 있지 되었기 때문에) 당신은 당신 notificationclick 핸들러 내부 opening a new window의 옵션이있을 것이다 이는 사용자가 push 이벤트 처리기에 표시 한 알림을 클릭하면 이에 따라 트리거됩니다. 그런 다음 새 창에 메시지를 게시 할 수 있습니다.