从服务人员播放声音

Question

有没有办法从服务人员播放音频文件？

我试图使用io.sound库，但它是一个JavaScript的插件，需要窗口，所以这是行不通的。

编辑

至于建议由杰夫我试图打开一个新的窗口，并发布消息到该窗口。这是我的代码：

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" }); 
        }); 
      } 
     }) 
    }); 
} 

此功能现在由event.waitUntil（..）称为内self.addEventListener（ “推”，（事件）=> {...}

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（在promise中）DOMException：不允许打开一个窗口。

我该如何解决这个问题？

Answer 1

Web Notifications API的生活规范确实引用了一个sound property，它可以在显示通知时指定，并且在理论上允许您在显示来自服务人员的通知时播放您选择的声音。

但是，尽管规范引用了这个属性，但截至撰写本文时，it's not supported in any browsers。

最好的办法是将post a message沿着一个由当前服务人员控制的打开的窗口打开，并让窗口响应message事件播放声音。

如果没有控制客户端可用的（例如，因为您的服务人员已被push事件惊醒，你的网站是不是目前在浏览器中打开），那么你就必须的opening a new window选择您notificationclick处理程序中，这是响应用户点击您在push事件处理程序中显示的通知而触发的。然后，您可以将消息发布到该新窗口。