從服務人員播放聲音

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事件處理程序中顯示的通知而觸發的。然後，您可以將消息發佈到該新窗口。