How to use firebase push notification using laravel and vue js

Question

I have try to make send push notification to admin user when a customer order a product.

When an admin user logged into dashboard will shown a prompt and if user subscribe the prompt user will get notification when a customer make a order in front end.I have used laravel and vue for backend.(Vue inside the laravel application).I have no idea how to prompt shown when user logged in .I have created a account in firebase and get keys.

All tutorial are based on independent vue js.In my case vue js inside the laravel app.

Where i put code which is get from firebase.?

i have tried with //app.js

import firebase from "firebase/app";
    import { initializeApp } from 'firebase/app';
    import '@firebase/messaging';
    var firebaseConfig = {
        apiKey: "xxxxxxxxxxxxxxx",
        authDomain: "xxxxxxxxx.firebaseapp.com",
        projectId: "xxxxxxxxx-push",
        storageBucket: "xxxxxxx.appspot.com",
        messagingSenderId: "xxxxxxxxxxx",
        appId: "xxxxxxxxxx:c1bae0304ce23d6eae3ccd",
        measurementId: "xxxxxxx"
    };
    firebase.initializeApp(firebaseConfig);
    // Using FCM Messaging
    const messaging = firebase.messaging();
    messaging.usePublicVapidKey("xxxxxxxxxxx");
    // Get FCM Token
    messaging.getToken().then((currentToken) => {
    if (currentToken) {
    console.log("Token: " + 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);
    });

Uncaught TypeError: firebase.messaging is not a function at Module../resources/js/app.js

I have an answer here that paints a full picture: stackoverflow.com/questions/61824118/… — jaletechs
– jaletechs, Commented Oct 18, 2022 at 18:50

Thomas Uchiha · Accepted Answer · 2022-03-29 09:14:33Z

The issue is related with the version of Firebase you have installed. I think you have "firebase": "^9.X.X"

You are using the Web version 8 api. You can install v.8 if you like, but I wouldn't recommend it. V9 offers great features like tree shaking.

Here's a solution for firebase v9 :

First things first, I hope your firebaseConfig data is a dummy data, if not, you'll have to create a new firebase project because the data you just published here are sensitive and should be kept hidden.

To answer your question : You need to import getMessaging in order to interact with FCM :

import { getMessaging, getToken } from "firebase/messaging";

Make sure your initializeApp() is inside a variable:

const app = initializeApp(firebaseConfig);

In order to initialize the messaging service :

const messaging = getMessaging(app);

Retrieving the token :

getToken(messaging, { vapidKey: '<YOUR_PUBLIC_VAPID_KEY_HERE>' }).then((currentToken) => {
  if (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);
  // ...
});

For more info : Firebase docs

Collectives™ on Stack Overflow

How to use firebase push notification using laravel and vue js

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related