Tạo nhận tin nhắn đẩy push notification trên ứng dụng web với firebase 2 tuần 13 giờ trước #4105

  • huonggiang123
  • huonggiang123's Avatar
  • Offline
  • New Member
  • Tổng số bài viết: 16
  • Điểm khen ngợi: 0
- Bước 1: Tạo một ứng dụng trên firebase. Nếu chưa tạo có thể vào: console.firebase.google.com/ để đăng kí và tạo 1 ứng dụng.
- Bước 2: Khi đã tạo app, chọn thêm app để thêm ứng dụng web


Sau khi chọn web xong, xuất hiện code hướng dẫn, hãy chép code đó lại


- Bước 3:
Tạo 1 file test.html có nội dung
<html>
<title>Firebase Messaging Demo</title>
<style>
    div {
        margin-bottom: 15px;
    }
</style>
<body>

    <div id="token"></div>
    <div id="msg"></div>
    <div id="notis"></div>
    <div id="err"></div>
    
 

    <body>
    </body>

</html>

Sau đó thêm các code sau trong thẻ <script>:
  MsgElem = document.getElementById("msg")
        TokenElem = document.getElementById("token")
        NotisElem = document.getElementById("notis")
        ErrElem = document.getElementById("err")
        // Initialize Firebase
        // TODO: Replace with your project's customized code snippet
       var config = {
		apiKey: "AIzaSyCRYHEJEFp-tpP-ncMWVBeNYoPdyyApDHA",
		authDomain: "cuoituan-61003.firebaseapp.com",
		databaseURL: "https://cuoituan-61003.firebaseio.com",
		projectId: "cuoituan-61003",
		storageBucket: "cuoituan-61003.appspot.com",
		messagingSenderId: "212818365705"
	  };
        firebase.initializeApp(config);

        const messaging = firebase.messaging();
        messaging
            .requestPermission()
            .then(function () {
                MsgElem.innerHTML = "Notification permission granted." 
                console.log("Notification permission granted.");
                
                // get the token in the form of promise
				alert(messaging);
                return messaging.getToken()
            })
            .then(function(token) {
                TokenElem.innerHTML = "token is : " + token
				///token can luu lai cho tung nguoi dung
            })
            .catch(function (err) {
			//thong bao loi
                ErrElem.innerHTML =  ErrElem.innerHTML + "; " + err
                console.log("Unable to get permission to notify.", err);
            });

        messaging.onMessage(function(payload) {
		//message nhan ve
		///{"data":{"moredata":"dd","gcm.notification.sound":"mySound","message":"{\"sound\":\"mySound\",\"icon\":\"myIcon\",\"title\":\"title\",\"body\":\"body of message.\",\"click_action\":\"YourTAG\"}"},"from":"212818365705","notification":{"title":"title","body":"body of message.","icon":"myIcon","click_action":"YourTAG"},"collapse_key":"do_not_collapse"}
		
		
            console.log("Message received. ", payload);
            NotisElem.innerHTML = NotisElem.innerHTML + JSON.stringify(payload) ;
		
        });

Bước 4:
Bạn cần tạo thêm một file firebase-messaging-sw.js để làm dịch vụ nhận tin nhắn. File này nằm ở thư mục gốc và chỉ hoạt động khi để trên server thật sự.

Toàn bộ code các bạn có thể download tại:

File Attachment:

Tên tập tin: firebase-p...ster.zip
Dung lượng tập tin:9 KB
Lần sửa cuối: 2 tuần 13 giờ trước bởi huonggiang123.
Không cho phép Khách viếng thăm viết bài.

quang cao daklak

Bài đăng mới nhất