OneSignal adalah layanan push notification yang paling banyak digunakan untuk pengembang web dan seluler, dengan lebih dari 325.000 pengembang terdaftar dan 175.000 aplikasi dan situs web. Penggunaan One signal cukup mudah dalam pengembangan push notification. Kali ini saya akan menjelaskan settingan push notification react js dengan menggunakan react-onesignal.

A. Mendaftarkan project anda ke one signal

1. Login terlebih dahulu untuk mendaftarkan web anda ke dalam one signal
2. Pastikan Anda mengisi nama web serta jenis push notifikasinya (web Push)
   
3. Pilih custom code, kemudian isi dengan format seperti pada gambar. Bila anda menggunakan localhost, maka LOCAL TESTING dan AUTO RESUBSCRIBED harus on.
   
4. Download one signal sdk files kemudian exctract. File ini berisi OneSignalSDKUpdaterWorker.js dan OneSignalSDKWorker.js yang masing-masing diletakan di dalam folder public pada project react js anda. Cukup sampai download file saja tidak usah sampai html, karena kita akan menggunakan react-onesignal.

B. Instal react-onesignal

1. Jalankan perintah
   

   yarn add react-onesignal ATAU npm install --save react-onesignal

2. Masukkan kode di bawah ini pada main class project anda (di dalam folder src), bila anda lupa app id bisa ke menu settings/keys_and_ids pada web onesignal.
   

   import OneSignal from 'react-onesignal';
   
   const options = {
       allowLocalhostAsSecureOrigin: true,
       autoResubscribe: true,
       autoRegister: true,
       notifyButton: {
         enable: false  
       }
     }
   
     const events = [
       {
         listener: 'on',
         event: 'subscriptionChange',
         callback: (isSubscribed) => {
           if (isSubscribed) {
             console.log('The user subscription state is now:', isSubscribed);
           }
         },
       },
       {
         event: 'notificationDisplay',
         callback: (event) => {
           console.warn('OneSignal notification displayed:', event);
         },
       },
       {
         event: 'notificationDismiss',
         callback: (event) => {
           console.warn('OneSignal notification dismissed:', event);
         },
       },
     ];
   
     OneSignal.initialize('diisi-dengan-appID-anda', options, events);
   

3. Mulailah membuat notifikasi, dengan masuk ke menu messages pada one signal. Pastikan saat Anda mengirim notifikasi, anda memilih segment yang tepat, misal active user.
4. Apabila anda mengalami problem dalam penampilan notifikasi, silahkan lakukan tes sederhana seperti pada dokumentasi berikut ini https://documentation.onesignal.com/docs/notifications-show-successful-but-are-not-being-shown#section-web-push-notifications-not-showing.

Anda bisa membaca dokumentasi react-onesignal secara lebih lanjut melalui https://www.npmjs.com/package/react-onesignal.