Guía de integración del SDK Web Push en tienda Shopify

Descripción general

Esta guía explica cómo integrar el SDK Web Push en una tienda basada en Shopify para habilitar las notificaciones push en el navegador.

Requisitos previos

• Acceso de administrador a la tienda Shopify
• Archivos del SDK Web Push (webSdk.produce.min.3.3.4.js, sw.produce.min.3.3.4.js)
• Conocimientos básicos de edición de temas en Shopify

Pasos de integración

Añadir desde el editor de temas de Shopify (recomendado)

1. Subir los archivos del SDK a Shopify

1. Iniciar sesión en el panel de Shopify
2. Ir a Tienda online > Temas
3. En el tema actual, pulsar Acciones y Editar código
4. En la carpeta Recursos, pulsar Añadir un recurso
5. Subir webSdk.produce.min.3.3.4.js (archivo principal del SDK)
6. Subir sw.produce.min.3.3.4.js (archivo Service Worker; el SDK lo usa para push)
7. Anotar las URL de los recursos (p. ej. {{ 'webSdk.produce.min.3.3.4.js' | asset_url }} y {{ 'sw.produce.min.3.3.4.js' | asset_url }})

Importante: sw.produce.min.3.3.4.js es el Service Worker que procesa los mensajes push en segundo plano. Debe configurarse correctamente su ruta al inicializar el SDK.

2. Añadir el script del SDK e inicializar

1. En el editor de temas, abrir el archivo theme.liquid
2. Añadir el siguiente código antes de la etiqueta </head>:

              
              <script>
  (function() {
    function initializeSDK() {
      const visitorId = getFingerprint();

      if (typeof window.MTpushInterface !== 'undefined') {
        MTpushInterface.mtPush.onDisconnect(function () {
          console.log("onDisconnect");
        });

        MTpushInterface.onMsgReceive((msgData) => {
          console.log("Mensaje push recibido:", msgData);
        });

        MTpushInterface.init({
          appkey: "",
          user_str: visitorId,
          fail(err) {
            console.log("Error al inicializar push", err);
          },
          success(data) {
            console.log("Push inicializado correctamente", data);
          },
          webPushcallback(code, tip) {
            console.log("Código y mensaje", code, tip);
          },
          swUrl: '{{ "sw.produce.min.3.3.4.js" | asset_url }}',
        });
      }
    }

    window.MTpushInterfaceReady = initializeSDK;
  })();
</script>
{{ 'webSdk.produce.min.3.3.4.js' | asset_url | script_tag }}

            

Verificación

1. Comprobar que el SDK se carga

1. Abrir una página de la tienda
2. Clic derecho > Inspeccionar o F12
3. En la consola, buscar mensajes de carga del SDK
4. Escribir window.MTpushInterface para comprobar si está definido

2. Probar push

1. La tienda debe servirse por HTTPS (requerido para web push)
2. Comprobar si el navegador muestra la solicitud de permiso de push (si está configurada)

3. Comprobar el registro del Service Worker

1. Abrir DevTools (F12)
2. Ir a la pestaña Application
3. En el panel izquierdo, Service Workers
4. Confirmar que sw.produce.min.3.3.4.js está registrado
5. Si hay errores, revisar la consola

Solución de problemas

Problemas habituales y soluciones

Q1: El SDK no se carga

• Rutas: Comprobar que asset_url se resuelve correctamente
• Red: Verificar que los archivos JS se descargan
• Permisos: Que los archivos estén disponibles en Recursos de Shopify

Q2: Error al inicializar

• Orden de carga: El script del SDK debe ejecutarse antes del código de init
• HTTPS: Web push solo funciona con HTTPS
• Navegador: Comprobar soporte de web push
• swUrl: Configurar correctamente y que la URL del SW sea accesible
• Assets: Confirmar que sw.produce.min.3.3.4.js está subido en Recursos

Q4: Error al registrar el Service Worker

• swUrl: Usar {{ 'sw.produce.min.3.3.4.js' | asset_url }} para la URL correcta
• Acceso: Abrir la URL del Service Worker en el navegador y comprobar la descarga
• Application > Service Workers: Revisar el estado de registro
• HTTPS: Los Service Workers requieren HTTPS (excepto en localhost)