Guía de integración

Descripción de compatibilidad para usuarios en el extranjero de cada canal

Prueba rápida

Demostración de integración y ejemplos de EngageLab WebPush

Preparación previa a la integración

1. Preparar un nombre de dominio para un servicio web HTTPS accesible donde se realizarán las pruebas y la depuración. Web Push no admite la depuración local ni el funcionamiento bajo un entorno que no sea HTTPS.
   
2. Visitar EngageLab WebPush, configurar el dominio del sitio web en Integration Settings -> Web y completar el dominio del servicio web HTTPS preparado.
   

Consejos

Este artículo es un documento de guía de integración estándar para el Web SDK de MTpush.

Descripción

El Web SDK proporciona un marco de desarrollo push para aplicaciones web basado en las notificaciones del motor del navegador y WebSocket de cada navegador, y ofrece una interfaz API concisa para facilitar que aplicaciones de terceros integren rápidamente funciones push. Las notificaciones del motor del navegador son compatibles con navegadores convencionales como Edge, Chrome, Safari, Firefox y Opera; WebSocket es compatible con la mayoría de los navegadores principales.

El servicio EngageLab WebPush es compatible con notificaciones push de PWA. Debe utilizar el Web SDK proporcionado por EngageLab WebPush para integrar la funcionalidad Web Push en su aplicación PWA y seguir el código de ejemplo proporcionado en la documentación para registrar el Service Worker e inicializar la funcionalidad Web Push. Una vez completada la integración, se puede utilizar la API de EngageLab WebPush para enviar notificaciones push a los usuarios de su aplicación PWA.
Consultar la documentación para más detalles

Escenarios principales

Notificaciones y mensajes personalizados.

Contenido integrado del paquete comprimido

• example
  • Esta es una página web que demuestra el uso básico del SDK de MTpush. Se puede utilizar como referencia.

Obtención de información de la aplicación

Crear una aplicación en la consola. Tras crear la aplicación, se genera automáticamente un AppKey para identificarla. Para más información, consultar Configuración de la aplicación.

Integrar el SDK

Visitar EngageLab WebPush y descargar el SDK. Configurar el archivo JS del SDK en la página web como se indica a continuación:

              
              <script type="text/javascript" src="./webPushSdk.min.2.1.2.js"></script>

            

Tras integrar el archivo JS del SDK, se puede utilizar el objeto global MTpushInterface en window.

Consejos

              
              The package includes sw.xxx.js. This file is a service worker file and is used to receive messages.
The SDK will load this file from the root directory by default.
The largest scope of service worker is the location of the worker (in other words, if the script sw.js is located in /js/sw.js, it can only control the URL under /js/ by default).
So please use the default configuration as much as possible and place it in the root directory of the website.
If there are special circumstances and it is stored in a third-party CDN, please use the Service-Worker-Allowed header on the server side to specify the maximum scope of the worker.

            

Inicialización del SDK

Generar user_str

Se recomienda utilizar la huella digital del navegador para generar un user_str único y evitar registros de usuarios no válidos:

              
              // Omitted: Canvas, WebGL, and plugin fingerprint collection code (unchanged)
const visitorId = getFingerprint();
console.log('user_str', visitorId);

            

Código de ejemplo

              
                // Register event listeners before initialization
  // Callback when the Aurora channel disconnects
  MTpushInterface.mtPush.onDisconnect(function () {
    console.log("onDisconnect");
  });
  // Receive push messages (Web Push, browser vendor channels)
  MTpushInterface.onMsgReceive((msgData) => {
    // msgData structure: {data:{xxx},type:0} type:0 is Aurora channel, 1 is system channel
    console.log("Received push message:", msgData);
  });
  // Push initialization
  MTpushInterface.init({
    appkey: "", // Required, see above for app info
    user_str: visitorId, // Required, user identifier
    fail(err) {
      console.log("Online push setup failed", err);
    },
    success(data) {
      console.log("Online push setup successful", data);
    },
    webPushcallback(code, tip) {
      console.log("User status code and message", code, tip);
    },
    swUrl: '', // Default: "/sw.min." + sdkEnv.version + ".js". This config is the server worker file path, which must be under the current domain and determines the worker's scope.
    canGetInfo(data) {
      // At this point, notification config data can be retrieved. After this callback, RegId can be obtained.
      console.log(data); // Related config info
      console.log("Obtained RegId", MTpushInterface.getRegistrationID());
    },
    custom: (fuc) => {
      // When using custom prompt settings, manually call fuc() to request notification permissions. The permission request function is only available via 'custom'.
      // fuc() triggers the notification permission request.
    },
  });

            

Más API

Para más información sobre cómo utilizar otras API, consultar la documentación de interfaces: API del Web SDK.

Ejecutar la demo

El ejemplo incluido en el paquete es una demo de la API. Se puede ejecutar directamente en el navegador para realizar pruebas.