How to use firebase to implement push notification in a pwa



  • Hello, i tried to implement push notification using firebase but after some errors my push notification dont come to pwa , or come but just when chrome is open, not in background, the files that i change:
    quasar.conf.js > build

          chainWebpack(chain) {
            if (ctx.mode.pwa) {
              chain
                .plugin('copy-static-files')
                .use(require('copy-webpack-plugin'), [
                  [{
                    from: 'src-pwa/firebase-messaging-sw.js',
                    to: '',
                  }]
                ])
            }
          }
    

    firebase-messaging-sw.js
    firebaseConfig are my credentials

    importScripts('https://www.gstatic.com/firebasejs/7.6.2/firebase-app.js');
    importScripts('https://www.gstatic.com/firebasejs/7.6.2/firebase-messaging.js');
    
    let firebaseApp = firebase.initializeApp(firebaseConfig);
    
    const messaging = firebase.messaging();
    
    messaging.setBackgroundMessageHandler(async payload => {
      console.log('[firebase-messaging-sw.js] Received background message ', payload);
      // It was something like this, I am using a different custom format
      return self.registration.showNotification(payload.data.title, payload.data);
    });
    

    boot/firebase.js
    firebaseConfig are my credentials

    import * as firebase from 'firebase/app'
    import 'firebase/messaging'
    
    firebase.initializeApp(firebaseConfig)
    
    const messaging = firebase.messaging()
    
    messaging.usePublicVapidKey('MY_KEY')
    
    // Request Permission of Notifications
    messaging.requestPermission().then(() => {
      console.log('Notification permission granted.')
      
      // Get Token
      messaging.getToken().then((token) => {
        console.log(token)
      })
    }).catch((err) => {
      console.log('Unable to get permission to notify.', err)
    })
    
    messaging.onMessage(payload => {
      console.log('Message received.', payload);
    });
    
    
    

    someone can help me?



  • Hi @Ezequiel any update on this ?


Log in to reply