Flutter Web：FCM 无法注册 Service Worker

Question

我正在尝试在 Flutter Web 应用程序中实现 FCM 通知，但在注册我的服务工作者时出现错误。 我认为这可能来自我的文件index.html和firebase-messaging-sw.js的制作方式。

索引.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

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);
});

错误

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

我正在使用命令flutter run -d web-server测试应用程序。
在我的main.dart启动我的应用程序之前，我正确地调用了await Firebase.initializeApp() 。
我正在使用包firebase_core: ^0.5.0 。
我已经在版本7.22.1和7.5.0脚本进行了测试。

Answer 1

在 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