Guide d'intégration
Description du support pour les utilisateurs internationaux de chaque canal
| Type de canal | Utilisateurs d'autres régions | Utilisateurs de la Chine continentale | Remarque |
|---|---|---|---|
| EngageLab | Support | Support | Pris en charge par le SDK par défaut |
| W3C | Support | Support | / |
Test rapide
Démo d'intégration et exemples de EngageLab WebPush
Préparation avant l'intégration
- Préparez un nom de domaine pour un service web https accessible où les tests et le débogage auront lieu. Le web push ne prend pas en charge le débogage local ni le fonctionnement sous non-https.
- Rendez-vous sur EngageLab WebPush, définissez le domaine du site web dans Paramètres d'intégration -> web et renseignez le domaine https du service web préparé.

Astuces
Cet article est un guide d'intégration standard pour le SDK Web MTpush.
Description
Le SDK Web fournit un cadre de développement de notifications push pour les applications web basé sur la notification du noyau et le websocket de chaque navigateur, et propose une interface API concise pour permettre aux applications tierces d'intégrer rapidement les fonctions de push. La notification du noyau du navigateur prend en charge les principaux navigateurs tels que Edge, Chrome, Safari, Firefox, Opera, et le websocket prend en charge la plupart des navigateurs principaux.
Le service EngageLab WebPush prend en charge les notifications push PWA. Vous devez utiliser le SDK Web fourni par EngageLab WebPush pour intégrer la fonctionnalité Web Push dans votre application PWA et suivre le code d'exemple fourni dans la documentation pour enregistrer le Service Worker et initialiser la fonctionnalité Web Push. Une fois l'intégration terminée, vous pouvez utiliser l'API EngageLab WebPush pour envoyer des notifications push aux utilisateurs de votre application PWA.
Consultez la documentation pour plus de détails
Principaux cas d'utilisation :
Notifications et messages personnalisés.
Contenu du package compressé
- exemple
- Il s'agit d'une page web qui démontre l'utilisation de base du SDK MTpush. Elle peut servir de référence.
Obtention des informations de l'application
Créez une application dans la console. Après la création, une AppKey est générée automatiquement pour identifier l'application. Pour plus d'informations, consultez Paramètres de l'application.
Intégrer le SDK
Rendez-vous sur EngageLab WebPush et téléchargez le SDK. Configurez le fichier js du sdk comme ci-dessous dans la page web :
<script type="text/javascript" src="./webPushSdk.min.2.1.2.js"></script>
Après l'intégration du fichier js du sdk, l'objet global MTpushInterface sur Window peut être utilisé.
Astuces
Le package inclut sw.xxx.js. Ce fichier est un fichier service worker et sert à recevoir les messages.
Le SDK chargera ce fichier depuis le répertoire racine par défaut.
La portée maximale du service worker est l'emplacement du worker (autrement dit, si le script sw.js se trouve dans /js/sw.js, il ne peut contrôler que les URL sous /js/ par défaut).
Veuillez donc utiliser autant que possible la configuration par défaut et placer le fichier à la racine du site web.
En cas de circonstances particulières et s'il est stocké sur un CDN tiers, veuillez utiliser l'en-tête Service-Worker-Allowed côté serveur pour spécifier la portée maximale du worker.
Initialisation du SDK
Générer user_str
Il est recommandé d'utiliser l'empreinte du navigateur pour générer un user_str unique afin d'éviter les enregistrements d'utilisateurs invalides :
// Omission : code de collecte d'empreintes Canvas, WebGL et plugin (inchangé)
const visitorId = getFingerprint();
console.log('user_str', visitorId);
Exemple de code
// Register event listeners before initialization.
// Callback when the Aurora channel disconnects.
MTpushInterface.mtPush.onDisconnect(function () {
console.log("onDisconnect");
});
// Receive push messages (Web Push and browser vendor channels).
MTpushInterface.onMsgReceive((msgData) => {
// msgData structure: { data: { xxx }, type: 0 }; type 0 is the Aurora channel, and type 1 is the system channel.
console.log("Received push message:", msgData);
});
function initWebPush() {
const appkey = "your_appkey";
const userStr = visitorId;
if (!(appkey && userStr)) {
console.log("appkey and user_str cannot be empty");
return;
}
// Push initialization.
MTpushInterface.init({
appkey: appkey,
user_str: userStr,
fail(data) {
console.log("Online push setup failed", data);
},
success(data) {
console.log("Online push setup successful", data);
},
webPushcallback(code, tip) {
console.log("Status code and message", code, tip);
},
canGetInfo(data) {
// RegId is available here, and initialization config data can also be read from data.
console.log("Initialization config", data);
console.log("Obtained RegId", MTpushInterface.getRegistrationID());
},
custom: (requestPermission) => {
// For custom prompt settings, call requestPermission during an appropriate user action to request notification permission.
document.getElementById("subscribe")?.addEventListener("click", () => {
if (Notification.permission === "default") {
requestPermission();
} else if (Notification.permission === "denied") {
console.log("Notification permission is denied and cannot be requested");
} else {
console.log("Notification permission has already been granted");
}
});
},
});
}
initWebPush();
Plus d'API
Pour plus de détails sur l'utilisation des autres API, consultez la documentation d'interface : Web SDK API.
Exécuter la démo
L'exemple dans le package est une démo API. Vous pouvez l'exécuter directement dans votre navigateur pour test.










