Web-Push-Abonnement

Um Push-Benachrichtigungen an Website-Besucher zu senden, müssen Sie zunächst die Push-Benachrichtigungsberechtigung des Browsers einholen.

Vivoldi stellt ein JavaScript SDK bereit, das diesen Prozess vereinfacht. Durch das Einfügen des Skripts in den <head>...</head>-Bereich werden Berechtigungsanfragen und das Speichern der Abonnementdaten automatisch ausgeführt.

Benutzer mit erteilter Berechtigung können auf der Seite [Push-Nachrichten → Web-Push senden] im Dashboard angezeigt werden. Anschließend können Sie Nachrichten an alle Abonnenten senden.

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

So richten Sie Push-Benachrichtigungen ein

  1. 1 Erstellen Sie im Menü [Developer API] des Dashboards einen API Key, registrieren Sie anschließend Ihre Domain unter [Push-Nachrichten → Domainverwaltung] und überprüfen Sie den publicKey.
  2. 2 Eine automatische Ausführung direkt nach dem Laden der Seite kann vom Browser blockiert werden. Rufen Sie webpush.register() innerhalb einer Benutzerinteraktion wie einem Button-Klick auf.
  3. 3 Speichern Sie die Datei sw.min.js und laden Sie sie in das Stammverzeichnis Ihrer Website hoch. Beispiel: https://example.com/sw.min.js

Klicken Sie auf der Beispielseite auf die Schaltfläche Permission Request, um zu prüfen, ob das Popup für die Benachrichtigungsberechtigung angezeigt wird. Wenn Sie Zulassen auswählen, können Sie die Abonnementdaten im Dashboard auf der Seite [Website-Push-Versand] einsehen.

Was ist ein Web-Push-Abonnement?

Ein Web-Push-Abonnement ist der Prozess, bei dem ein Benutzer registriert wird, um Push-Benachrichtigungen zu empfangen, nachdem er die Browser-Berechtigung erteilt hat.

  • Anfordern der Browser-Benachrichtigungsberechtigung
  • Erstellen der Abonnementdaten des Benutzers
  • Registrierung als Empfänger von Push-Benachrichtigungen

Kurz gesagt ist dies der Startpunkt für den Versand von Push-Benachrichtigungen.

Ablauf von Web Push

Web Push funktioniert in den folgenden Schritten.

  1. Anfordern der Benachrichtigungsberechtigung beim Benutzer
  2. Benutzer erteilt die Berechtigung
  3. Abonnementdaten werden im Browser erstellt
  4. Abonnementdaten werden auf dem Server registriert
  5. Anschließend können Push-Benachrichtigungen gesendet werden

Wann Push-Abonnements verwenden

Verwenden Sie diese Funktion, wenn Sie Besucher auch nach dem Verlassen Ihrer Website erneut ansprechen möchten.

Benutzer, die die Browser-Benachrichtigungsberechtigung erteilen, können Mitteilungen, Aktionen und personalisierte Nachrichten ohne App-Installation erhalten, was die Kundenbindung und Konversionsrate verbessert.

Erforderliche Komponenten für Web-Push

Für die erfolgreiche Integration von Vivoldi Web-Push sind die folgenden drei Komponenten erforderlich.

  1. API Key und Public Key: Eindeutige Schlüssel aus dem Dashboard, die im SDK verwendet werden, um mit den Vivoldi-Servern zu kommunizieren.
  2. JavaScript SDK: Wird im -Bereich der Webseite eingebunden und steuert die Anfrage nach Benachrichtigungsberechtigungen.
  3. Service Worker (sw.min.js): Erforderliche Datei zum Empfang von Push-Nachrichten im Hintergrund, die im Root-Verzeichnis der Website platziert werden muss.

Anforderung von Benachrichtigungsberechtigungen & Hinweise

Gemäß den Browserrichtlinien sollten Anfragen für Benachrichtigungsberechtigungen nur nach einer direkten Benutzerinteraktion, wie einem Klick, ausgelöst werden.

Verknüpfen Sie die Funktion webpush.register() aus dem Beispielcode mit einem Button-Event, um einen natürlichen Abonnement-Flow zu gestalten.

Wenn ein Benutzer die Berechtigung einmal ablehnt, wird das Popup nicht erneut angezeigt, bis es manuell in den Browsereinstellungen geändert wird. Daher ist der richtige Zeitpunkt entscheidend.

Abonnenten = erreichbare Empfänger

Die Anzahl der Benutzer, die die Berechtigung erteilen, entspricht direkt der Anzahl der Empfänger, die Push-Benachrichtigungen erhalten können.

Wenn beispielsweise 100 Benutzer zustimmen, erhalten alle 100 die Nachricht bei einer Push-Sendung.

Der Abonnementstatus kann in Echtzeit im Dashboard überprüft werden, und je mehr Abonnenten vorhanden sind, desto größer ist die Reichweite.
Benutzer, die die Berechtigung ablehnen, können keine Push-Benachrichtigungen erhalten.

Anwendungsfälle

Nutzen Sie Ihre Abonnentenliste, um gezielte Nachrichten zu versenden und Ankündigungen oder Angebote effektiver zu kommunizieren.

  • Marketingkampagnen: Events, Rabatte und Ankündigungen bewerben
  • Reaktivierung: Benachrichtigungen zur Rückkehr auf Ihre Plattform
  • Echtzeit-Benachrichtigungen: Bestellstatus oder laufende Events