Ahmad Sanusi Official Let’s Talk
Ahmad Sanusi Official Website
  • Home
  • About
  • Project
  • Blog
  • Al Quran Digital
  • Al Quran Digital Lite
  • Contact

Tutorial Lengkap Firebase Cloud Messaging (FCM) untuk Notifikasi Real-Time Web & Mobile (2026)

Tutorial Lengkap Firebase Cloud Messaging (FCM) untuk Notifikasi Real-Time Web & Mobile (2026)
  • Ahmad Sanusi
    Written by

    Ahmad Sanusi

  • Category

    PHP Javascript

  • Date

    2 Februari 2026

1. Apa Itu Firebase Cloud Messaging (FCM)?

Firebase Cloud Messaging (FCM) adalah layanan gratis dari Google yang digunakan untuk mengirim push notification secara real-time ke aplikasi Web, Android, dan iOS.

Dengan FCM, kamu bisa:

  • Mengirim notifikasi instan ke user

  • Mengirim pesan berbasis event (komentar, like, transaksi)

  • Menjangkau user meskipun browser sedang tidak aktif

FCM banyak digunakan pada aplikasi modern seperti media sosial, dashboard admin, e-commerce, dan sistem notifikasi internal.


2. Kapan Sebaiknya Menggunakan FCM?

Gunakan FCM jika aplikasi kamu membutuhkan:

  • Notifikasi real-time

  • Dukungan multi-platform (Web & Mobile)

  • Skalabilitas tinggi

  • Sistem push notification yang stabil dan gratis

Jika aplikasi hanya membutuhkan refresh data sederhana, FCM tidak selalu diperlukan. Namun untuk pengalaman user modern, FCM adalah standar.


3. Cara Kerja Firebase Cloud Messaging

Alur kerja FCM secara umum adalah:

  1. User membuka website

  2. Browser meminta izin notifikasi

  3. Firebase menghasilkan FCM Token

  4. Token disimpan di database

  5. Backend mengirim pesan ke Firebase

  6. Firebase meneruskan notifikasi ke device user

Token berfungsi sebagai identitas unik dari browser atau device user.


4. Persiapan Implementasi FCM

Yang perlu dipersiapkan:

  • Akun Google

  • Project Firebase

  • Website menggunakan HTTPS

  • Backend server (PHP, Node.js, dll)

Catatan:
Firebase Cloud Messaging wajib HTTPS, kecuali saat menggunakan localhost untuk development.


5. Membuat Project Firebase dan Konfigurasi Dasar

Langkah singkat:

  1. Masuk ke Firebase Console

  2. Buat project baru

  3. Aktifkan Cloud Messaging

  4. Tambahkan aplikasi Web

  5. Simpan konfigurasi:

    • API Key

    • Project ID

    • Messaging Sender ID

    • App ID

Data ini akan digunakan pada frontend.

6. Implementasi FCM di Frontend (Web)

Tambahkan Firebase SDK ke halaman website:

<script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-messaging-compat.js"></script>

Inisialisasi Firebase:

const firebaseConfig = {
 apiKey: "API_KEY",
 authDomain: "PROJECT_ID.firebaseapp.com",
 projectId: "PROJECT_ID",
 messagingSenderId: "SENDER_ID",
 appId: "APP_ID"
};
firebase.initializeApp(firebaseConfig);
const messaging = firebase.messaging();

7. Mendapatkan dan Menyimpan FCM Token

Request izin notifikasi dan ambil token:

Notification.requestPermission().then(permission => {
 if (permission === 'granted') {
   messaging.getToken({ vapidKey: 'VAPID_KEY' })
     .then(token => {
       console.log(token);
       // kirim token ke backend untuk disimpan
     });
 }
});

Token ini sebaiknya disimpan di database dan dikaitkan dengan user ID.

8. Mengirim Notifikasi dari Backend (PHP)

Contoh pengiriman notifikasi menggunakan PHP dan cURL:

$payload = [
 'to' => $token,
 'notification' => [
   'title' => 'Notifikasi Baru',
   'body'  => 'Ada komentar baru di postingan kamu'
 ]
];
$headers = [
 'Authorization: key=SERVER_KEY',
 'Content-Type: application/json'
];
$ch = curl_init('https://fcm.googleapis.com/fcm/send');
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($payload));
$response = curl_exec($ch);
curl_close($ch);

9. Menampilkan Notifikasi di Browser

Gunakan service worker (firebase-messaging-sw.js):

self.addEventListener('push', function(event) {
 const data = event.data.json();
 self.registration.showNotification(data.notification.title, {
   body: data.notification.body
 });
});

10. Best Practice Menggunakan FCM

  • Simpan token berdasarkan user

  • Update token jika berubah

  • Hindari spam notifikasi

  • Gunakan topic untuk skala besar

  • Pisahkan notifikasi penting dan promosi


11. Error Umum dan Cara Mengatasinya

  • Notification blocked
    User menolak izin notifikasi

  • Invalid token
    Token sudah kadaluarsa atau berubah

  • Notifikasi tidak muncul
    Service worker tidak terdaftar dengan benar


12. Penutup

Firebase Cloud Messaging adalah solusi notifikasi real-time yang praktis, gratis, dan scalable. Dengan implementasi yang tepat, FCM dapat meningkatkan engagement dan pengalaman pengguna secara signifikan.

FCM sangat cocok digunakan untuk aplikasi media sosial, sistem komentar, dashboard admin, dan aplikasi berbasis event lainnya.

 

Share:
Javascript PHP
Blog

Popular post

Cara Mengetahui Akun Instagram Sedang Dipantau atau Diawasi Orang Lain
  • 9 Agustus 2024

Cara Mengetahui Akun Instagram Sedang Dipantau atau Diawasi Orang Lain

Cara Mengatasi Error ONLY_FULL_GROUP_BY di Database MySQL
  • 8 Juli 2021

Cara Mengatasi Error ONLY_FULL_GROUP_BY di Database MySQL

Cara Menghapus Cache Git
  • 18 November 2023

Cara Menghapus Cache Git

Membuat Format Tanggal Hijriyah Bahasa Indonesia Dengan Librari PHP
  • 23 Agustus 2021

Membuat Format Tanggal Hijriyah Bahasa Indonesia Dengan Librari PHP

Le t’s work together

Based in Indonesia |

Looking for a hectic web developer?

-

Want a more in-depth look at my history?

-

©2026 Ahmad Sanusi Official Website, All Rights Reserved

Back to Top