Requirement :

  • Swift PWA

Catatan: Fitur Push Notification dan Social Login via Firebase ini hanya berjalan di Swift PWA, tidak di FE Swift Magento.

Firebase Push Notification dan Social Login

Firebase adalah tools yang disediakan google untuk mempermudah penyedia layanan website untuk mengintegrasikan fitur - fitur seperti cloud messaging (FCM), authentication, analytic, performance monitoring, etc. Beberapa layanan yang dimiliki firebase berbayar, namun yang diimplementasikan pada swift-pwa hanyalah authentication untuk social login, dan FCM untuk push notification. Keduanya ini free (tidak berbayar). Sebelum melakukan konfigurasi di Backoffice, admin perlu membuat sebuah akun di Firebase.

Firebase Push Notification

  1. Workflow Push Notification


Gambar 1. Tampilan Workflow Firebase Notification pada Swift PWA


  1. Konfigurasi Push Notification

  • Masuk ke Backoffice/Admin  > Stores > Settings > Configuration


Gambar 2. Tampilan Sidebar Stores 

  • Pilih menu Icube Extension lalu pilih menu Firebase

  • Isi field berikut pada bagian Notification


Gambar 3. Tampilan pada menu konfigurasi Firebase bagian Notification


  • Enable: Pilih Yes untuk mengaktifkan notifikasi.

  • Firebase Cloud Messaging Auth: masukan API Key yang sudah didapatkan pada Firebase.

Catatan: Anda harus mendapatkan API Key di Firebase, ikuti langkah untuk mendapatkan di Firebase Cloud Messaging API Key. 

  • Maximum Retry: maksimal notifikasi akan dikirim ketika gagal, jadi misal maksimal adalah 3 maka notifikasi tersebut akan terkirim sebanyak 3 kali apabila pengiriman pertama dan kedua gagal.

  • Klik Save Config untuk menyimpan konfigurasi.



Firebase Social Login

Sebelum konfigurasi pada Backoffice perlu masuk ke dashboard Firebase untuk memilih sosial media apa saja yang akan digunakan. 

  • Masuk pada akun Firebase Anda. Pilih menu Authentication.


Gambar 4. Tampilan pada halaman Akun pada bagian Authentication

  • Pilih menu Sign-in Method, terdapat daftar social login yang dapat digunakan. untuk mengaktifkan pada status sosial login pilih Enable dan Disable untuk menonaktifkan.

Gambar 5. Tampilan pada halaman Akun pada bagian Authentication di menu Sign-in Method


  • Scrolldown pada bagian Authorized Domains. Masukan domain website yang digunakan. Untuk menambahkan dengan klik tombol Add Domain.


Gambar 6. Tampilan pada halaman Authentication pada bagian Authentication Domain


  • Masuk ke Backoffice/Admin  > Stores > Settings > Configuration


Gambar 7. Tampilan Sidebar Stores

  • Pilih menu Icube Extension lalu pilih menu Firebase

  • Isi field berikut pada bagian Social Login

Gambar 8. Tampilan pada menu Firebase bagian Social Login

Untuk mengetahui Project Id, silakan masuk ke akun Firebase lalu pilih menu Project Settings dan pilih menu General.


Gambar 9. Tampilan pada Dashboard Firebase bagian Project Settings

  • Sign-in Method: Digunakan untuk menampilkan tombol sosial media yang apa saja yang akan tampil di frontend. Pastikan sosial media sudah di-enable juga di Firebase  pada tahap ini.






Gambar 10. Tampilan pada menu Firebase bagian Social Login





Tampilan Push Notification

  1. Notifikasi pada Desktop


Gambar 11 Tampilan Notifikasi yang sudah masuk pada MacOS 


Gambar 12. Tampilan Notifikasi yang sudah masuk pada dekstop Windows



  1. Notifikasi pada Mobile




Gambar 13. Tampilan Notifikasi yang sudah masuk pada dekstop