Лучший подход к звукам уведомлений в веб-приложениях

#java #laravel #vue.js #google-chrome #mozilla

#java #laravel #vue.js #google-chrome #mozilla

Вопрос:

У меня есть система доставки, которую я создал с помощью Laravel Vue.Js и все работает нормально, но я сталкиваюсь с некоторыми проблемами со звуками уведомлений.

Когда клиент делает заказ на своем мобильном телефоне или ПК, мне нужно показать администратору ресторана звуковое оповещение с настраиваемым звуком.

Но когда я работаю с Chrome или Mozilla, иногда мое уведомление не отображается, а пользовательский звук воспроизводится только в том случае, если администратор остается на веб-странице, но не на другой вкладке или свернут.

Я хочу сделать этот процесс на 100% таким, чтобы звук и уведомление всегда отображались.

Когда я вижу программное обеспечение другого конкурента, я вижу, что у них есть небольшое настольное приложение Java только для этого. Я могу сделать что-то подобное с Electron?

Но я понятия не имею, с чего начать создавать что-то подобное или имя называется.

Вот мой код для уведомлений в моем веб-приложении, я использую FCM:

  const messaging = firebase.messaging();
        navigator.serviceWorker.register("{{url('firebase/sw-js')}}")
            .then((registration) => {
                messaging.useServiceWorker(registration);
                messaging.requestPermission()
                    .then(function() {
                        console.log('Notification permission granted.');
                        getRegToken();

                    })
                    .catch(function(err) {
                        console.log('Unable to get permission to notify.', err);
                    });

                var audio = new Audio('urltosound.mp3');
                messaging.onMessage((payload) => {
                    console.log("Message received. ", payload);
                    notificationTitle = payload.data.title;
                    notificationOptions = {
                        body: payload.data.body,
                        icon: payload.data.icon,
                        image: payload.data.image,
                        requireInteraction: true,
                    };
                    var notification = new Notification(notificationTitle, notificationOptions);
                    notification.onshow = function() {
                        audio.play();
                        audio.loop = true;
                    };
                    notification.onclose = function() {
                        audio.pause();
                        audio.currentTime = 0;
                    };
                    notification.onclick = function() {
                        audio.pause();
                        audio.currentTime = 0;
                        // window.location.href = '/administrativo/orders/'   payload.data.orderid;
                        window.open('/administrativo/orders/'   payload.data.orderid, '_blank');
                    };
                    notification.addEventListener('close', () => {
                        audio.pause();
                        audio.currentTime = 0;
                    });
                });
            });
  

Это работает, но когда мы играем с уведомлением и настраиваемым звуком в браузере, я не очень уверен, что это всегда будет воспроизводиться и отображаться, и этого не может быть.

Комментарии:

1. Почему вы отметили эту Java? Вы пытаетесь создать этот звук в браузере (например, с помощью Javascript , а не Java), или это какое-то приложение на основе Java?

2. У меня есть веб-приложение, и я пытаюсь воспроизвести этот звук с помощью простого javascript. Я обновлю свой ответ с помощью кода. Я говорю о Java, потому что я могу использовать его для настольных приложений, и я думаю, что в настольном приложении звук будет воспроизводиться на 100%, или я ошибаюсь?