Как реализовать проигрывание звука на сайте при получении пуш уведомления, на неактивной вкладке?

Question

[midia21]

У firebase есть метод onMessage, который регистрирует функцию, которая срабатывает при получении нового пуша.

let messaging = firebase.messaging();

messaging.onMessage(function (payload) {
            console.log("Message received. ", payload);

            let notificationSound = new Audio("/assets/audio/notification.wav");
            notificationSound.play();
});

В этой функции я регистрирую новый аудиофайл(звук уведомления) и проигрываю его. Все отлично работает, когда страница на которую приходит пуш, активна в браузере. Однако звук не запускается если страница неактивна (вкладка открыта но не находится в фокусе). Думаю это связано с политикой браузеров (тестирую на Chrome). Есть ли обходные пути? Заранее спасибо.

P.S.
Туть https://stackoverflow.com/questions/33196475/playi...
предлагали вынести загрузку аудиофайла вне обработчика, чтобы он заранее загружался, но это тоже не помогло.

Answer 1

[midia21]

Нашел проблему. Оказывается onMessage вызывается, только когда вкладка активна. Для фоновых вкладок нужно использовать setBackgroundMessageHandler. Но у этого метода не связи с DOM и поэтому не получится напрямую запустить аудио. Чтобы решить проблему можно на клиент из севис-воркера послать событие через postMessage, и принять его через

navigator.serviceWorker.addEventListener("message", function (event) {
        notificationSound.play();
});

запустив "динь"

Answer 2

[Сергей Соколов]

Попробуйте заранее загрузить аудио файл. По событию уже проиграйть его:

const notificationSound = new Audio("/assets/audio/notification.wav")
let messaging = firebase.messaging();

messaging.onMessage(function (payload) {
            console.log("Message received. ", payload);
            notificationSound.play();
});

У фоновых вкладок ограничены ресурсы: реже срабатывают таймеры, рендер страницы.