Bagaimana Cara Mengirim Pemberitahuan Push Web Menggunakan Firebase (FCM)?

Diterbitkan: 2021-12-29

Untuk memfasilitasi layanan notifikasinya di Web, iOS, dan Android, Firebase menggunakan layanan cloud. Firebase Cloud Messaging (FCM) beroperasi dengan menghasilkan token unik untuk setiap perangkat dan kemudian menggunakannya untuk mengirim pesan ke perangkat masing-masing. Untuk mengirim pemberitahuan push web , Firebase menghasilkan token dengan menggunakan javascript.

Di blog ini, Anda akan mengetahui segala sesuatu tentang bagaimana menerapkan web push notification firebase .

Apa itu perpesanan cloud firebase?

Apa-itu-Firebase-Cloud-Messaging

Firebase Cloud Messaging adalah layanan notifikasi seluler gratis dari Google. Ini memungkinkan pengembang aplikasi pihak ketiga mengirim pemberitahuan kepada penggunanya dari server Google Cloud Messaging (GCM). Ini memungkinkan Anda memberi tahu pengguna tentang berbagai data yang tersedia untuk sinkronisasi secara real-time.

Ini mengalirkan pesan dari aplikasi pengguna ke server FCM dan pesan hilir dari server FCM ke aplikasi pengguna dan. Anda dapat menggunakan FCM untuk melibatkan, mempertahankan, dan menargetkan ulang pengguna Anda di mana pun mereka berada.

Apa manfaat mengirim pemberitahuan push web menggunakan firebase?

Berikut adalah manfaat mengirim pemberitahuan push web dari firebase .

  • Gratis untuk memulai: Anda tidak perlu membayar Google untuk memanfaatkan FCM layanan pemberitahuan push. Selain itu, skalanya mudah.  
  • Jangan khawatir tentang izin: Karena pustaka FCM menggunakan penggabungan manifes, ia secara otomatis menambahkan izin apa pun yang diperlukan. Ini mengurangi jumlah upaya yang perlu Anda lakukan.
  • Pendaftaran yang disederhanakan: Alamat yang digunakan FCM untuk mengirimkan pesan ke perangkat disebut sebagai “token pendaftaran”. Proses ini sekarang telah dibuat asinkron. Pustaka Google secara otomatis diberi token atas nama Anda. Jadi, saat Anda meminta token, Anda akan dikirimi token pendaftaran. Untuk mulai mengirim pesan, Anda hanya perlu mengirim token ini ke server Anda.
  • Implementasi yang mudah: Menerapkan FCM dengan cepat dan mudah. Karena API intuitifnya tersedia dalam satu SDK, Anda dapat segera mengatasi masalah pelanggan tanpa membangun infrastruktur yang rumit.
  • Analytics: Anda mendapatkan analitik tanpa batas secara gratis dari Firebase. Anda mendapatkan data berharga tentang penggunaan aplikasi pengguna, klik iklan, dan lainnya. Fitur Firebase lainnya bekerja dengan baik dengan Firebase Analytics. Jadi, Anda bisa bertindak dalam segala hal.
  • Dukungan lintas platform: Karena API tersedia dalam satu SDK untuk C++, JavaScript, Android, dan iOS, Anda dapat memperluasnya ke berbagai platform tanpa mengubah infrastruktur Anda.
  • Pesan topik umum: Saat Anda ingin memberi tahu pengguna yang tertarik dengan topik tertentu, Anda cukup memublikasikan pesan Anda ke FCM. FCM akan mengirimkannya ke semua pengguna yang telah berlangganan topik tersebut. Hal terbaiknya adalah tidak ada batasan pada perpesanan topik.
  • Pesan topik yang berbeda: FCM juga memungkinkan segmentasi pelanggan untuk mengirimi mereka pesan yang relevan. Misalnya, jika Anda mengirimkan pemberitahuan terkait lalu lintas kepada pengguna Anda, pengguna Anda di Kota A akan menerima pesan lalu lintas yang berkaitan dengan kota mereka saja, dan pengguna di Kota B akan menerima pesan lalu lintas yang terkait dengan kota mereka saja.

Bagaimana cara mengirim pemberitahuan push web menggunakan Firebase?

Berikut adalah petunjuk langkah demi langkah untuk membantu Anda menerapkan pemberitahuan push web Firebase .

1. Daftarkan Aplikasi Firebase

Daftar-Firebase-Aplikasi
  1. Kunjungi tautan ini https://console.firebase.google.com/u/0/ dan tekan tab 'Tambahkan Proyek'.
  2. Beri nama proyek dan pilih negara. Kemudian tekan pada tab 'Buat Proyek'. Google akan memeriksa nama proyek untuk ketersediaan dan keunikannya.
  3. Sekarang klik tab 'terima syarat & ketentuan' untuk melanjutkan. Proyek Anda akan dibangun di dalam
  4. beberapa detik.
  5. Sekarang tambahkan aplikasi Android/IOS/Web/Unity Anda ke proyek Anda. Karena blog ini berfokus pada pemberitahuan push web Firebase , Anda harus melanjutkan dengan mengklik ikon web yang ditampilkan sebagai </>.
  6. Berikan nama panggilan untuk aplikasi Anda. Julukan ini untuk pengguna saja. Jadi, Anda dapat menggunakan fitur ini untuk memfasilitasi pembedaan yang lebih baik antara aplikasi dalam proyek untuk penggunaan internal.
  7. Jika proyek Anda tidak berjalan di server HTTPS, tambahkan hosting untuk itu. Jika tidak, lewati saja langkah ini.
  8. Sekarang klik 'Daftar aplikasi'.  
  9. Setelah aplikasi Anda terdaftar, Anda akan menerima SDK Firebase, yang merupakan kode. Salin kode ini

turun. Ini akan mulai digunakan di bagian yang akan datang. Jika Anda tidak menyalin ini sekarang, Anda dapat mengambilnya dari bagian 'Pengaturan'.

2. Tambahkan firebase ke proyek Anda

Tambahkan-firebase-ke-proyek-Anda
  1. Pergi ke dasbor. Di bilah sisi, Anda akan menemukan ikon 'Pengaturan'. Klik di atasnya. Di menu yang disajikan, klik pengaturan proyek.
  2. Ketika halaman Pengaturan (Pengaturan Umum) terbuka, gulir ke bawah ke bagian bawah halaman dan salin kode yang ditampilkan untuk CDN yang dipilih.
  3. Sertakan kode berikut di file HTML Anda di bagian akhir. Sertakan juga skrip CDN untuk perpesanan firebase.

< script src = “https://www.gstatic.com/firebasejs/8.3.2/firebase-app.js” > </script>

<script src = “https://www.gstatic.com/firebasejs/8.3.2/firebase-analytics.js” > </script>

3. Mengoperasikan layanan Firebase

1. Untuk kode yang disebutkan di atas, tambahkan kode yang diberikan di bawah, setelah di mana Anda menemukan // Inisialisasi Firebase.

// Inisialisasi Firebase

firebase.initializeApp(firebaseConfig);const messaging=firebase.messaging(); //Fungsi khusus dibuat untuk menjalankan layanan firebase

  getStartToken(); //Kode ini menerima pesan dari server/aplikasi Anda dan mencetak pesan ke konsol jika tab yang sama dibuka pada proyek di browser

messaging.onMessage(function(payload){console.log(“onMessage”,payload);});

2. Anda dapat menulis kode di bagian bawah dalam file js terpisah yang ada di halaman HTML Anda atau Anda dapat menambahkannya ke kode di bagian atas dalam tag <script>.

messaging.getToken() adalah fungsi yang digunakan untuk mengambil token menggunakan Firebase SDK. Jika token ditemukan, itu dikirim ke server untuk disimpan, jika tidak, izin pengguna dicari melalui fungsi RequestPermission().

setTokenSentToServer() adalah fungsi lain yang menggunakan penyimpanan lokal untuk menetapkan 1 sebagai nilai sendTokenToServer jika token telah dikirim ke server dan 0 jika token tidak dikirim ke server karena terjadinya kesalahan saat dikirim ke server atau diambil dari firebase SDK.

4. Mengirim pemberitahuan dari proyek

Mengirim-pesan-dari-proyek

Sekarang semua yang Anda perlukan untuk mengirim pemberitahuan dari proyek sudah siap, berikut adalah detail tentang bagaimana Anda dapat mengirim pemberitahuan ke pengguna akhir yang tokennya Anda ketahui-

1. Awalnya, Anda harus menerima kunci layanan. Lakukan langkah-

  • Buka konsol Firebase
  • Klik pada pengaturan proyek
  • Ketuk 'Pesan Awan'
  • Anda akan menemukan kode di bidang Kunci Server. Salin.

2. Mengirim pemberitahuan push

Mari gunakan platform tukang pos untuk mengirim pemberitahuan push web dari Firebase . Berikut adalah hal-hal yang perlu Anda lakukan adalah-

3. Atur jenis permintaan POST.

4. Masukkan URL: https://fcm.googleapis.com/fcm/send

5. Klik pada bagian Header.

Anda perlu mengisi dua header yaitu, otorisasi dan tipe konten.

· Otorisasi: Tempel kunci server yang telah Anda salin.

· Tipe konten: aplikasi/JSON (JavaScript Object Notation)

6. Sekarang klik buka bagian Body. Tempelkan token pengguna yang diambil Firebase pada saat pendaftaran pengguna.

7. Sekarang kirim permintaan. Anda akan dapat mengirim pemberitahuan push ke pengguna Anda dari server.

Perhatikan bahwa ketika Anda mengirim pemberitahuan push pertama Anda ke pengguna, browser web akan meminta izinnya untuk menerima pemberitahuan dari Anda. Hanya jika dia memberikan izin, Anda akan terus dapat mengirim dorongan. Anda dapat memastikan bahwa pengguna Anda memberikan izinnya dengan mengikuti tip pemberitahuan push kami.

Penutup Anda pasti sudah mengerti sekarang bahwa mengirim pemberitahuan push web menggunakan Firebase tidak sesulit kelihatannya. Tidak membutuhkan banyak sumber daya dan tidak memakan banyak waktu. Selain itu, menggunakan pemberitahuan push web Firebase tidak memengaruhi biaya pemeliharaan situs web atau aplikasi web Anda. Jika Anda masih memerlukan detail lebih lanjut tentang fungsinya, buka dokumentasi Firebase.

Ikuti Tur Produk

Baca juga:

  • 7 Faktor Berlebihan dari Pemberitahuan Push Web
  • Pemberitahuan Push Web | Taktik Pemasaran Email Langsung
  • 41 Statistik Pemberitahuan Push Web yang Perlu Diketahui Pemasar
  • 15 Perangkat Lunak & Alat Push Notification Terbaik di 2022 {Dibandingkan}
  • Bagaimana Pemberitahuan Push Web Efektif Dibandingkan Media Pemasaran Lainnya?