Sabtu, 21 Juli 2018

Memasang Web Push Notification di Blog Memanfaatkan Layanan Gratis dari OneSignal

Kali ini saya akan membahas tutorial untuk memasang Web Push Notification dengan memanfaatkan Layanan Gratis dari OneSignal. Tapi sebelum melanjutkan, saya mau menerangkan terlebih dulu tentang fungsi Web Push Notification ini yah teman-teman.

Ohya, karena saya juga menggunakan Fungsi Web Push Notification ini, silahkan teman-teman tekan tombol alow pada popup yang muncul diatas atau dibawah browser teman-teman yah teman-teman.

Memasang Web Push Notification di Blog Memanfaatkan Layanan Gratis dari OneSignal

Pengertian Web Push Notification

Pertama-tama saya akan jelaskan secara singkat tentang pengertian Web Push Notification kepada teman-teman. Web Push Notification adalah pesan pendek yang muncul secara otomatis di layar smartphone, anggap saja seperti SMS.

Kita sebagai pemilik Web dapat mengirimkan pesan setiap saat kepada Pengunjung Setia web kita, meskipun Pengunjung tidak sedang membuka Web kita menggunakan Browser. Ini juga berlaku untuk Pengguna Smartphone lho teman-teman.

Banyak informasi yang dapat dikirimkan menggunakan Web Push Notification, misalnya informasi hasil pertandingan olah raga, atau meminta pengguna untuk melakukan sesuatu seperti merekomendasikan software yang dapat di donwload atau bisa juga memberikan informasi mengenai Promo menarik seperti Diskon Harga, dll.

Cara Memasang Web Push Notification

Ternyata banyak sekali manfaat yang dapat kita rasakan saat menggunakan Web Push Notification didalam Blog kita ini yah teman-teman. Biasanya Web Push Notification ini digunakan oleh beberapa web-web besar. Ada juga Plugin Premium yang berfungsi untuk menampilkan Push Notification pada blog-blog Wordpress juga.

Lalu bagaimana jika kita menggunakan Blogger? Dan apakah bisa memasang Web Push Notification didalam blog?

Nah disini kita akan memanfaatkan Web Pihak Ketiga yang memberikan semua fungsi Web Push Notification pada blog kita secara gratis. Bagaimana langkah-langkahnya menggunakan Push Notification gratis ini untuk blog kita?

  1. Pertama-tama, silahkan teman-teman melakukan pendaftaran terlebih dulu pada web OneSignal. Disini teman-teman dapat melakukan pendaftaran menggunakan Facebook dan Google Mail.
  2. Pilih Add New App, dan buat nama App misalnya Kang Wira atau Notif Blog.
  3. Setelah itu akan tampil beberapa pilihan yang dapat anda gunakan seperti Apple IOS, Google Android, Web Push, Windows dan lainnya. Pada pilihan ini, silahkan teman-teman memilih Web Push lalu tombol next.
  4. Setelah itu teman-teman akan melihat 3 pilihan, karena disini teman-teman ingin memasang pada platform CMS blogger, jadi teman-teman bisa memilih pada pilihan yang kedua yaitu Wordpress Plugin or Website Builder lalu pilih Blogger.
  5. Pada langkah selanjutnya, silahkan kamu isi data-data pada setiap kolom agar sesuai dengan keperluan teman-teman seperti site name, site url, default icon, dll.

Note:
Untuk option terakhir yang berisi hooks dan lainnya kamu lewati saja. lalu tekan tombol save.

Setelah itu kamu akan diberikan kode Javascript yang dapat kamu simpan kedalam template. Biasanya kode yang diberikan akan terlihat seperti dibawah ini.

<script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async=""></script>
<script>
  var OneSignal = window.OneSignal || [];
  OneSignal.push(function() {
    OneSignal.init({
      appId: "05de33e4-d0ee-4116-a4ec-c9be0f1c23b4",
    });
  });
</script>

Kode yang saya tandai diatas adalah appID yang sudah saya buat, jadi teman-teman hanya perlu ganti appID yang saya tandai dengan appID milik teman-teman. Tapi apabila teman-teman tidak mendapati kode seperti diatas, teman-teman bisa dapatkan appID pada halaman Setting dan pilih Keys & IDs dan ambil kode pada kolom ONESIGNAL APP ID.

Ohya hampir saja lupa, kode diatas, bisa teman-teman sisipkan pada template blog, tepatnya setelah kode <head> yah teman-teman. Save template lalu teman-teman bisa coba lihat hasilnya di homepage.

Saya sengaja tidak menyertakan gambar sebagai pendukung tutorial kali ini, agar teman-teman melakukan langkah-langkahnya lebih teliti. Nah untuk settingan pada Web Push Notification akan saya lanjutkan pada artikel selanjutnya yah teman-teman. Sekian dulu artikel kali ini, semoga bermanfaat untuk teman-teman.

3 komentar:

  1. kalo user clear data browsernya, dia masih nerima notif ga kang?

    BalasHapus
    Balasan
    1. tidak mas.. notif akan di terima ketika masih ada cookies dari web / blog tersebut pada browsernya

      Hapus