Unable to import firebase nodules in firebase-messaging-sw.js(django)

[halhwadi]

Step 1: Describe your environment

• Operating system: _windows 10____
• Browser: Chrome, Microsoft Edge_
• Firebase SDK version: __9.0.0___

Step 2: Describe the problem:

Im working on firebase messaging service to send push notification via django web application to Andriod,IOS and website as well, I managed to get token ,however i can't running sw and get messages due to importing module issue, I tried all import statements and none has worked with me!!,

when i run the below lines i got this error "Uncaught DOMException: Failed to execute importScripts' on 'WorkerGlobalScope

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

and when i run these ones i got this error "Cannot use import statement outside a module":

import { initializeApp } from "https://www.gstatic.com/firebasejs/9.0.0/firebase-app.js";
import { getMessaging } from "https://www.gstatic.com/firebasejs/9.0.0/firebase-messaging-sw.js";

Note I do not have any error when accessing localhost:/firebase-messaging-sw.js and download window open to download firebase-messaging-sw.js file

please find firebase-messaging-sw.js files for your reference

// import { initializeApp } from "https://www.gstatic.com/firebasejs/9.0.0/firebase-app.js";
// import { getMessaging } from "https://www.gstatic.com/firebasejs/9.0.0/firebase-messaging-sw.js";

importScripts('https://www.gstatic.com/firebasejs/9.0.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/9.0.0/firebase-messaging.js');
self.importScripts('https://www.gstatic.com/firebasejs/9.0.0/firebase-messaging-sw.js');

// import { initializeApp } from "./node_modules/@firebase/app";
// import { getMessaging } from "./node_modules/@firebase/messaging/sw";

// import { getMessaging } from "./firebase/@firebase/messaging/sw";

// Initialize the Firebase app in the service worker by passing in
// your app's Firebase config object.
// https://firebase.google.com/docs/web/setup#config-object
const BikumApp = firebase.initializeApp({
  apiKey: 'xxxxxxxxxxxxxxxxxxxxxxxxxxx',
  authDomain: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
  databaseURL: 'xxxxxxxxxxxxxxxxxxxxxxxxxx',
  projectId: 'xxxxxxxxxxxxxxxxxxxxxx',
  storageBucket: 'xxxxxxxxxxxxxxxxxxxxxxx',
  messagingSenderId: 'xxxxxxxxxxxxxxxxx',
  appId: "1xxxxxxxxxxxxxxxxxxxxxxxxxx",
  measurementId: 'xxxxxxxxxxxxxxxxxx',
});

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

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

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

[google-oss-bot]

I couldn't figure out how to label this issue, so I've labeled it for a human to triage. Hang tight.

[Feiyang1]

There are 2 ways to you can import Firebase Messaging in service worker using v9:

1. You can use importScripts, but you have to use the compat scripts:

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

   Notice the -compat suffix in the script names. Compat scripts provide the v8 API, so you'd write v8 style code to use them. Therefore, you should follow the Web version 8 snippets in the Firebase devsite.

9.0.0/firebase-app.js and other non-compat scripts don't work with importScripts because they are ESMs which are only supported in browser context using <script type="module">.

2. Write module code using import, and use a bundler like webpack to build a service worker bundle.

   import { initializeApp } from "firebase/app";
   import { getMessaging } from "firebase/messaging/sw";

   You can find usage examples in the Web version 9 snippets in the Firebase devsite.

And keep in mind you can't import this code directly in service worker, you need to build it to generate a bundle that's compatible with importScripts (basically means a umd build), and use importScripts to import the generated file.

Feel free to reopen if you encountered any issues.

[halhwadi]

@Feiyang1 thank you so muck...I followed your guidelines and got issue solved....