Don't Show Again Yes, I would!

Membuat Web Push Notification pada Blog

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.

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

Membuat Web Push Notification pada Blog Blogger dan WordPress

6. Pilih Web Push, kemudian tekan Next

Membuat Web Push Notification pada Blog Blogger dan WordPress

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

Membuat Web Push Notification pada Blog Blogger dan WordPress

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

Membuat Web Push Notification pada Blog Blogger dan WordPress

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

Membuat Web Push Notification pada Blog Blogger dan WordPress

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.

Membuat Web Push Notification pada Blog Blogger dan WordPress

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

Membuat Web Push Notification pada Blog Blogger dan WordPress

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

Membuat Web Push Notification pada Blog Blogger dan WordPress

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

Membuat Web Push Notification pada Blog Blogger dan WordPress

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

Membuat Web Push Notification pada Blog Blogger dan WordPress

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

Membuat Web Push Notification pada Blog Blogger dan WordPress

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

Membuat Web Push Notification pada Blog Blogger dan WordPress

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.

Share:

Mangaip

Halo perkenalkan nama saya Mangaip. Saya merupakan konten kreator, influencer, dan penulis di blog ini. Jangan lupa ikuti kami di Google News. Gabung juga ke channel Telegram untuk mendapatkan terbaru Gabung Telegram ya Bestie!

Leave a Reply

Your email address will not be published. Required fields are marked *