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
// Enregistrez les écouteurs d'événements avant l'initialisation
// Callback lors de la déconnexion du canal EngageLab
MTpushInterface.mtPush.onDisconnect(function () {
console.log("onDisconnect");
});
// Recevoir les messages push (Web Push, canaux des fournisseurs de navigateurs)
MTpushInterface.onMsgReceive((msgData) => {
// Structure de msgData : {data:{xxx},type:0} type:0 est le canal EngageLab, 1 est le canal système
console.log("Message push reçu :", msgData);
});
// Initialisation du push
MTpushInterface.init({
appkey: "", // Obligatoire, voir ci-dessus pour les infos de l'application
user_str: visitorId, // Obligatoire, identifiant utilisateur
fail(err) {
console.log("Échec de la configuration du push en ligne", err);
},
success(data) {
console.log("Configuration du push en ligne réussie", data);
},
webPushcallback(code, tip) {
console.log("Code d'état utilisateur et message", code, tip);
},
swUrl: '', // Par défaut : "/sw.min." + sdkEnv.version + ".js". Cette config est le chemin du fichier service worker, qui doit être sous le domaine courant et détermine la portée du worker.
canGetInfo(data) {
// À ce stade, les données de configuration de la notification peuvent être récupérées. Après ce callback, le RegId peut être obtenu.
console.log(data); // Infos de configuration associées
console.log("RegId obtenu", MTpushInterface.getRegistrationID());
},
custom: (fuc) => {
// Lors de l'utilisation de paramètres d'invite personnalisés, appelez manuellement fuc() pour demander les autorisations de notification. La fonction de demande d'autorisation n'est disponible que via 'custom'.
// fuc() déclenche la demande d'autorisation de notification.
},
});
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.

