logoDocumentation
Rechercher

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

  1. 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.
  2. 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é.
    截屏2022-11-29 11.06.12.png

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>
              
              <script type="text/javascript" src="./webPushSdk.min.2.1.2.js"></script>

            
Afficher ce bloc de code dans la fenêtre flottante

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.
              
              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.

            
Afficher ce bloc de code dans la fenêtre flottante

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);
              
              // Omission : code de collecte d'empreintes Canvas, WebGL et plugin (inchangé)
const visitorId = getFingerprint();
console.log('user_str', visitorId);

            
Afficher ce bloc de code dans la fenêtre flottante

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. }, });
              
                // 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.
    },
  });

            
Afficher ce bloc de code dans la fenêtre flottante

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.

icon
Contactez-nous