关于 how-to-send-push-notifications-on-flutter-web-fcm
这是一份 Flutter Web 集成 Firebase Cloud Messaging（FCM）的操作指南，面向需要在 Web 应用中接收推送通知的 Flutter 开发者。内容涵盖服务工作线程配置、权限请求、令牌获取和消息监听。
主要功能
- 01配置 FCM 服务工作线程
- 02请求通知权限并获取令牌
- 03监听传入消息流
- 04通过 Firebase 控制台测试消息
适用场景
- 01为 Flutter Web 应用启用 FCM
- 02在应用中请求用户通知权限
- 03接收并测试推送消息
安装
复制下面的命令，在终端中运行。
npx skills add https:/安装后在 Claude Code 中输入/how-to-send-push-notifications-on-flutter-web-fcm确认已加载。
详细介绍
如何在 Flutter Web 上发送推送通知（FCM）
如果你使用 Firebase，那么你可能已经熟悉 Firebase Cloud Messaging。Flutter Web 上的设置与移动端以及你可能用过的其他插件有很大不同。
设置
打开 web/index.html，并找到以下脚本。如果没有，可以现在将它添加到标签中。
<script>
if ("serviceWorker" in navigator) {
window.addEventListener("load", function () {
navigator.serviceWorker.register("/flutter_service_worker.js");
});
}
</script>
我们需要修改它，以支持 FCM service worker。要做的关键一点是注释掉 flutter_service_worker.js，这样注册 FCM service worker 时就不会出现 404 错误。
<script>
if ("serviceWorker" in navigator) {
window.addEventListener("load", function () {
// navigator.serviceWorker.register("/flutter_service_worker.js");
navigator.serviceWorker.register("/firebase-messaging-sw.js");
});
}
</script>
现在，在 web 文件夹中创建一个名为 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");
firebase.initializeApp({
apiKey: "API_KEY",
authDomain: "AUTH_DOMAIN",
databaseURL: "DATABASE_URL",
projectId: "PROJECT_ID",
storageBucket: "STORAGE_BUCKET",
messagingSenderId: "MESSAGING_SENDER_ID",
appId: "APP_ID",
measurementId: "MEASUREMENT_ID"
});
const messaging = firebase.messaging();
messaging.setBackgroundMessageHandler(function (payload) {
const promiseChain = clients
.matchAll({
type: "window",
includeUncontrolled: true
})
.then(windowClients => {
for (let i = 0; i < windowClients.length; i++) {
const windowClient = windowClients[i];
windowClient.postMessage(payload);
}
})
.then(() => {
return registration.showNotification("New Message");
});
return promiseChain;
});
self.addEventListener('notificationclick', function (event) {
console.log('notification received: ', event)
});
请务必将配置密钥替换为你的 Firebase 密钥。
辅助方法
在你喜欢的位置创建一个名为 firebase_messaging.dart 的新 Dart 文件，并添加以下内容：
import 'dart:async';
import 'package:firebase/firebase.dart' as firebase;
class FBMessaging {
FBMessaging._();
static FBMessaging _instance = FBMessaging._();
static FBMessaging get instance => _instance;
firebase.Messaging _mc;
String _token;
final _controller = StreamController<Map<String, dynamic>>.broadcast();
Stream<Map<String, dynamic>> get stream => _controller.stream;
void close() {
_controller?.close();
}
Future<void> init() async {
_mc = firebase.messaging();
_mc.usePublicVapidKey('FCM_SERVER_KEY');
_mc.onMessage.listen((event) {
_controller.add(event?.data);
});
}
Future requestPermission() {
return _mc.requestPermission();
}
Future<String> getToken([bool force = false]) async {
if (force || _token == null) {
await requestPermission();
_token = await _mc.getToken();
}
return _token;
}
}
在应用中创建一个按钮，用于请求权限。虽然可以在应用启动时请求权限，但这通常不是一个好做法，因为用户不太可能接受，而且双方尚未建立信任。你可以通过以下方式请求权限：
final _messaging = FBMessaging.instance;
_messaging.requestPermission().then((_) async {
final _token = await _messaging.getToken();
print('Token: $_token');
});
你可以通过以下方式监听消息：
final _messaging = FBMessaging.instance;
_messaging.stream.listen((event) {
print('New Message: ${event}');
});
测试
现在，运行应用并请求权限后，你会获得一个令牌。使用此令牌，你可以打开 Firebase 控制台，向该令牌发送测试消息。
总结
现在你可以向 Flutter 应用发送推送通知了！你仍需使用条件导入来支持移动端，不过敬请期待相关示例。有任何问题或反馈，请告诉我。