Flutter Web：FCM 无法注册 Service Worker
Posted
技术标签:
【中文标题】Flutter Web：FCM 无法注册 Service Worker【英文标题】：Flutter Web: FCM cannot register Service Worker 【发布时间】：2021-01-27 19:51:40 【问题描述】：我正在尝试在 Flutter Web 应用程序中实现 FCM 通知，但在注册我的 service worker 时出现错误。我认为这可能来自我的文件index.html 和firebase-messaging-sw.js 的制作方式。
index.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 版本的 firebase 脚本进行了测试。
【问题讨论】：
【参考方案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>
【讨论】：
是的，最后我添加了 firebase-messaging 脚本，它工作正常。我会认为你的回答是有效的。以上是关于Flutter Web：FCM 无法注册 Service Worker的主要内容，如果未能解决你的问题，请参考以下文章
如何构造 FCM 推送通知以在 Flutter（Android 和 iOS）的默认系统 Web 浏览器应用中打开指定的 URL