Membuat Web Push Notification
Jumat, Januari 18, 2019
Pada kali ini saya bakal memberikan tutorial mengenai Cara Membuat Web Push Notification yang berfungsi selaku notifikasi pembaruan terbaru sebuah website yang tentu saja telah banyak sekali situs profesional serta situs besar lainnya yang telah menggunakan ini. Jadi, buat kamu pengguna platform blogger jangan bersedih hati karna kamu juga bisa menggunakan Web Push Notification ini agar bisa menjangkau pengunjung serta lebih dekat dengan memberikan pemberitahuan mengenai pembaruan situs kamu.
Web Push Notification merupakan sebuah pesan berupa notifikasi yang muncul dikala halaman awal website dimuat. Notifikasi yang muncul ini berisi pesan yang meminta pada pengunjung memberikan izin akses buat menampilkan notifikasi mengenai aktivitas terbaru situs kamu setiap kali ada post baru pada perangkat yang tengah digunakan si pengguna.
Berikut ini contoh Web Push Notification yang muncul:
Web Push Notification ini bakal muncul pada halaman awal yang tengah dimuat oleh pengunjung. Apabila si pengunjung menekan "Allow", maka si pengunjung bakal mendapatkan notifikasi apabila terdapat aktivitas terbaru situs kamu di perangkatnya baik itu desktop atau perangkat mobile.
Berikut ini contoh notifikasi yang bakal muncul di perangkat si pengguna:
Berikut ini contoh Mobile Push Notification:
Cara Membuat Web & Mobile Push Notification
Langkah 1
Silahkan kunjungi situs OneSignal kemudian lakukan pendaftaran. kamu juga bisa menggunakan akun Facebook, Google, atau Github, buat membuat akun baru.
Langkah 2
Selanjutnya, silahkan pilih "ADD APP", kemudian buat nama app sesuai dengan kebutuhan kamu. Misalnya, "Notifikasi situs blog saya", atau gunakan judul yang digunakan situs blog kamu.
Langkah 3
Silahkan pilih Web Push.
Langkah 4
Selanjutnya, silahkan pilih Wordpress Plugin or Website Builder, kemudian pilih platform Blogger.
Langkah 5
Silahkan scroll halaman ke bawah, kemudian tuliskan nama situs, alamat, serta tambahkan gambar icon yang bakal kamu gunakan.
Langkah 6
Silahkan scroll kembali halaman ke bawah, kemudian buat judul, isi pesan. jika telah selesai, silahkan pilih tombol "Save".
Langkah 7
tahap terakhir, kamu bakal diarahkan pada halaman berisi kode yang perlu kamu simpan di template blogger kamu. Silahkan salin kode tersebut, kemudian simpan pada head template blog atau lebih tepatnya sebelum kode </head>. Dibawah ini contoh kode yang perlu disimpan.
<head>
...
<script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async=""></script>
<script>
var OneSignal = window.OneSignal || [];
OneSignal.push(function() {
OneSignal.init({
appId: "0a13cb1f-1492-4724-ae35-3c28f5c47ec3",
});
});
</script>
...
</head>
Pada tahap ini kamu telah berhasil membuat Web Push Notification di situs blog. Untuk pengecekan, silahkan kunjungi halaman utama situs blog kamu. Demikian mengenai Cara Membuat Web Push Notification semoga bermanfaat. Apabila ada hal yang hendak ditanyakan, silahkan bertanya lewat kolom komentar dibawah ini, Terima kasih.
Baca Juga
Web Push Notification ini bakal muncul pada halaman awal yang tengah dimuat oleh pengunjung. Apabila si pengunjung menekan "Allow", maka si pengunjung bakal mendapatkan notifikasi apabila terdapat aktivitas terbaru situs kamu di perangkatnya baik itu desktop atau perangkat mobile.
Berikut ini contoh notifikasi yang bakal muncul di perangkat si pengguna:
Berikut ini contoh Mobile Push Notification:
Cara Membuat Web & Mobile Push Notification
Langkah 1
Silahkan kunjungi situs OneSignal kemudian lakukan pendaftaran. kamu juga bisa menggunakan akun Facebook, Google, atau Github, buat membuat akun baru.
Langkah 2
Selanjutnya, silahkan pilih "ADD APP", kemudian buat nama app sesuai dengan kebutuhan kamu. Misalnya, "Notifikasi situs blog saya", atau gunakan judul yang digunakan situs blog kamu.
Langkah 3
Silahkan pilih Web Push.
Selanjutnya, silahkan pilih Wordpress Plugin or Website Builder, kemudian pilih platform Blogger.
Langkah 5
Silahkan scroll halaman ke bawah, kemudian tuliskan nama situs, alamat, serta tambahkan gambar icon yang bakal kamu gunakan.
Langkah 6
Silahkan scroll kembali halaman ke bawah, kemudian buat judul, isi pesan. jika telah selesai, silahkan pilih tombol "Save".
Langkah 7
tahap terakhir, kamu bakal diarahkan pada halaman berisi kode yang perlu kamu simpan di template blogger kamu. Silahkan salin kode tersebut, kemudian simpan pada head template blog atau lebih tepatnya sebelum kode </head>. Dibawah ini contoh kode yang perlu disimpan.
<head>
...
<script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" async=""></script>
<script>
var OneSignal = window.OneSignal || [];
OneSignal.push(function() {
OneSignal.init({
appId: "0a13cb1f-1492-4724-ae35-3c28f5c47ec3",
});
});
</script>
...
</head>
Pada tahap ini kamu telah berhasil membuat Web Push Notification di situs blog. Untuk pengecekan, silahkan kunjungi halaman utama situs blog kamu. Demikian mengenai Cara Membuat Web Push Notification semoga bermanfaat. Apabila ada hal yang hendak ditanyakan, silahkan bertanya lewat kolom komentar dibawah ini, Terima kasih.
