Tutorial membuat notifikasi dengan firebase cloud messaging atau FCM

Author:
Published: March 24, 2020
Berikut cara membuat notification pada web dengan menggunakan firebase

  1. install node js pada laptop server yang digunakan untuk meletekan aplikasi kalian
  2. buat project di https://console.firebase.google.com/  nama project bebas
  3. pilih yang sdk untuk web
  4. masuk ke project setting lalu ke tab cloud messaging akan terlihat Server Key dan Sender ID
  5. buat folder bebas mau ditaro dimana dengan nama FcmWeb (nama folder bebas)
  6. buat file index.html seperti tampilan dibawah ini https://gitlab.com/rikisaraan/fcm-web/-/raw/master/index.html
  7. ganti value messagingSenderId dengan Sender ID yang kalian dapat dari firebase
  8. kemudian buat folder lagi didalam folder FcmWeb dengan nama folder test
  9. didalam folder test buat file dengan nama file firebase-messaging-sw.js isinya seperti link berikut ini https://gitlab.com/rikisaraan/fcm-web/-/raw/master/test/firebase-messaging-sw.js
  10. selanjutnya setelah node js kalian install buka cmd masuk kedalam folder FcmWeb melalui terminal dengan ketik cd pathnya
  11. setelah kalian berada pada folder FcmWeb ketikan perintah npm install untuk menginstall node module
  12. selanjutnya didalam folder FcmWeb buat file lagi dengan nama app.js yang isinya sebagai berikut https://gitlab.com/rikisaraan/fcm-web/-/raw/master/app.js
  13. selanjutnya untuk membuat notifikasinya agar ada iconnya masukan gambar apa saja dengan extension .png kedalam folder test dan rename gambar tersebut dengan nama img
  14. setelah semua file siap buka lagi cmdnya masuk kedalam folder FcmWeb melalui terminal/commad promt/cmd ketikan perintah node app.js
  15. maka akan mucul  tampilan app listening at http://:::5000 
  16. nah jika seperti itu kalian sudah bisa akses halaman index.html dengan mengakses melalui browser dan ketikan localhost:5000
  17. maka akan tampil halaman dengan 1 button enable firebase messaging
  18. kalian cukup klik tombol tersebut untuk mendapatkan token yang akan muncul diatasnya
  19. sebelumnya pastikan notifikasi pada browser tersebut sudah diallow pada bagian atas dekat tombol refersh 
  21. setelah itu untuk testing kalian bisa menggunakan postman dengan settingan seperti berikut ini
  22. Method : POST
  23. End Point : https://fcm.googleapis.com/fcm/send
  24. Header : Content-Type:application/jsonAuthorization:key=SERVE KEY
  25. Body
{
  "notification": {
    "title": "Notifikasi Web",
    "body": "Tolong saya",
    "icon":"/img.png",
    "click_action": "http://link_tujuan"
  },
  "to": "Token yang didapat"
}
0 Komentar untuk "Tutorial membuat notifikasi dengan firebase cloud messaging atau FCM"

Back To Top