Firebase service worker and Angular

Question

I want to show a notification with action buttons.
This is only possible with the serviceWorker.showNotification API.

I have an Angular 9 application with the firebase-messaging-sw.js service worker as mentioned in the Firebase Messaging docs.

The service worker is used when the page is in the background.
In the firebase-messaging-sw.js I send the notification with:

self.registration.showNotification(notificationTitle,
        notificationOptions);

If the app is in the foreground, I need to show the same notification with actions buttons. So I need in the Angular Service TypeScript file to access also the same firebase service worker, but self.registration does of course not work.

How can I access the already registered Firebase service worker to show a notification with action buttons in my Angular TypeScript file?

Are you loading firebase-messaging-sw.js file in angular.json? — Lovely
Yes of course: "assets": [ "src/favicon.ico", "src/assets", "src/firebase-messaging-sw.js", "src/manifest.json" ], — chrisonline

Lovely Lovely · Accepted Answer · 2021-06-12T21:20:47

create firebase-messaging-sw.js Push messaging requires a service worker. This allows your app to detect new messages, even after the app has been closed by the user. and create this file in the same directory of manifest.json file which is in src/ directory.

Note:- Before importing the below script you need to check the latest version it's better if you import the latest version of the CDN link, so here i importing 7.6.0 version links.

importScripts('https://www.gstatic.com/firebasejs/7.6.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/7.6.0/firebase-messaging.js');
firebase.initializeApp({
    apiKey: “from firebase config”,
    authDomain: “from firebase config”,
    databaseURL: “from firebase config”,
    projectId: “from firebase config”,
    storageBucket: “from firebase config”,
    messagingSenderId: “from firebase config”,
    appId: “from firebase config”,
    measurementId: “from firebase config”
});
const messaging = firebase.messaging();

we need to register these files in angular-cli.json

"assets": [
    "src/favicon.ico",
    "src/assets",
    "src/firebase-messaging-sw.js", // add this one
    "src/manifest.json" // this one also 
]

And you can do reference below code for service code.

import { Injectable } from '@angular/core';
import { AngularFireMessaging } from '@angular/fire/messaging';
import { BehaviorSubject } from 'rxjs'
@Injectable()
export class MessagingService {
    currentMessage = new BehaviorSubject(null);
    constructor(private angularFireMessaging: AngularFireMessaging) {
    this.angularFireMessaging.messaging.subscribe(
    (_messaging) => {
    _messaging.onMessage = _messaging.onMessage.bind(_messaging);
    _messaging.onTokenRefresh = _messaging.onTokenRefresh.bind(_messaging);
    }
    )
    }
    requestPermission() {
    this.angularFireMessaging.requestToken.subscribe(
    (token) => {
    console.log(token);
    },
    (err) => {
    console.error('Unable to get permission to notify.', err);
    }
    );
    }
    receiveMessage() {
    this.angularFireMessaging.messages.subscribe(
    (payload) => {
    console.log("new message received. ", payload);
    this.currentMessage.next(payload);
    })
    }
}

let’s understand its functions requestPermission() : Browser/ device will ask to user for permission to receive notification. After permission is granted by the user, firebase will return a token that can use as a reference to send a notification to the browser.receiveMessage() : This function will be triggered when a new message has received.

Firebase service worker and Angular

1 Answers