播放来自 Service Worker 的声音

Question

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

我正在尝试使用io.sound库，但它是一个需要window 的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" });
                    });
            }
        })
    });
}

现在从self.addEventListener("push", (event) => { ... }内的event.waitUntil(.. ) 调用此函数

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时，它返回以下异常：

未捕获（承诺中）DOMException：不允许打开窗口。

我该如何解决这个问题？

Answer 1

Web 通知 API 的实时规范确实引用了一个可以在显示通知时指定的sound属性，并且理论上允许您在显示来自 Service Worker 的通知时播放您选择的声音。

然而，虽然规范引用了此属性，但截至撰写本文时，任何浏览器均不支持它。

更新（2019 年 8 月）：似乎已从https://notifications.spec.whatwg.org/#alerting-the-usersound中删除了对

最好的选择是将一条消息发布到由当前服务工作人员控制的打开的窗口，并让该窗口播放声音以响应该message事件。

如果没有可用的受控客户端（例如，因为您的服务工作人员已被事件唤醒push，并且您的站点当前未在浏览器中打开），那么您可以选择在处理程序中打开一个新窗口notificationclick，即响应用户单击push事件处理程序中显示的通知而触发。然后您可以将消息发布到该新窗口。