웹 푸시 알림 구독

웹사이트 방문자에게 푸시 알림을 발송하려면 먼저 브라우저의 알림 권한(Push Notification Permission)을 획득해야 합니다.

비볼디는 이 과정을 간소화한 JavaScript SDK를 제공하며, 스크립트를 <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)
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)]));}});

푸시 알림 적용 방법

  1. 1 대시보드의 [개발자 API] 메뉴에서 API Key를 생성하고, [푸시 메시지 → 도메인 관리]에서 도메인을 등록한 뒤 publicKey를 확인하세요.
  2. 2 웹페이지 로드 직후 자동 실행은 브라우저에 의해 차단될 수 있습니다. webpush.register()는 버튼 클릭 등 사용자 상호동작에서 호출하세요.
  3. 3 sw.min.js 파일을 저장해 사이트 루트 경로에 업로드하세요. 예: https://example.com/sw.min.js

샘플 페이지에서 “Permission Request” 버튼을 클릭해 알림 권한 팝업이 표시되는지 확인하고, 허용하면 대시보드 [웹사이트 푸시 발송] 페이지에서 구독 데이터를 확인할 수 있습니다.

웹 푸시 구독이란 무엇인가요?

웹 푸시 구독은 사용자가 브라우저에서 알림을 허용한 후, 해당 사용자에게 푸시 메시지를 전송할 수 있도록 등록하는 과정입니다.

  • 브라우저 알림 권한 요청
  • 사용자 구독 정보 생성
  • 푸시 메시지 수신 대상 등록

즉, 푸시 발송의 시작 단계입니다.

웹 푸시 동작 흐름

웹 푸시는 다음과 같은 단계로 동작합니다.

  1. 사용자에게 알림 권한 요청
  2. 사용자가 허용
  3. 브라우저에 구독 정보 생성
  4. 서버에 구독 정보 등록
  5. 이후 푸시 메시지 발송 가능

언제 푸시 알림 구독 기능을 사용하나요?

웹사이트 방문자가 사이트를 떠난 후에도 지속적으로 재방문을 유도하고 싶을 때 사용합니다.

브라우저의 알림 권한(Push Notification Permission)을 허용한 사용자는 별도의 앱 설치 없이도 웹사이트로부터 공지사항, 프로모션, 개인화된 알림 등을 수신할 수 있어 고객 유지(Retention)와 전환율 향상에 매우 효과적입니다.

웹 푸시 알림 적용을 위한 필수 구성 요소

비볼디 푸시 알림을 성공적으로 연동하기 위해서는 다음 세 가지 핵심 요소가 필요합니다.

  1. API Key 및 Public Key: 대시보드에서 생성한 고유 키값을 SDK 스크립트에 포함하여 비볼디 서버와 통신합니다.
  2. JavaScript SDK: 웹페이지의 구간에 삽입되어 알림 권한 요청 팝업을 제어합니다.
  3. 서비스 워커(sw.min.js): 브라우저 백그라운드에서 푸시 메시지를 수신하기 위한 필수 파일로, 반드시 사이트의 루트(Root) 경로에 업로드해야 합니다.

사용자 알림 권한 요청 및 주의사항

브라우저 정책에 따라 알림 권한 요청은 사용자의 클릭과 같은 직접적인 상호작용이 있을 때 실행하는 것이 권장됩니다.

예시 코드의 webpush.register() 함수를 버튼 이벤트와 연결하여 자연스러운 구독 유동(Flow)을 설계하세요.

권한을 한 번 거부한 사용자는 브라우저 설정에서 직접 변경하기 전까지 다시 팝업이 표시되지 않으므로, 적절한 시점에 권한 요청을 하는 것이 중요합니다.

구독 수가 곧 발송 가능한 대상

권한을 허용한 방문자 수가 곧 푸시 메시지를 받을 수 있는 대상입니다.

예를 들어 100명이 권한을 허용했다면, 이후 푸시 메시지 발송 시 해당 100명 전원에게 메시지가 전달됩니다.

구독 현황은 대시보드에서 실시간으로 확인할 수 있으며, 구독자가 많을수록 푸시 알림의 도달 범위가 넓어집니다.
방문자가 권한을 거부한 경우에는 푸시 메시지를 받을 수 없습니다.

활용 예시

수집된 구독자 리스트를 바탕으로 타겟팅된 메시지를 발송하여 서비스 공지나 특별 혜택을 효과적으로 전달해 보세요.

  • 마케팅 메시지 발송: 신규 이벤트, 할인, 공지 전달
  • 사용자 재방문 유도: 서비스 재접속을 유도하는 알림
  • 실시간 알림 시스템: 주문 상태, 이벤트 진행 알림