Firebase Web JS, получать уведомления в фоновом режиме, а затем обрабатывать их на своей веб-странице

ProgramBox

Firebase Web JS, получать уведомления в фоновом режиме, а затем обрабатывать их на своей веб-странице

Post author:admin
Запись опубликована:8 марта, 2023
Post category:Вопросы по программированию

#javascript #jquery #firebase #web #firebase-cloud-messaging

#javascript #jquery #firebase #веб #firebase-облако-обмен сообщениями

Вопрос:

Я работаю над firebase cloud messaging.

Сценарий: когда мой браузер работает в фоновом режиме, и я получаю уведомление через Service Worker, он показывает мне уведомление в обработчике браузера следующим образом

Теперь, если я нажму на уведомление или открою браузер, я не смогу получить информацию об этом уведомлении на веб-странице,

ЧЕГО Я ХОЧУ

Я хочу, чтобы, когда пользователь нажимает на уведомление или открывает браузер, оно должно вызывать уведомление через какую-либо библиотеку, например TOASTR JS, на моей веб-странице, чтобы пользователь мог взаимодействовать с ним, чтобы перейти на нужную страницу уведомлений или все, что я хочу сделать здесь…

ФАЙЛ Service Worker

 importScripts('https://www.gstatic.com/firebasejs/7.22.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/7.22.0/firebase-messaging.js');

// Initialize Firebase
var firebaseConfig = {
    apiKey: "AIzaSyBvOpTvMo_vxMi1l3EEcd8UbbQPeW2Ktdg",
    authDomain: "educore-portal.firebaseapp.com",
    databaseURL: "https://educore-portal.firebaseio.com",
    projectId: "educore-portal",
    storageBucket: "educore-portal.appspot.com",
    messagingSenderId: "1038865124281",
    appId: "1:1038865124281:web:26a7ae36c7819a170f8468",
    measurementId: "G-N8PGZHM0P5"
};
firebase.initializeApp(firebaseConfig);
const messaging = firebase.messaging();


// If you would like to customize notifications that are received in the
// background (Web app is closed or not in browser focus) then you should
// implement this optional method.
// [START background_handler]
messaging.setBackgroundMessageHandler(function (payload) {
    console.log('[firebase-messaging-sw.js] Received background message ', payload);
    // Customize notification here
    const notificationTitle = 'Background Message Title';
    const notificationOptions = {
        body: 'Background Message body.',
        icon: '/firebase-logo.png'
    };

    return self.registration.showNotification(notificationTitle,
        notificationOptions);
});
// [END background_handler]

messaging.onBackgroundMessage((payload) => {
    console.log('Message received.onBackgroundMessage ', payload);
});

ИНИЦИАЛИЗАЦИЯ ФУНКЦИИ FIREBASE

 function initFirebase() {
    var firebaseConfig = {
        apiKey: "AIzaSyBvOpTvMo_vxMi1l3EEcd8UbbQPeW2Ktdg",
        authDomain: "educore-portal.firebaseapp.com",
        databaseURL: "https://educore-portal.firebaseio.com",
        projectId: "educore-portal",
        storageBucket: "educore-portal.appspot.com",
        messagingSenderId: "1038865124281",
        appId: "1:1038865124281:web:26a7ae36c7819a170f8468",
        measurementId: "G-N8PGZHM0P5"
    };
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    const messaging = firebase.messaging();
    messaging.usePublicVapidKey("BJ3u-j-0W2m1it06nryDvW8dV9X7uzl6i9la_lyEKPLYkmZHVxqGpCwF8l-vXCHx6sAcOa3O2WGnVdAsVbA2-Rc");
    // Get Instance ID token. Initially this makes a network call, once retrieved
    // subsequent calls to getToken will return from cache.
    messaging.getToken().then((currentToken) => {
        if (currentToken) {
            console.log('currentToken', currentToken);
        } else {
            // Show permission request.
            console.log('No Instance ID token available. Request permission to generate one.');
        }
    }).catch((err) => {
        console.log('An error occurred while retrieving token. ', err);
    });


    // Handle incoming messages. Called when:
    // - a message is received while the app has focus
    // - the user clicks on an app notification created by a service worker
    //   `messaging.setBackgroundMessageHandler` handler.
    messaging.onMessage((payload) => {
        console.log('Message received. ', payload);
        toastr["info"](payload.notification.body, payload.notification.title);
        // ...
    });

}

Ответ №1:

Я пытался найти способ вызвать уведомление внутри моей веб-страницы, пока оно получено, когда браузер работает в фоновом режиме. Но я не нашел никакого решения, связанного с Firebase.

Итак, я думаю о том, чтобы использовать прослушиватель событий изменения видимости документа

Это базовая структура того, как ее использовать. Он будет вызываться каждый раз, когда изменяется состояние видимости вкладки. Поэтому всякий раз, когда пользователь возвращается на мою веб-страницу, я вызываю функцию для проверки наличия новых сообщений, если они найдены, а затем запускаю другие функции для отображения уведомлений или обновления сообщений чата и т. Д….

Надеюсь, это поможет вам, ребята…

 document.addEventListener("visibilitychange", function() {
  console.log( document.visibilityState );
  //Run code snippet and switch the tab/browser and come back again
  //hidden
  //visible
});