Search code examples
angularjsfirebasenotificationsfirebase-notifications

Set firebase messaging issue messaging/only-available-in-sw

I'm trying to set up firebase in my angularJS project to use background notification and in app notification.

What I did:

  • install firebase by npm install --save firebase
  • add manifest.json with sender id to root directory
  • put this scripts in <head>:
    • <script src="node_modules/firebase/firebase-app.js"></script>
    • <script src="node_modules/firebase/firebase-messaging.js"></script>

  • Add this script just after <body> is open:

    <script>
    var config = {
        apiKey: "AIzaSyDAVuWKUL-aPoGasdEi-EMR7uFN1gtgk0s",
        authDomain: "testproject-d71.firebaseapp.com",
        databaseURL: "https://testproject-12d71.firebaseio.com",
        projectId: "testproject-12d71",
        storageBucket: "",
        messagingSenderId: "123128116401"
    };
    firebase.initializeApp(config);
</script>

  • Add this script at the end of <body>

    • <script src="js/configFcm.js"></script>

which is:

const messaging = firebase.messaging();

messaging.setBackgroundMessageHandler(function(payload) {
    console.log('[firebase-messaging-sw.js] Received background message ', payload);
    // Customize notification here
    const notificationTitle = 'Title';
    const notificationOptions = {
        body: 'body.',
        icon: '/firebase-logo.png'
    };

    return self.registration.showNotification(notificationTitle,
        notificationOptions);
});

That's all what I did I didn't configure in app notification yet only background ones. I got error in console:

Uncaught code: "messaging/only-available-in-sw"

message: "Messaging: This method is available in a service worker context (messaging/only-available-in-sw)."

stack: "FirebaseError: Messaging: This method is available in a service worker context. (messaging/only-available-in-sw)

What is service-worker? Is it just client side? I'm executing this scripts from index.html so I'm confused.

Solution

  • You are currently using default firebase library. Instead, use it with the angularfire library which will take care of most of the things related to firebase. Below is the basic tutorial to use firebase with angularfire:

    1. Initialisation steps are fine.
    2. Inject angularfire in your index.html.
      <!-- AngularFire --> <script src="https://cdn.firebase.com/libs/angularfire/2.3.0/angularfire.min.js"></script>.
    3. Register firebase as a module in the application.
      var app = angular.module("sampleApp", ["firebase"])
    4. Now you are good to go.

    Please follow the references below for more information on how to use angularfire with firebase.