Integrationsleitfaden: Web Push Integration mit EngageLab
Support-Beschreibung für Nutzer:innen aus dem Ausland je Kanal
| Kanaltyp | Nutzer:innen in anderen Regionen | Nutzer:innen aus Festlandchina | Hinweis |
|---|---|---|---|
| EngageLab | Support | Support | Standardmäßig durch SDK unterstützt |
| W3C | Support | Support | / |
Schnelltest
EngageLab WebPush Integrations-Demo und Beispiele
Vorbereitung vor der Integration
- Stellen Sie eine Domain für einen erreichbaren HTTPS-Webservice bereit, auf dem getestet und debuggt werden kann. Web Push unterstützt kein lokales Debugging und funktioniert nicht ohne HTTPS.
- Besuchen Sie Engagelab WebPush, legen Sie die Website-Domain unter Integrationseinstellungen → Web fest und tragen Sie die vorbereitete HTTPS-Domain ein.

Hinweise
Dieser Artikel ist ein Standard-Integrationsleitfaden für die Web Push Integration mit dem MTpush Web SDK.
Beschreibung
Das Web SDK bietet ein Push-Entwicklungs-Framework für Webanwendungen, das auf Browser-Benachrichtigungen und Websockets der jeweiligen Browser basiert. Es stellt eine klare API-Schnittstelle bereit, damit Drittanbieter-Anwendungen Push-Funktionen schnell integrieren können. Die Browser-Benachrichtigungen unterstützen gängige Browser wie Edge, Chrome, Safari, Firefox und Opera; Websockets werden von den meisten dieser Browser unterstützt.
Der EngageLab WebPush-Dienst unterstützt PWA Push-Benachrichtigungen. Verwenden Sie das von EngageLab WebPush bereitgestellte Web SDK, um die Web Push-Funktionalität in Ihre PWA-Anwendung zu integrieren. Folgen Sie dem Beispielcode im Leitfaden, um den Service Worker zu registrieren und die Web Push-Funktion zu initialisieren. Nach erfolgreicher Integration können Sie die EngageLab WebPush API nutzen, um Push-Benachrichtigungen an die Nutzer:innen Ihrer PWA-Anwendung zu senden.
Weitere Details finden Sie in der Dokumentation
Hauptanwendungsfälle
Benachrichtigungen und personalisierte Nachrichten.
Inhalt des Download-Pakets
- example
- Dies ist eine Webseite, die die grundlegende Nutzung des MTpush SDK demonstriert. Sie kann als Referenz dienen.
App-Informationen erhalten
Erstellen Sie eine Anwendung in der Konsole. Nach der Erstellung wird automatisch ein AppKey generiert, der die Anwendung eindeutig identifiziert. Weitere Informationen finden Sie unter Anwendungseinstellungen.
SDK integrieren
Besuchen Sie Engagelab WebPush und laden Sie das SDK herunter. Binden Sie die SDK-JS-Datei wie folgt in Ihre Webseite ein:
<script type="text/javascript" src="./webPushSdk.min.2.1.2.js"></script>
Nach der Integration der JS-Datei steht das globale Objekt MTpushInterface im Window zur Verfügung.
Hinweise
Das Paket enthält sw.xxx.js. Diese Datei ist eine Service Worker-Datei und dient zum Empfang von Nachrichten.
Das SDK lädt diese Datei standardmäßig aus dem Root-Verzeichnis.
Der maximale Geltungsbereich eines Service Workers entspricht dessen Speicherort (liegt das Skript z. B. unter /js/sw.js, kann es standardmäßig nur URLs unter /js/ steuern).
Verwenden Sie daher möglichst die Standardkonfiguration und platzieren Sie die Datei im Root-Verzeichnis der Website.
Falls sie ausnahmsweise auf einem Drittanbieter-CDN liegt, muss auf Serverseite der Header Service-Worker-Allowed gesetzt werden, um den maximalen Geltungsbereich festzulegen.
SDK-Initialisierung für Web Push
Eindeutige Nutzerkennung (user_str) generieren
Es wird empfohlen, zur Generierung eines eindeutigen user_str Browser-Fingerprinting zu verwenden, um ungültige Nutzerregistrierungen zu verhindern:
// Ausgelassen: Code zur Erfassung von Canvas-, WebGL- und Plugin-Fingerprints (unverändert)
const visitorId = getFingerprint();
console.log('user_str', visitorId);
Beispielcode
// Event-Listener vor der Initialisierung registrieren
// Callback, wenn der Aurora-Kanal getrennt wird
MTpushInterface.mtPush.onDisconnect(function () {
console.log("onDisconnect");
});
// Empfang von Push-Nachrichten (Web Push, Browser-Vendor-Kanäle)
MTpushInterface.onMsgReceive((msgData) => {
// msgData-Struktur: {data:{xxx},type:0} type:0 ist Aurora-Kanal, 1 ist Systemkanal
console.log("Push-Nachricht empfangen:", msgData);
});
// Push-Initialisierung
MTpushInterface.init({
appkey: "", // Erforderlich, siehe oben App-Informationen
user_str: visitorId, // Erforderlich, Nutzerkennung
fail(err) {
console.log("Online-Push-Einrichtung fehlgeschlagen", err);
},
success(data) {
console.log("Online-Push-Einrichtung erfolgreich", data);
},
webPushcallback(code, tip) {
console.log("Nutzer-Statuscode und Nachricht", code, tip);
},
swUrl: '', // Standard: "/sw.min." + sdkEnv.version + ".js". Diese Konfiguration ist der Pfad zur Service Worker-Datei, muss unter der aktuellen Domain liegen und bestimmt den Geltungsbereich.
canGetInfo(data) {
// Ab diesem Zeitpunkt können Benachrichtigungskonfigurationsdaten abgerufen werden. Nach diesem Callback kann die RegId bezogen werden.
console.log(data); // Relevante Konfigurationsdaten
console.log("RegId erhalten", MTpushInterface.getRegistrationID());
},
custom: (fuc) => {
// Bei Verwendung individueller Hinweis-Einstellungen muss fuc() manuell aufgerufen werden, um die Benachrichtigungsberechtigung anzufordern. Die Berechtigungsanfrage ist nur via 'custom' verfügbar.
// fuc() löst die Berechtigungsanfrage aus.
},
});
Weitere Web Push APIs
Informationen zur Nutzung weiterer APIs finden Sie in der Schnittstellen-Dokumentation: Web SDK API.
Test-Demo ausführen
Das Beispiel im Paket ist eine API-Demo. Sie können es direkt im Browser zum Testen ausführen.

