Невозможно отобразить push-уведомление/сообщение firebase в фоновом режиме

Я работаю над службой сообщений firebase для отправки push-уведомлений через веб-приложение django на Andriod, IOS и веб-сайт, я ссылаюсь на эту ссылку, мне удалось получить токен, но я не могу отобразить сообщение в фоновом режиме, пожалуйста, найдите js-код в html index page и firebase-messaging-sw для справки (Примечание: я не получаю никаких ошибок, но в то же время я не получаю ни уведомления, ни сообщения! !)

html:

<!-- Getting the tocken -->
<script type="module">
// Import the functions you need from the SDKs you need
import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.0.0/firebase-app.js';

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
  apiKey: "xxxxxxxxxxxxxx",
  authDomain: "xxxxxxxxxxxxxx",
  projectId: "xxxxxxxxxxxx",
  storageBucket: "xxxxxxxxxxxxxxxx",
  messagingSenderId: "xxxxxxxxxxxxxxxxx",
  appId: "xxxxxxxxxxxxxxxxxxxxx",
  measurementId: "xxxxxxxxxxxxxxxxxxx"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);

import { getMessaging, getToken } from 'https://www.gstatic.com/firebasejs/9.0.0/firebase-messaging.js';

// Get registration token. Initially this makes a network call, once retrieved
// subsequent calls to getToken will return from cache.
const messaging = getMessaging();

getToken(messaging, { vapidKey: 'BJRrwDBTJkgQ0j0buwcfLsSxfr5tOxPrOzI5XM7J38n-k9Tzeq8qrY8SPeHyb3LRF49eFEj7lv6BiDFhEVJZn0A' }).then((currentToken) => {
  if (currentToken) {
      console.log(currentToken);
    // Send the token to your server and update the UI if necessary
    // ...
  } else {
    // Show permission request UI
    console.log('No registration token available. Request permission to generate one.');
    // ...
  }
}).catch((err) => {
  console.log('An error occurred while retrieving token. ', err);
  // ...
});

</script>


 <!-- Recieving the message on forground-->
 <script type="module">
import { getMessaging, onMessage } from 'https://www.gstatic.com/firebasejs/9.0.0/firebase-messaging.js';

const messaging = getMessaging();
onMessage(messaging, (payload) => {
  console.log('Message received. ', payload);
  console.log('mes sent');
  // ...
});

</script>

и в firebase-messaging-sw:

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

// Initialize the Firebase app in the service worker by passing in
// your app's Firebase config object.
// https://firebase.google.com/docs/web/setup#config-object
const BikumApp = firebase.initializeApp({
  apiKey: 'xxxxxxxxxxxxxxxxxxxxx"',
  authDomain: 'xxxxxxxxxxxxxxxxxxxxxxxx',
  databaseURL: 'xxxxxxxxxxxxxxxxxxxxxx',
  projectId: 'xxxxxxxxxxxxxxx',
  storageBucket: 'xxxxxxxxxxxxxxxxxx',
  messagingSenderId: 'xxxxxxxxxxxxxxxxxxx',
  appId: "xxxxxxxxxxxxxxxxxxxxxxx",
  measurementId: 'xxxxxxxxxxxxxxxxxxx',
});

// Retrieve an instance of Firebase Messaging so that it can handle background
// messages.
const messaging = firebae.getMessaging(BikumApp)
console.log(messaging);


// const messaging = getMessaging();
onBackgroundMessage(messaging, (payload) => {
  console.log('[firebase-messaging-sw.mjs] Received background message ', payload);
  // Customize notification here
  const notificationTitle = 'Background Message Title';
  const notificationOptions = {
    body: 'Background Message body.',
    icon: '/firebase-logo.png'
  };
  
  registration.showNotification(notificationTitle,
    notificationOptions);
});

Вернуться на верх