そのため、WebアプリにWebプッシュ通知を実装する必要があります。ドキュメントの助けを借りてアプリでfirebaseクラウドメッセージングを正常にセットアップしました。ユーザーに通知の許可を許可し、トークンIDも取得するように依頼できます彼が許可を受け入れた場合。
問題は、生成されたトークンをテストするために通知を送信しようとすると、メッセージが送信されたという応答が返されますが、クライアント側でそれを受信できないことです。
私のindex.html
<head>
<script src="https://www.gstatic.com/firebasejs/4.4.0/firebase.js"></script>
<link rel="manifest" href="./firebase.json">
</head>
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('./firebase-messaging-sw.js').then(function(registration) {
console.log('Firebase Worker Registered');
}).catch(function(err) {
console.log('Service Worker registration failed: ', err);
});
}
</script>
Service Workerファイルを正常に登録できます
私のApp.component.ts
var config = {
apiKey: "somekey",
authDomain: "someproject-2.firebaseapp.com",
databaseURL: "https://someproject-2.firebaseio.com",
projectId: "someproject-2",
storageBucket: "",
messagingSenderId: "someid"
};
firebase.initializeApp(config);
const messaging = firebase.messaging();
messaging.requestPermission()
.then(function() {
console.log('Notification permission granted.');
return messaging.getToken()
})
.then(function(result) {
console.log("The token is: ", result);
})
.catch(function(err) {
console.log('Unable to get permission to notify.', err);
});
messaging.onMessage(function(payload) {
console.log("Message received. ", payload);
});
このコードで許可を求める許可ダイアログボックスを取得し、トークンを取得しています
メッセージの送信に使用したカールコード
curl -X POST -H "Authorization: key=somekey" -H "Content-Type: application/json" -d '{
"notification": {
"title": "Portugal vs. Denmark",
"body": "5 to 1",
"icon": "firebase-logo.png",
"click_action": "http://localhost:8081"
},
"to": "sometoken"
}' "https://fcm.googleapis.com/fcm/send"
このコードで通知を正常に送信できます
多分それがローカルホスト上にあるので、私はどこが間違っているのか分かりませんか? onMessageメソッドが正しく実行されていない可能性がありますか?どんな助けも大歓迎です!
申し分なく、私はstackoverflowでこれに対する答えを得られなかったので、私は自分でそれをしなければならなくて、それを働かせました!
問題はサービスワーカーファイルにあり、メッセージ変数を定義していないようです。
誰かがこの問題に直面している場合は、サービスワーカーファイルが次のようになっていることを確認してください。
importScripts('https://www.gstatic.com/firebasejs/3.9.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/3.9.0/firebase-messaging.js');
firebase.initializeApp({
'messagingSenderId': '182145913801'
});
const messaging = firebase.messaging();
同様の問題が発生したため、firebaseでクラウドメッセージングにアクセスし、サーバーキーを取得してcurlリクエストに追加しました。
curl --header "Authorization: key=CloudMessagingServerKey" --header "Content-Type: application/json" -d '{
"notification": {
"title": "FCM Message",
"body": "This is an FCM Message",
},
"to": "token from messaging.getToken()"
}' "https://fcm.googleapis.com/fcm/send"
そして、私のfirebase-messaging-sw.jsは以下のコードのように見えました
importScripts('https://www.gstatic.com/firebasejs/4.8.1/firebase-
app.js');
importScripts('https://www.gstatic.com/firebasejs/4.8.1/firebase-
messaging.js');
firebase.initializeApp({
apiKey: 'yourapikey',
authDomain: 'xxxx.firebaseapp.com',
databaseURL: 'https://xxxx.firebaseio.com',
projectId: 'xxxx',
storageBucket: 'xxxx.appspot.com',
messagingSenderId: 'your message sender Id',
});
const messaging = firebase.messaging();
それは私のためのトリックをしました。私のエラーは、間違ったserverKeyを使用していて、firebase-messaging-sw.jsでimportScriptsを使用していなかったということでした