Skip to main content
MANGAIP BLOG

follow us

Membuat Web Push Notification pada Blog


Mangaip.com - Pernahkah sobat melihat notifikasi pemberitahuan untuk berlangganan ketika mengunjungi salah satu web atau blog? Itu namanya Web Push Notifications.
Apabila pengunjung menekan tombol Allow, maka nanti pengunjung tersebut akan mendapatkan notifikasi di layar laptop, mobile atau smartphone apabila pemilik web/blog mengupdate artikel terbaru.
Manfaatnya tentu sangat besar, hampir mirip dengan berlangganan melalui email. Tapi dengan adanya Web Push ini, pengunjung yang telah berlangganan akan mendapatkan pemberitahuan secara cepat.
penggunaan Web Push ini sangat cocok dijadikan sebagai media promosi bagi blog atau website. Facebook saja memakai Web Push Notifications.
Lalu bagaimana cara membuat Web Push untuk sebuah blog. Mamang akan sedikit memberikan tutorialnya.
Baca Juga:

Mendaftar One Signal Push Notification

Ada beberapa developer yang menyediakan aplikasi Web Push secara gratis dan premium. Tentu dengan beragam fitur yang disediakan.Tanpa mengecualikan developer lain, maka mimin memilih One Signal sebagai pilihan yang terbaik kalau versi gratisan.
Berikut langkah-langkah membuat aplikasi Web Push Notifications di One Signal,
1. Masuk ke halaman website One Sginal
2. Silahkan mendaftar, isi kolom yang tersedia
3. Mamang anggap kalian sudah memiliki akun One Signal.
4. Pilih Add a new app 
5. Masukan nama Aplikasinya dan kemudian tekan Create


6. Pilih Web Push, kemudian tekan Next


7. Pilih Website Builder, kemudian pilih kembali platform blog sesuai yang dimiliki sobat, bisa blogger, wordpress atau pun platform lainnya. 


Sampai disini sudah mulai paham belum? Selanjutnya mamang akan mencoba menerapkan aplikasi Web Push Notifications pada blogger. Maka bagi pengguna blogger silahkan pilih platform Blogger.

Membuat Web Push Notification pada Blogger

Setelah kalian memilih blogger, maka langkah selanjutnya yaitu sebagai berikut:


1. Isikan judul blog pada Site Name
2. Isikan url blog pada Site Url
3. Isikan url logo pada Default Icon Logo dengan dimensi 192 x 192 px
4. Isikan dengan nama blog pada Label ........OS.TC.
One signal masih belum support https untuk blogger, jadi nanti yang muncul pada web push yaitu namalabel.OS.TC
5. Selanjutnya Permission Prompt Setup


6. Silahkan tekan Subscrition Bell, atur sesuai keinginan sobat, pilih Save
7. Pilih kembali Slide Prompt, atur kembali sesuai keinginan, pilih Save
8. Scroll kembali ke bawah, pilih Welcome Notification, boleh diatur ulang atau dibiarkan saja
9. Sama halnya dengan bagian Advanced, boleh diatur atau dibiarkan saja
10. Save
Setelah itu akan muncul kembali kode yang harus diterapkan, Silahkan copy kodenya dan tempatkan kode tersebut sebelum kode </head> atau seteleh kode <head> pada template blog sobat


11. Setelah menyimpan kode tersebut pada template atau tema blog sobat, mamang saranin kalian subscribe sebagai subscriber pertama. Caranya dengan membukan web sobat, atau dengan menekan Go To My Website di web push One Signal Tadi.
12. Tekan Finish.
Sampai saat ini, untuk penerapan web push notifications pada blogger sudah selesai. Lalu bagaimana dengan blog wordpress. 

Membuat Web Push Notification pada Wordpress

Bagi pengguna wordpress untuk mendapatkan web push dipermudah dengan adanya plugin. Begitu banyak plugin yang tersedia untuk web push ini. Tapi karena kita sudah terdaftar di One Signal, jadi kita juga memilih plugin Web Push Notifications dari One Signal juga. Berikut langkahnya.
1. Masuk ke dahsboard wordpress  sobat
2. Pilih Plugin > Tambah Baru
3. Ketikan Web Push, lalu pilih OneSignal – Free Web Push Notifications. Kemudian Install > Aktifkan


4. Setelah aktif, silahkan lihat pada bilah menu dasboard wordpress sobat, pilih OneSignal Push.
5. Sampai disini, tinggalkan dulu wordpress. kita kembali lagi ke One Signal untuk mendapatakan API Key dan One Signal App ID
6. Caranya, tekan nama applikasi sobat


7. Setelah terbuka nanti akan muncul halaman setting. Kemudian pilih Keys & IDs


8. Simpan dengan baik kode One Signal APP Id dan Kode Rest Api Keys, pada notepad atau catatan lainnya.
9. Pilih kembali Platform > Edit pada menu Apple Safari


10. Nanti akan muncul Pop Ups. Silahkan isi kembali kolom Sitename dan site URL


11. Simpan kembali kode Web ID yang tersedia lalu pilih Save
Sampai disini pengaturan untuk mendapatkan ketiga kode dari One Signal telah selesai. Sekarang kita kembali ke pengaturan OneSignal Push pada blog wordpress pada langkah no.4
Untuk memasukan ke-3 kode tersebut pada wordpress silahkan ikuti langkah berikut:
1. Setelah masuk pada pengaturan OneSignal Push di wordpress, pilih Configuration


2. Geser pada bagian My Site Use an HTTPS Conection (SSL), ini khusus untuk blog yang sudah menggunakan SSL atau blog sobat diawali dengan https bukan http
3. Masukan ketiga kode yang disimpan tadi sesuai dengan kolom yang tersedia. Bagi yang belum menggunakan https atau blog sobat masih diawali dengan http, silahkan masukan label pada One Signal yang tadi. Contoh ..........OS.TC.
4. Sisanya silahkan atur sesuai keinginan sobat sendiri. Setelah itu pilih Save
5. Selesai.
Nah, untuk penerapan Web Push Notification pada blog wordpress sampai saat ini sudah selesai. Silahkan lihat hasilnya dengan mengunjungi web kalian. Mamang saranin kembali, jadikanlah kalian sebagai subscriber pertama.
Bagaimana cukup mudah kan menerapkan Web Push Notifications pada blog berbasis blogger atau wordpress?
Apabila ada yang mau mengkoreksi atau menambahkan, silahkan tinggalkan pesan pada kolom komentar. Selamat mencoba

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar