当服务器通过 FCM 发送消息时,我希望在 Angular web 应用程序上显示推送通知。最好的方法是什么?是否有适用于此的 Angular 插件(我必须承认我自己找不到)。
当服务器通过 FCM 发送消息时,我希望在 Angular web 应用程序上显示推送通知。最好的方法是什么?是否有适用于此的 Angular 插件(我必须承认我自己找不到)。
按照 Firebase Javascript Web Setup 的步骤,您只需要暴露对象并在适当的 Angular 组件中执行初始化即可。
更新于 2019 年 1 月 28 日:请确保添加脚本标签以获取 firebase-messaging bundle <script src="https://www.gstatic.com/firebasejs/4.9.0/firebase-messaging.js"></script>
,但如果您使用 browserify 等工具,则可以完全遵循他们的文章和示例。
以下是原始 JavaScript 代码:
<script src="https://www.gstatic.com/firebasejs/4.9.0/firebase.js"></script>
<script>
// Initialize Firebase
// TODO: Replace with your project's customized code snippet
var config = {
apiKey: "<API_KEY>",
authDomain: "<PROJECT_ID>.firebaseapp.com",
databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
storageBucket: "<BUCKET>.appspot.com",
messagingSenderId: "<SENDER_ID>",
};
firebase.initializeApp(config);
</script>
您可以在配置块中执行此初始化操作 - 类似于下面的示例。请记住,firebase
是全局对象。
app.config(function() {
var config = {
apiKey: "<API_KEY>",
authDomain: "<PROJECT_ID>.firebaseapp.com",
databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
storageBucket: "<BUCKET>.appspot.com",
messagingSenderId: "<SENDER_ID>",
};
firebase.initializeApp(config);
});
const messaging = firebase.messaging();
// [END initialize_firebase_in_sw]
**/
// If you would like to customize notifications that are received in the
// background (Web app is closed or not in browser focus) then you should
// implement this optional method.
// [START background_handler]
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);
});