Vin*_*nzo 1 firebase firebase-cloud-messaging flutter-web
在我的应用程序中，对于网络版本，我使用 package firebase 7.3.0。我首先使用单例实例化 Firebase 应用程序，然后实例化 Messaging()，就像我在我的应用程序中使用的所有其他 Firebase 服务所做的那样：
App firebase = FirebaseWeb.instance.app;
var firebaseMessaging = messaging();
我有subscribeToTopic()方法首先调用getMessagingToken()方法，因为它需要返回的令牌，但getMessagingToken()抛出错误：
PlatformPushNotificationWeb.getMessagingToken() getToken error: FirebaseError: Messaging: We are unable to register the default service worker. Failed to register a ServiceWorker for scope ('http://localhost:5000/firebase-cloud-messaging-push-scope') with script ('http://localhost:5000/firebase-messaging-sw.js'): A bad HTTP response code (404) was received when fetching the script. (messaging/failed-service-worker-registration). (messaging/failed-service-worker-registration)
Future<String> getMessagingToken() async {
String token;
await firebaseMessaging.requestPermission().timeout(Duration(seconds: 5)).then((value) {
print('PlatformPushNotificationWeb.getMessagingToken() requestPermission result is $value');
}).catchError((e) => print('PlatformPushNotificationWeb.getMessagingToken() requestPermission error: $e'));
await firebaseMessaging.getToken().then((value) {
print(' PlatformPushNotificationWeb.getMessagingToken() token is $value');
token = value;
}).catchError((e) => print('PlatformPushNotificationWeb.getMessagingToken() getToken error: $e'));
return token;
}
我检查并在我的index.htmlfirebase-messaging 中存在：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>fixit cloud biking</title>
<!-- <meta name="google-signin-client_id" content="YOUR_GOOGLE_SIGN_IN_OAUTH_CLIENT_ID.apps.googleusercontent.com">-->
<meta name="google-signin-client_id" content="xxxxxxxxxx.apps.googleusercontent.com">
<!-- <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">-->
</head>
<!--<body>-->
<body id="app-container">
<script src="main.dart.js?version=45" type="application/javascript"></script>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.15.5/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/7.15.5/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.15.5/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.15.5/firebase-messaging.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.15.5/firebase-storage.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.15.5/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.15.5/firebase-remote-config.js"></script>
</body>
</html>
现在，错误说'http://localhost:5000/firebase-messaging-sw.js'不是firebase-messaging.jsindex.html file. I noticed that Messaging() is not directly available through firebase app instance as it would be for other services, for Storage would befirebase.storage()` 中的库。我是否缺少为消息设置其他内容？
找到这篇文章https://medium.com/@rody.davis.jr/how-to-send-push-notifications-on-flutter-web-fcm-b3e64f1e2b76并发现 Firebase Cloud 确实有更多设置在网络上发送消息。
在index.html有一个脚本添加：
<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，您可以在其中导入 firebase 包（匹配index.html版本）、初始化 Firebase app 并设置 BackgroundMessageHandler。如果我使用单例初始化 Firebase 应用程序，则实例化messaging()会引发语法错误，因此需要使用所有参数对其进行初始化，否则后台消息将不起作用。
importScripts("https://www.gstatic.com/firebasejs/7.15.5/firebase-app.js");
importScripts("https://www.gstatic.com/firebasejs/7.15.5/firebase-messaging.js");
//Using singleton breaks instantiating messaging()
// App firebase = FirebaseWeb.instance.app;
firebase.initializeApp({
apiKey: 'api-key',
authDomain: 'project-id.firebaseapp.com',
databaseURL: 'https://project-id.firebaseio.com',
projectId: 'project-id',
storageBucket: 'project-id.appspot.com',
messagingSenderId: 'sender-id',
appId: 'app-id',
measurementId: 'G-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)
});
所以，现在，getToken()并subscribeToTopic()和onMessage()正常工作。
在我的集团中，我有一个侦听onMessage()器（在网络上）Stream<Map<String,Dynamic>>，当firebase_messaging（在设备上）从Stream返回时，我将其转换为 a ：
Stream<Map<String, dynamic>> onMessage() async* {
print('PlatformPushNotificationWeb.onMessage() started');
handleData(Payload payload, EventSink<Map<String, dynamic>> sink) {
Map<String,dynamic> message = {
'notification': {
'title': payload.notification.title,
'body': payload.notification.body,
'sound': true
},
'data': payload.data
};
sink.add(message);
}
final transformer = StreamTransformer<Payload, Map<String, dynamic>>.fromHandlers(
handleData: handleData);
yield* firebaseMessaging.onMessage.transform(transformer);
}
希望它可以帮助其他人。干杯。
| 归档时间： |
|
| 查看次数： |
3730 次 |
| 最近记录： |