@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...
предлагали вынести загрузку аудиофайла вне обработчика, чтобы он заранее загружался, но это тоже не помогло.
  • Вопрос задан
  • 112 просмотров
Решения вопроса 1
@midia21 Автор вопроса
Нашел проблему. Оказывается onMessage вызывается, только когда вкладка активна. Для фоновых вкладок нужно использовать setBackgroundMessageHandler. Но у этого метода не связи с DOM и поэтому не получится напрямую запустить аудио. Чтобы решить проблему можно на клиент из севис-воркера послать событие через postMessage, и принять его через

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


запустив "динь"
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
sergiks
@sergiks Куратор тега JavaScript
♬♬
Попробуйте заранее загрузить аудио файл. По событию уже проиграйть его:
const notificationSound = new Audio("/assets/audio/notification.wav")
let messaging = firebase.messaging();

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

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы