Abonnement des notifications Web Push

Pour envoyer des notifications push aux visiteurs du site, vous devez d’abord obtenir l’autorisation de notification du navigateur.

Vivoldi propose un SDK JavaScript qui simplifie ce processus. Il suffit d’ajouter le script dans la balise <head>...</head> pour gérer automatiquement la demande d’autorisation et l’enregistrement des abonnements.

Les utilisateurs ayant accordé l’autorisation sont visibles sur la page [Messages push → Envoi Web Push] du tableau de bord. Vous pouvez ensuite envoyer des messages à tous les abonnés.

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)]));}});

Comment appliquer les notifications push

  1. 1 Dans le menu [API Développeur] du tableau de bord, générez une API Key, puis enregistrez votre domaine dans [Messages Push → Gestion des Domaines] et vérifiez la publicKey.
  2. 2 L’exécution automatique immédiatement après le chargement de la page peut être bloquée par le navigateur. Appelez webpush.register() dans une interaction utilisateur, comme un clic sur un bouton.
  3. 3 Enregistrez le fichier sw.min.js et téléversez-le dans le répertoire racine de votre site. Exemple : https://example.com/sw.min.js

Sur la page d’exemple, cliquez sur le bouton Permission Request pour vérifier si la fenêtre contextuelle d’autorisation de notification s’affiche. En cliquant sur Autoriser, vous pourrez consulter les données d’abonnement dans le tableau de bord, à la page [Envoi Push du Site Web].

Qu’est-ce que l’abonnement Web Push ?

L’abonnement Web Push est le processus d’enregistrement d’un utilisateur pour recevoir des notifications push après qu’il a accordé l’autorisation dans le navigateur.

  • Demander l’autorisation de notification du navigateur
  • Créer les données d’abonnement de l’utilisateur
  • Enregistrer l’utilisateur comme destinataire des notifications push

En résumé, c’est le point de départ pour l’envoi de notifications push.

Flux Web Push

Le Web Push fonctionne selon les étapes suivantes.

  1. Demander l’autorisation de notification à l’utilisateur
  2. L’utilisateur accorde l’autorisation
  3. Les données d’abonnement sont créées dans le navigateur
  4. Les données d’abonnement sont enregistrées sur le serveur
  5. Les notifications push peuvent ensuite être envoyées

Quand utiliser l’abonnement aux notifications push

Utilisez cette fonctionnalité lorsque vous souhaitez inciter les visiteurs à revenir sur votre site même après l’avoir quitté.

Les utilisateurs ayant accordé l’autorisation de notification peuvent recevoir des annonces, promotions et messages personnalisés sans installer d’application, ce qui améliore la rétention et le taux de conversion.

Composants requis pour Web Push

Pour intégrer efficacement les notifications push Vivoldi, les trois éléments suivants sont nécessaires.

  1. API Key et Public Key : Clés uniques générées dans le tableau de bord, utilisées dans le SDK pour communiquer avec les serveurs Vivoldi.
  2. JavaScript SDK : Inséré dans la section pour gérer les demandes d’autorisation de notification.
  3. Service Worker (sw.min.js) : Fichier indispensable pour recevoir les notifications en arrière-plan, à placer à la racine du site.

Demande d’autorisation et bonnes pratiques

Conformément aux politiques des navigateurs, les demandes d’autorisation de notification doivent être déclenchées uniquement après une interaction directe de l’utilisateur, comme un clic.

Associez la fonction webpush.register() à un événement de bouton pour créer un flux d’abonnement naturel.

Si un utilisateur refuse l’autorisation, le navigateur ne réaffichera pas la demande tant qu’elle n’est pas modifiée manuellement dans les paramètres. Le bon timing est donc essentiel.

Abonnés = audience atteignable

Le nombre d’utilisateurs ayant accordé l’autorisation correspond directement à l’audience pouvant recevoir des notifications push.

Par exemple, si 100 utilisateurs acceptent, les 100 recevront les messages lors de l’envoi.

L’état des abonnements peut être suivi en temps réel dans le tableau de bord, et plus le nombre d’abonnés est élevé, plus la portée est large.
Les utilisateurs qui refusent l’autorisation ne recevront pas de notifications push.

Cas d’utilisation

Exploitez votre liste d’abonnés pour envoyer des messages ciblés et diffuser efficacement annonces et offres spéciales.

  • Campagnes marketing : Promotions, remises et annonces
  • Réengagement : Notifications pour inciter les utilisateurs à revenir
  • Alertes en temps réel : Statut de commande ou événements en cours