Push Notification Firebase


const functions = require(‘firebase-functions’);
const admin = require(‘firebase-admin’);
exports.sendNotificationToTopic = functions.firestore.document(‘news/{uid}’).onWrite(async (event) => {
var message = {
notification: {
“title”: “Notification”,
“body”: “test notification”
topic: “namelesscoder”,
let response = await admin.messaging().send(message);


import firebase from ‘firebase/app’
import ‘firebase/firestore’
import ‘firebase/auth’
import ‘firebase/analytics’

const firebaseConfig = {
apiKey: …,
authDomain: …,
databaseURL: …,
projectId: …,
storageBucket: …,
messagingSenderId: …,
appId: …,
measurementId: …


export const db = firebase.firestore();
export const auth = firebase.auth();

Hello I am currently trying to implement push notification to my framework7 vue app. My goal is to send notification to all user once I add new news to the firebase. I am using firebase function cause i was unable to figure out how to do it diferently since I want it to be a background notification.

THX for any ideas.

Hi @Matej_novotny,

I believe you can find your goal here

1 Like

Thanks a lot it seems to beexactly what Iam looking for.
There is a step:

I am unable to figure out where should I put it.
http://localhost:8081/firebase-messaging-sw.js should return something but I get: Cannot GET /firebase-messaging-sw.js

No need to follow that step since you already init firebase. You need to import :


And retrieve instance of firebase messaging firebase.messaging();

Does it mean that these lines should me in my origin firebase.js file since firebase-messaging-sw.js should be empty at start?? This is my src/js/firebase.js and at the moment my src/js/firebase-messaging-sw.js is empty. Where and how should I import these scripts?

import firebase from 'firebase/app'
import 'firebase/firestore'
import 'firebase/auth'
import 'firebase/analytics'
import 'firebase/messaging'

const firebaseConfig = {


// Retrieve Firebase Messaging object.
const messaging = firebase.messaging();

// if ('serviceWorker' in navigator) {
//   navigator.serviceWorker.register('./firebase-messaging-sw.js')
//     .then(function (registration) {
//       console.log("Service Worker Registered");
//       messaging.useServiceWorker(registration);
//     });
// }

// Get Instance ID token. Initially this makes a network call, once retrieved
// subsequent calls to getToken will return from cache.
messaging.getToken().then((currentToken) => {
  if (currentToken) {
  } else {
    // Show permission request.
    console.log('No Instance ID token available. Request permission to generate one.');
    // Show permission UI.
}).catch((err) => {
  console.log('An error occurred while retrieving token. ', err);

export const db = firebase.firestore();
export const auth = firebase.auth();

// Send the Instance ID token your application server, so that it can:
// - send messages back to this app
// - subscribe/unsubscribe the token from topics
function sendTokenToServer(currentToken) {
  if (!isTokenSentToServer()) {
    console.log('Sending token to server...');
    // TODO(developer): Send the current token to your server.
  } else {
    console.log('Token already sent to server so won\'t send it again ' +
      'unless it changes');


function isTokenSentToServer() {
  return window.localStorage.getItem('sentToServer') === '1';

function setTokenSentToServer(sent) {
  window.localStorage.setItem('sentToServer', sent ? '1' : '0');

I have these file imported in my index.html but i am still getting:

FirebaseError: Messaging: We are unable to register the default service worker. Failed to register a ServiceWorker for scope ('http://localhost:8080/firebase-cloud-messaging-push-scope') with script ('http://localhost:8080/firebase-messaging-sw.js'): A bad HTTP response code (404) was received when fetching the script. (messaging/failed-service-worker-registration).
    at ut.<anonymous> (https://www.gstatic.com/firebasejs/7.21.1/firebase-messaging.js:1:37074)
    at https://www.gstatic.com/firebasejs/7.21.1/firebase-messaging.js:1:1982
    at Object.throw (https://www.gstatic.com/firebasejs/7.21.1/firebase-messaging.js:1:2087)
    at i (https://www.gstatic.com/firebasejs/7.21.1/firebase-messaging.js:1:884)


To store the firebase-messaging-sw.js file I’ve made some changes in the build/webpack.config.js file, to have a folder to add any file I want to have in the app root folder.
I’ve this in the end of the build/webpack.config.js file now:

new CopyWebpackPlugin({
  patterns: [
      noErrorOnMissing: true,
      from: resolvePath('src/static'),
      to: resolvePath(isCordova ? 'cordova/www/static' : 'www/static'),
    //***ADDITION*** I add this lines to have a folder to store files I want in the root folder
      noErrorOnMissing: true,
      from: resolvePath('src/homefiles'),
      to: resolvePath(isCordova ? 'cordova/www' : 'www'),
    //***END ADDITION***

Now you can make the src/homefiles folder and every file you store in this folder will be in the root folder, so if you store the firebase-messaging-sw.js file inside, you will not have this error.
Maybe there is another better solution, but i’ve find this…

I added this to my folder and it keeps giving the same error as the service worker.

Do you have any other solution?

you need to make the src/homefiles folder
add the firebase-messaging-sw.js file inside this folder
and make the changes inside the build/webpack.config.js file
¿it send you the same error or another diferent one?

After a few attempts it worked, thanks for the help.

I’m trying to generate the FCM Token now for Cordova (Android and IOS), I installed some more unsuccessful plugins using Framework7 + Cordova, have you reached this part yet?

To get the FCM token on Android I’ve used this plugin:

following this example:

This example throw me a compilation warning because a deprecated Gradle version, it still work, but i’ve not solved yet the deprecated Gradle warning.

1 Like

I’ve find these plugins too, but I’ve not try them yet:

This second have a test app too: