logo indigitall logo indigitall
/Integración indigitall /Push web /Javascript
EN

  |  ES

Integración JavaScript

Guía de integración rápida del SDK de JavaScript.


Tabla de contenidos



¿Qué necesitas para la integración?


Es importante ya que el proyecto contiene los datos de configuración de tu aplicación, es decir, el dominio donde esta alojada tu web, los certificados de safari o iOS o la clave de firebase que usa android. Todo depende de las plataformas (web o app) que use el proyecto.


Integración


Este artículo muestra el desarrollo mínimo que hay que hacer para comenzar a pedir el permiso de notificaciones y poder realizar las primeras campañas push.

Atención: no se puede pedir el permiso de notificaciones integrando el código dentro de un iframe


Hay dos maneras disponibles para añadir el SDK a tu proyecto. Puedes usar el gestor de dependencias npm o añadir los ficheros manualmente.


Integración importando los ficheros manualmente


Puedes ver nuestro vídeo tutorial o leer el texto más abajo:




  1. Descarga y descomprime el .zip que contiene los dos ficheros del SDK (sdk.min.js y worker.min.js)



  1. Agrega ambos ficheros a tu proyecto copiandolos en la carpeta de recursos JavaScript. No te preocupes, la ruta es personalizable.

Atención: los ficheros deben alojarse en el mismo dominio y subdominio donde se vaya a integrar el servicio

  1. Añade el siguiente código en todas las páginas que puedan solicitar el permiso de notificaciones. Revisa y personaliza los valores de src y workerPath.


<script
  src="/indigitall/sdk.min.js"
  onload="indigitall.init({
    appKey: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
    workerPath: '/indigitall/worker.min.js',
    requestLocation: true
  })"
  async>
</script>

Recuerda: no olvides reemplazar el App Key por el de tu proyecto


Integración con npm


npm (Node Package Manager) es un sistema de gestión de paquetes. Consiste en un cliente de línea de comandos y una base de datos en línea de paquetes públicos y privados.


Puedes ver nuestro vídeo tutorial o leer el texto más abajo:




  1. Incluye el SDK como dependencia en tu fichero package.json.


package.json

{
  ...
  "dependencies": {
    ...
    "indigitall-webpush": "^3.4.1"
  }
  ...
}

Atención: los ficheros deben alojarse en el mismo dominio y subdominio donde se vaya a integrar el servicio


  1. Añade el siguiente código en todas las páginas que puedan solicitar el permiso de notificaciones.


<script
  src="/node_modules/indigitall-webpush/sdk.min.js"
  onload="indigitall.init({
    appKey:'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
    workerPath:'/node_modules/indigitall-webpush/worker.min.js',
    requestLocation:true
  })"
  async>
</script>

Recuerda: no olvides reemplazar el App Key por el de tu proyecto


Integración para Safari (opcional)


Para poder realizar la integración para Safari es necesario implementar un botón para solicitar el permiso de recepción de notificaciones. A continuación puedes ver un ejemplo de código:


<script>
  var indigitallParams = {
    appKey: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
    workerPath: '/indigitall/worker.min.js'
  };

  function onIndigitallLoaded(){
    indigitall.init(indigitallParams);
    if(indigitall.isSafariPushNotificationSupported() && !localStorage.getItem('indigitall.repository.PUSH_TOKEN')){
        var button = document.createElement("span");
        button.innerHTML = `<div id="indigitall-button" onclick="indigitall.launchNotificationPermissionForSafari();document.getElementById('indigitall-button').remove();" style="position: fixed; bottom: 15px; left: 15px; z-index: 999; transition: .2s ease;">
        <a style="display: block; border-radius: 50%; border: 1px solid #74d227; width: 50px; height: 50px; color: #fff; background: linear-gradient(to bottom,#89da3e 1%,#6dbf37 100%); text-align: center; vertical-align: middle; line-height: 60px; cursor: pointer; box-shadow: 0 0 3px #000; transition: .35s ease; transition-property: all; font-size: 20px; text-shadow: 0 0 2px rgba(0,0,0,.5); position: relative;">
            <svg style="width:24px;height:24px" viewBox="0 0 24 24">
            <path fill="#f5f5f5" d="M21,19V20H3V19L5,17V11C5,7.9 7.03,5.17 10,4.29C10,4.19 10,4.1 10,4A2,2 0 0,1 12,2A2,2 0 0,1 14,4C14,4.1 14,4.19 14,4.29C16.97,5.17 19,7.9 19,11V17L21,19M14,21A2,2 0 0,1 12,23A2,2 0 0,1 10,21" />
            </svg>
        </a>
        </div>`;
        document.getElementsByTagName("body")[0].appendChild(button);
    }
}
</script>
<script src="/indigitall/sdk.min.js" onload="onIndigitallLoaded()"></script>

Recuerda: no olvides reemplazar el App Key por el de tu proyecto


Validar la integración


Para probar que la integración se ha realizado correctamente, deberías ser capaz de registrar tu navegador en el servicio de notificaciones y comprobar que no hay errores. Te lo contamos en dos sencillos pasos:


  1. Entra en tu web y acepta el permiso de notificaciones.


New tag

  1. Busca en el log del navegador la llamada PUT /device conteniendo los parámetros appKey, deviceId y pushToken, y que devuelva HTTP 200


[IND]Client:  Method: PUT
URL: https://device-api.indigitall.com/v1/device?appKey=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx&deviceId=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
Request Body: {
  [...]
    "pushToken": "https://fcm.googleapis.com/fcm/send/xxxx",
    "browserPublicKey": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    "browserPrivateKey": "xxxxxxxxxxxx"
}
Response Code: 200
Response Message: OK
Response Body: {
    "deviceId": "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
    "enabled": true,
    "platform": "webpush"
}


  1. Envia una notificación desde la consola de indigitall. Es posible que en la consola el contador de dispositivos aparezca a 0. No te preocupes, puede tardar unos minutos en actualizarse, pero no hace falta que esperes, la push debería llegar igualmente.




Siguientes pasos