integrate firebase cloud messaging in quasarv1.9 !



  • hi all, i’m try to integrate web cloud messaging in quasar app.
    i follow some procedures online and this is the step i do :

    STEP 1 WORK!
    Create boot file with i import firebase , firestore etc,
    Inizialize firebase
    export variabiles

    STEP 2 NOT WORK!
    i create a vuex store file where i get token from firebase and it work (chrome ask me correctly the permission for notification)
    i create a file name firebase-messaging-sw.js and in quasar conf with webpack plugin > cfg.plugins.push(new CopyWebpackPlugin([{ from: ‘src/firebaseTools/’, to: ‘’ }]));

    i see the service worker running in chrome application tab but when i try to send a notify form firebase not arrive.

    help me plz!



  • UPDATE:
    i used firebase 7.13, if downgrade to 5.6 foregroundnotification works , background notification no , i think the problem is in the service worker … quasat not see thaht



  • Can any of this help?
    quasar 1.11.2
    // server nodejs

    const admin = require("firebase-admin");  // npm
    
    var serviceAccount = require("./key_firebase.json"); //  Private Key 
        - To generate a private key file for your service account:
        - In the Firebase console, open Settings > Service Accounts.
        - Click Generate New Private Key, then confirm by clicking Generate Key.
        - Securely store the JSON file containing the key.
    
    admin.initializeApp({
      credential: admin.credential.cert(serviceAccount),
      databaseURL: "https://<<ProjectName>>.firebaseio.com"
    });
    // -------------------------------------------------------------
    var registrationToken ="SfDeDN2Aw5iUBn9UHcx....."  // client ,? ( for test )
    var message = {
      data: {
        title: "TitleHello",
        body: "Hello World",
        icon: "/statics/icons/icon-128x128.png",
        image: "/statics/dom_300.png",
        . . . . . . 
       }
      },
      //token: registrationToken  // if token from client
      topic: "allUsers"  // if for topic
    };
    
    // Send a message to the device corresponding to the provided
    admin
      .messaging()
      .send(message)
      .then(response => {
        // Response is a message ID string.
        console.log("Successfully sent message:", response);
      })
      .catch(error => {
        console.log("Error sending message:", error);
      });
    

    // sample if topic

    . . . . (req,res){ 
    let idTokens = [req.body.idToken];
     admin
       .messaging()
       .subscribeToTopic(idTokens, "allUsers")  // idTokens  From the client,   allUsers - name topic
            .then(function(response) {
     . . .
    

    workboxPluginMode: “InjectManifest”,

    // custom-service-worker,js

    importScripts("https://www.gstatic.com/firebasejs/7.14.2/firebase-app.js");
    importScripts( "https://www.gstatic.com/firebasejs/7.14.2/firebase-messaging.js");
     // Your web app's Firebase configuration  ->  console firebase  Firebase SDK snippet
      var firebaseConfig = { .. }
    
    firebase.initializeApp(firebaseConfig);
    const messaging = firebase.messaging();
    messaging.setBackgroundMessageHandler(function(payload) {
      let notifi = payload.data;
      const notificationTitle = notifi.title; //"Background Message Title";
      const notificationOptions = {
        actions: [
          {
            action: "https://google.ru",
            title: "click me"
          }
        ],
        body: notifi.body,
        icon: notifi.icon,
        image: notifi.image,
        requireInteraction: true // Do not clean message
      };
      return self.registration.showNotification(
        notificationTitle,
        notificationOptions
      );
    });
    

    . . .

    ???
    self.addEventListener( "notificationclick",  function(event) {
    . . .
    

    // register-service-worker.js

    import { register } from "register-service-worker";  // help npm ( includes to quasar ?)
    . . . 
    register(process.env.SERVICE_WORKER_FILE, {
      registrationOptions: { scope: "./" },
      ready(registration) {
     . . . 
    firebase.initializeApp(firebaseConfig);
    const messaging = firebase.messaging();
      messaging.useServiceWorker(registration); // Your sw (service-worker,js -> custom-service-worker.js)  instead   firebase-messaging-sw.js
    . . .
     messaging.onMessage(payload => {
      ... .. .. registration.showNotification(title, options)
    })  // no sw, no background
    . . . get token
     messaging
            .getToken()
            .then(idToken=> {
              if (idToken) { -> axios to server, for logics to topics
    , 
    }
    

Log in to reply