service worker 注册失败-Uncaught SyntaxError: Cannot use import statement outside a module (at firebase-messaging-sw.js:1:1)

Question

我正在尝试将 firbase 云消息传递集成到我的 angular 应用程序中。

我正在使用最新版本的 firbase npm package

但是我的 service worker 注册失败并给我上面提到的错误

我关注官方 firebase 文档https://firebase.google.com/docs/cloud-messaging/js/receive

和我的 firbase-messaging-sw.js

import { initializeApp } from "firebase/app";
import { getMessaging } from "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 fcmConfig = {}; //my config object
const firebaseApp = initializeApp(fcmConfig);
// Retrieve an instance of Firebase Messaging so that it can handle background
// messages.
const messaging = getMessaging(firebaseApp);
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.",
    tag: "notification-1",
  };

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

self.addEventListener("notificationclick", function (event) {
  event.notification.close();
  event.waitUntil(
    clients
      .matchAll({
        type: "window",
      })
      .then(function (clientList) {
        console.log(event);
        for (var i = 0; i < clientList.length; i++) {
          var client = clientList[i];
          if (
            client.url == event.notification.data.notification.click_action &&
            "focus" in client
          )
            return client.focus();
        }
        if (clients.openWindow)
          return clients.openWindow(
            event.notification.data.notification.click_action
          );
      })
  );
});
self.addEventListener("fetch", function (event) {});

我哪里做错了？ 我的实施是否正确？

Answer 1

当我尝试像您一样导入时，我也遇到了类似的错误。

当我像下面这样导入时，我在我的控制台中没有看到上面的错误。

我从 Maria galvez 找到了这个解决方案，回答了这个问题getMessaging failing - Uncaught SyntaxError: Cannot use import statement outside a module (at firebase-messaging-sw.js:1:1)

importScripts(
  "https://www.gstatic.com/firebasejs/9.1.3/firebase-app-compat.js"
);
importScripts(
  "https://www.gstatic.com/firebasejs/9.1.3/firebase-messaging-compat.js"
);
const urConfigObj = {}
firebase.initializeApp(urConfigObj);
const messaging = firebase.messaging();
messaging.onBackgroundMessage(function (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.",
    tag: "notification-1",
  };

  self.registration.showNotification(notificationTitle, notificationOptions);
});
self.addEventListener("notificationclick", function (event) {
  event.notification.close();
  event.waitUntil(
    clients
      .matchAll({
        type: "window",
      })
      .then(function (clientList) {
        console.log(event);
        for (var i = 0; i < clientList.length; i++) {
          var client = clientList[i];
          if (
            client.url == event.notification.data.notification.click_action &&
            "focus" in client
          )
            return client.focus();
        }
        if (clients.openWindow)
          return clients.openWindow(
            event.notification.data.notification.click_action
          );
      })
  );
});
self.addEventListener("fetch", function (event) {});