Flutter Web：FCM 无法注册 Service Worker

Question

I am trying to implement FCM notification inside a Flutter Web application but I am getting errors when registering my service worker.我正在尝试在 Flutter Web 应用程序中实现 FCM 通知，但在注册我的服务工作者时出现错误。 I think it might come from the way my files index.html and firebase-messaging-sw.js are made.我认为这可能来自我的文件index.html和firebase-messaging-sw.js的制作方式。

index.html索引.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>MyApp</title>
</head>

<body>
  <script src="https://www.gstatic.com/firebasejs/7.5.0/firebase-app.js"></script>

  <script>
    // Your web app's Firebase configuration
    // For Firebase JS SDK v7.20.0 and later, measurementId is optional
    var devConfig = {
      apiKey: "API_KEY",
      authDomain: "AUTH_DOMAIN",
      databaseURL: "DB_URL",
      projectId: "PROJECT_ID",
      storageBucket: "STORAGE_BUCKET",
      messagingSenderId: "MESSAGING_SENDER_ID",
      appId: "APP_ID",
      measurementId: "MEASUREMENT_ID"
    };

    // Initialize Firebase
    firebase.initializeApp(devConfig);
  </script>

  <script>
    if ("serviceWorker" in navigator) {
      window.addEventListener("load", function () {
        navigator.serviceWorker.register("/firebase-messaging-sw.js");
      });
    }
  </script>

  <script src="main.dart.js" type="application/javascript"></script>
</body>

</html>

firebase-messaging-sw.js firebase-messaging-sw.js

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

var devConfig = {
   apiKey: "API_KEY",
   authDomain: "AUTH_DOMAIN",
   databaseURL: "DB_URL",
   projectId: "PROJECT_ID",
   storageBucket: "STORAGE_BUCKET",
   messagingSenderId: "MESSAGING_SENDER_ID",
   appId: "APP_ID",
   measurementId: "MEASUREMENT_ID"
};

// 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
firebase.initializeApp(devConfig);

// Retrieve an instance of Firebase Messaging so that it can handle background
// messages.
const messaging = firebase.messaging();
messaging.setBackgroundMessageHandler(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.',
        icon: '/firebase-logo.png'
    };

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

Errors错误

Uncaught FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app).
    at p (https://www.gstatic.com/firebasejs/7.5.0/firebase-app.js:1:10100)
    at Object.o [as messaging] (https://www.gstatic.com/firebasejs/7.5.0/firebase-app.js:1:9710)
    at http://localhost:56234/firebase-messaging-sw.js:33:28

Uncaught (in promise) TypeError: Failed to register a ServiceWorker for scope ('http://localhost:56234/') with script ('http://localhost:56234/firebase-messaging-sw.js'): ServiceWorker script evaluation failed

I am testing the application using the command flutter run -d web-server .我正在使用命令flutter run -d web-server测试应用程序。
I am correctly calling await Firebase.initializeApp() before starting my application in my main.dart .在我的main.dart启动我的应用程序之前，我正确地调用了await Firebase.initializeApp() 。
I am using the package firebase_core: ^0.5.0 .我正在使用包firebase_core: ^0.5.0 。
I have tested with firebase scripts in version 7.22.1 and 7.5.0 .我已经在版本7.22.1和7.5.0脚本进行了测试。

Answer 1

add follow ing in your index.html在 index.html 中添加以下内容

<script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-messaging.js"></script>

Flutter Web：FCM 无法注册 Service Worker

问题描述

1 个解决方案

解决方案1
0 已采纳 2021-05-11 20:17:50

Flutter Web：FCM 无法注册 Service Worker

问题描述

1 个解决方案

解决方案1 0 已采纳 2021-05-11 20:17:50

解决方案1
0 已采纳 2021-05-11 20:17:50