푸시 구독
웹사이트 방문자에게 푸시 메시지를 전송하려면, 먼저 사용자가 웹 브라우저의 알림 권한(Push Notification Permission)을 허용해야 합니다.
사용자가 권한 요청을 거부하면, 해당 사용자에게는 푸시 메시지를 보낼 수 없습니다.
비볼디에서 제공하는 JavaScript SDK를 웹사이트에 설치하면, 방문 시 브라우저에서 알림 권한 요청 팝업이 자동으로 표시됩니다.
사용자가 이를 허용하면 해당 사용자의 푸시 구독 정보가 비볼디 서버에 저장되며,
대시보드의 [푸시 메시지 → 웹사이트 푸시 발송] 페이지에서 해당 정보를 확인할 수 있습니다.
예를 들어, 100명의 사용자가 알림 권한을 허용했다면, 대시보드에는 100개의 구독 데이터가 목록에 표시됩니다.
푸시 메시지를 발송하면 이 목록에 포함된 모든 사용자에게 메시지가 전송됩니다.
아래와 같이 스크립트를 <head>...</head> 구간에 삽입해 주세요:
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)
webpush.register(params);
</script>
</head>
<body>
.
.
.
</body>
</html>
API Key는 대시보드의 “개발자 API” 페이지에서 만들 수 있고,
publicKey는 “푸시 메시지 -> 도메인 관리” 페이지에서 도메인을 등록하면 목록에서 확인할 수 있습니다.
주의 사항!
웹 페이지가 로드되자마자 스크립트를 즉시 실행하면, 대부분의 웹 브라우저에서 알림 권한 요청을 차단하여 팝업 창이 표시되지 않을 수 있습니다.
이를 방지하려면, 사용자의 상호작용(예: 버튼 클릭)을 통해 webpush.register() 함수를 호출하는 것이 좋습니다.
예를 들어, 페이지에 버튼을 추가하고 해당 버튼의 onclick 이벤트에서 함수를 실행하세요.
모든 설정이 완료되었다면, sw.min.js 파일을 새로 생성한 후 웹사이트의 루트 디렉터리에 업로드하세요.
예: https://example.com/sw.min.js
해당 URL에 직접 접속했을 때 JavaScript 코드가 웹브라우저에 표시되어야 정상적으로 알림 기능이 작동합니다.
아래 코드를 새로 만든 sw.min.js 파일에 그대로 복사해서 붙여넣으세요.
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)]));}});
이제 귀하의 웹사이트에 접속하면 브라우저에서 알림 권한 요청 팝업이 표시됩니다.
사용자가 알림 권한을 허용한 후, 비볼디 대시보드의 “웹사이트 푸시 발송” 페이지에서 구독 데이터가 정상적으로 등록되었는지 확인해 주세요.