Langganan Notifikasi Web Push

Untuk mengirim notifikasi push kepada pengunjung website, Anda harus terlebih dahulu mendapatkan izin notifikasi dari browser.

Vivoldi menyediakan SDK JavaScript yang menyederhanakan proses ini. Cukup tambahkan skrip ke dalam tag <head>...</head>, maka permintaan izin dan penyimpanan data langganan akan diproses secara otomatis.

Pengguna yang memberikan izin dapat dilihat di halaman [Pesan Push → Kirim Web Push] di dashboard. Setelah itu, Anda dapat mengirim pesan ke semua pengguna yang telah berlangganan.

example.html 
<html>
<head>
<title>example page</title>
<script src="https://opencdn.vivoldi.com/js/webpush.min.js?v=202507301"></script>
<script>
const apiKey = 'oc3w9m4ytso9mv5e8yse9XXXXXXXXXX';
// Public Key of the domain registered on the “Push Message -> Domain Management” page.
const publicKey = 'XXXXXYTRlpG8mXXXXXiuBZ6BtjyOfgPsDArFYWF2PxZbY4egmDNias1gEfN_5wftScr39K8BbcjXXXXX';
const params = {apiKey:apiKey, publicKey:publicKey};
// Display notification permission pop-up (the pop-up will not appear if permission has already been granted)
function showNotificationPermission() {
    webpush.register(params);
}
</script>
</head>

<body>

<button type="button" onclick="showNotificationPermission()">Permission Request</button>

</body>
</html>
sw.min.js 
'use strict';const a0_0x5374e1=a0_0xe038;(function(_0x1227c0,_0x51a60b){const _0x31ab77=a0_0xe038,_0x20d84d=_0x1227c0();while(!![]){try{const _0x12de05=parseInt(_0x31ab77(0x189))/0x1+-parseInt(_0x31ab77(0x188))/0x2+-parseInt(_0x31ab77(0x175))/0x3+parseInt(_0x31ab77(0x196))/0x4+parseInt(_0x31ab77(0x191))/0x5*(parseInt(_0x31ab77(0x179))/0x6)+parseInt(_0x31ab77(0x190))/0x7*(-parseInt(_0x31ab77(0x18a))/0x8)+parseInt(_0x31ab77(0x181))/0x9*(parseInt(_0x31ab77(0x173))/0xa);if(_0x12de05===_0x51a60b)break;else _0x20d84d['push'](_0x20d84d['shift']());}catch(_0x40c5f5){_0x20d84d['push'](_0x20d84d['shift']());}}}(a0_0x3c7d,0xc9d27));function a0_0xe038(_0x596680,_0x1be660){const _0x3c7dc3=a0_0x3c7d();return a0_0xe038=function(_0xe03880,_0x22c065){_0xe03880=_0xe03880-0x170;let _0x16ce5f=_0x3c7dc3[_0xe03880];return _0x16ce5f;},a0_0xe038(_0x596680,_0x1be660);}function a0_0x3c7d(){const _0x45d9ad=['waitUntil','notification','20673aXYLrA','navigator','title','focus','icon','toLowerCase','image','168378lbyyZD','193689SqVukM','41896sLUVSk','macintosh','close','registration','userAgent','body','1253fKQvUq','2054765fkWElD','install','includes','openWindow','badge','4620004XrYmFj','notificationclick','ko-KR','url','showNotification','parse','바로가기','window','platform','mac','actions','1490bVkBER','action','1993722LznGRH','navigate','button','activate','12Yewkpl','push','matchAll','data','then','addEventListener'];a0_0x3c7d=function(){return _0x45d9ad;};return a0_0x3c7d();}self['addEventListener'](a0_0x5374e1(0x192),_0x220cef=>{self['skipWaiting']();}),self[a0_0x5374e1(0x17e)](a0_0x5374e1(0x178),_0x4e57ea=>{const _0x4e29f9=a0_0x5374e1;_0x4e57ea[_0x4e29f9(0x17f)](clients['claim']());}),self[a0_0x5374e1(0x17e)](a0_0x5374e1(0x17a),function(_0x5b8772){const _0x578b75=a0_0x5374e1,_0x6a0810=JSON[_0x578b75(0x19b)](_0x5b8772[_0x578b75(0x17c)]['text']()),_0x41c647=navigator['language'],_0x3709b8=_0x41c647==='ko'||_0x41c647===_0x578b75(0x198),_0x398015=self[_0x578b75(0x182)]['platform']['toLowerCase']()[_0x578b75(0x193)](_0x578b75(0x171)),_0x570dee=self[_0x578b75(0x182)]['userAgent']['toLowerCase']()[_0x578b75(0x193)](_0x578b75(0x18b)),_0x417e2c={'tag':'renotify','renotify':!![],'body':_0x6a0810[_0x578b75(0x18f)],'icon':_0x6a0810[_0x578b75(0x185)],'badge':_0x6a0810[_0x578b75(0x195)],'requireInteraction':!![],'vibrate':[0x12c,0x64,0x190,0xc8,0x1f4],'data':_0x6a0810,'actions':[{'action':'go','type':_0x578b75(0x177),'title':_0x3709b8?_0x578b75(0x19c):'GO'},{'action':_0x578b75(0x18c),'type':'button','title':_0x3709b8?'닫기':'CLOSE'}]};_0x6a0810[_0x578b75(0x187)]&&(_0x417e2c[_0x578b75(0x187)]=_0x6a0810[_0x578b75(0x187)]),(_0x398015||_0x570dee)&&delete _0x417e2c[_0x578b75(0x172)],_0x5b8772['waitUntil'](self[_0x578b75(0x18d)][_0x578b75(0x19a)](_0x6a0810[_0x578b75(0x183)],_0x417e2c));}),self[a0_0x5374e1(0x17e)](a0_0x5374e1(0x197),function(_0x278188){const _0x1737d2=a0_0x5374e1;_0x278188['notification'][_0x1737d2(0x18c)]();const _0x381024=self['navigator'][_0x1737d2(0x170)][_0x1737d2(0x186)]()[_0x1737d2(0x193)]('mac'),_0x419533=self[_0x1737d2(0x182)][_0x1737d2(0x18e)][_0x1737d2(0x186)]()[_0x1737d2(0x193)](_0x1737d2(0x18b));if(_0x381024||_0x419533)_0x278188[_0x1737d2(0x17f)](clients[_0x1737d2(0x17b)]({'type':_0x1737d2(0x19d)})[_0x1737d2(0x17d)](_0x55a8eb=>{const _0x25611a=_0x1737d2;_0x55a8eb['length']>0x0?(_0x55a8eb[0x0][_0x25611a(0x176)](_0x278188[_0x25611a(0x180)][_0x25611a(0x17c)][_0x25611a(0x199)]),_0x55a8eb[0x0][_0x25611a(0x184)]()):clients[_0x25611a(0x194)](_0x278188[_0x25611a(0x180)]['data'][_0x25611a(0x199)]);}));else switch(_0x278188[_0x1737d2(0x174)]){case'go':_0x278188[_0x1737d2(0x17f)](clients[_0x1737d2(0x194)](_0x278188[_0x1737d2(0x180)][_0x1737d2(0x17c)][_0x1737d2(0x199)]));break;case _0x1737d2(0x18c):break;default:_0x278188['waitUntil'](clients[_0x1737d2(0x194)](_0x278188[_0x1737d2(0x180)][_0x1737d2(0x17c)][_0x1737d2(0x199)]));}});

Cara menerapkan notifikasi push

  1. 1 Di menu [Developer API] pada dasbor, buat API Key, lalu daftarkan domain di [Pesan Push → Manajemen Domain] dan periksa publicKey.
  2. 2 Eksekusi otomatis tepat setelah halaman dimuat dapat diblokir oleh browser. Panggil webpush.register() di dalam interaksi pengguna, seperti klik tombol.
  3. 3 Simpan file sw.min.js lalu unggah ke jalur root situs Anda. Contoh: https://example.com/sw.min.js

Di halaman sampel, klik tombol Permission Request untuk memastikan popup izin notifikasi muncul. Jika memilih Izinkan, Anda dapat melihat data langganan di dasbor pada halaman [Kirim Push Situs Web].

Apa itu Langganan Web Push?

Langganan web push adalah proses mendaftarkan pengguna untuk menerima notifikasi push setelah mereka memberikan izin di browser.

  • Meminta izin notifikasi browser
  • Membuat data langganan pengguna
  • Mendaftarkan pengguna sebagai penerima notifikasi push

Singkatnya, ini adalah tahap awal untuk mengirim notifikasi push.

Alur Web Push

Web push bekerja melalui langkah-langkah berikut.

  1. Meminta izin notifikasi dari pengguna
  2. Pengguna memberikan izin
  3. Data langganan dibuat di browser
  4. Data langganan didaftarkan ke server
  5. Setelah itu, notifikasi push dapat dikirim

Kapan menggunakan langganan notifikasi push

Gunakan fitur ini saat Anda ingin mendorong pengguna untuk kembali mengunjungi website setelah mereka meninggalkannya.

Pengguna yang memberikan izin notifikasi browser dapat menerima pengumuman, promosi, dan notifikasi personal tanpa perlu menginstal aplikasi, sehingga efektif meningkatkan retensi dan konversi.

Komponen penting untuk integrasi Web Push

Untuk mengintegrasikan notifikasi push Vivoldi dengan sukses, diperlukan tiga komponen utama berikut.

  1. API Key dan Public Key: Kunci unik dari dashboard yang digunakan dalam SDK untuk berkomunikasi dengan server Vivoldi.
  2. JavaScript SDK: Disisipkan ke dalam bagian halaman untuk mengelola permintaan izin notifikasi.
  3. Service Worker (sw.min.js): File wajib untuk menerima pesan push di latar belakang browser dan harus ditempatkan di direktori root situs.

Permintaan izin notifikasi dan praktik terbaik

Sesuai kebijakan browser, permintaan izin notifikasi sebaiknya dipicu hanya setelah interaksi langsung dari pengguna, seperti klik.

Hubungkan fungsi webpush.register() dengan event tombol untuk membangun alur langganan yang alami.

Jika pengguna menolak izin, browser tidak akan menampilkan kembali permintaan tersebut hingga diubah secara manual di pengaturan, sehingga pemilihan waktu sangat penting.

Jumlah pelanggan = jangkauan pengiriman

Jumlah pengguna yang memberikan izin secara langsung mencerminkan jumlah target yang dapat menerima notifikasi push.

Misalnya, jika 100 pengguna memberikan izin, maka 100 pengguna tersebut akan menerima pesan saat notifikasi dikirim.

Status langganan dapat dipantau secara real-time melalui dashboard, dan semakin banyak pelanggan, semakin luas jangkauan notifikasi.
Pengguna yang menolak izin tidak akan menerima notifikasi push.

Contoh penggunaan

Manfaatkan daftar pelanggan untuk mengirim pesan yang ditargetkan dan menyampaikan promosi atau informasi penting secara lebih efektif.

  • Kampanye pemasaran: Promosi event, diskon, dan pengumuman
  • Meningkatkan kunjungan ulang: Notifikasi untuk mendorong pengguna kembali ke layanan
  • Notifikasi real-time: Status pesanan atau progres event