How to store Firebase background messages to vuex store in vuejs?

I’m new to Firebase cloud messaging(FCM). I used web version 9 (modular) FCM in my Vuejs v2 project. I put firebase-messaging-sw.js file on root of my project.
firebase-messaging-sw.js:

importScripts('https://www.gstatic.com/firebasejs/9.0.1/firebase-app-compat.js');
importScripts('https://www.gstatic.com/firebasejs/9.0.1/firebase-messaging-compat.js');

var firebaseConfig = {
    ...
};

firebase.initializeApp(firebaseConfig);
const messaging = firebase.messaging();

messaging.onBackgroundMessage(function(payload) {
    //Save payload to vuex store
});

When i want to import store from store package(import {store} from './store/store' ), an error raised:
Uncaught SyntaxError: Cannot use import statement outside a module
How can i store FCM messages to vuex store?

If you’re using v9, then why not use the modular approach?

https://firebase.google.com/docs/cloud-messaging/js/receive#web-version-9

I have used modular approach in main.js(for init and get foreground messages). But when i want to import firebase in firebase-messaging-sw.js (to handle background messages), following error hits:
Uncaught SyntaxError: Cannot use import statement outside a module

Do you have any idea to import firebase in the firebase-messaging-sw.js file?

@JamesThomson
I will be grateful to you if you help me! :slightly_smiling_face:

This (and your original post code above using importScripts) indicate that you’re using the v8 namespaced approach. What’s your current code look like?

@JamesThomson

I Used importScripts because i have error to import firebase methods in SW file(firebase-messaging-sw.js).

This is my main.js:

import { initializeApp } from 'firebase/app';
import { getMessaging, getToken, onMessage } from 'firebase/messaging';

const firebaseConfig = {
  //FB config from FB console
}

const firebaseApp = initializeApp(firebaseConfig);
const messaging = getMessaging();

getToken(messaging, {vapidKey: "Token"})
	.then((currentToken) => {
		if (currentToken) {
			localStorage.setItem('FCMToken', currentToken.toString());
		} 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);
});

//To handle foreground messages
onMessage(messaging, (message) => {
	console.log(message);
});

I haven’t problem to import FB methods in main.js and handle foreground messages.
According to Firebase Docs I have to handle background messages in SW file (service worker) that placed in root of my project. But when i want to import any thing in SW file the explained error raised.

This is firebase-messaging-sw.js that has error:

import { getMessaging } from "firebase/messaging";
import { onBackgroundMessage } from "firebase/messaging/sw";

var firebaseConfig = {
	//FB configs
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);

// Retrieve an instance of Firebase Messaging so that it can handle background
// messages.
const messaging = getMessaging();


onBackgroundMessage(function(payload) {
	//Handle background messages.
});

Error: Uncaught SyntaxError: Cannot use import statement outside a module

I haven’t done this for quite awhile, so bare with me… hopefully I’ve remembered this all correctly.

The reason you get this error is because you aren’t declaring the service worker as a module. This is a relatively new feature and unfortunately not supported by all browsers.

You should be able to configure a new entry point in webpack specifically for the firebase-messaging-sw.js file so that it gets run through the build process and output to the public directory.

But if that’s proving to be too convoluted, you can mix the two approaches: How to add FCM (Firebase Cloud Messaging) to VueJS - DEV Community

So your firebase-messaging-sw.js uses importScripts and basically just sets up the connection. Your firebase.js is where you expand on the logic within your app (subscribe to events, import your store to access vuex, etc.). I think you’ll have to use v8 for this approach and be sure that the version # you use in your importScripts matches the version number you install as an npm package.