image


Tutorial de Integración del SDK en Web


Índice

  1. Página segura HTTPS
  2. Página no segura HTTP

Ejemplo 1: Página segura HTTPS

  1. Descarga la librería:

    Versión 3.1.12 https://descargas.indigitall.net/IndigitallBrowsers_v3.1.12.zip

    Última versión disponible https://descargas.indigitall.net/IndigitallBrowsers.zip

  2. Descomprime el zip

  3. Ahora tienes el manual y la carpeta indigitall, copia la carpeta a la raíz de tu servidor web

    https://domain/indigitall/

  4. Mueve el service-worker.min.js a la raíz de tu sitio web de tal forma que sea accesible desde la ruta https://domain/service-worker.min.js

  5. Reemplaza los parámetros de configuración por defecto con los tuyos:

    Parámetro descripción
    APP_TOKEN El APP_TOKEN de tu aplicación
    WEB_SITE_PUSH_ID Identificador del certificado para Safari (se obtiene de la consola de Apple)
    ICON El icono por defecto de tu aplicación (también puedes sustituir el arhivo logo.png en la carpeta de indigitall)
    TITLE El título por defecto en caso de que no venga uno en la notificación
    DEBUG_MODE Si es false, no se imprimirán trazas por consola
    VAPID_PUBLIC_KEY String de clave pública VAPID del servidor de push. La proporciona el equipo de indigitall al crear la aplicación

    indigitall.json

    {
      "APP_TOKEN": "12345a67b...",
      "WEB_SITE_PUSH_ID": "web.com.domain",
      "ICON": "/indigitall/logo.png",
      "TITLE": "indigitall",
      "DEBUG_MODE": true,
      "VAPID_PUBLIC_KEY": "BPNci1jg-deZqNqeFdeYWodJ78bF7fsYvbbsDlgO..."
    }
  6. Introduce un fragmento de JavaScript para inicializar el SDK:

    document.addEventListener('indigitallReady', function() {
      navigator.indigitall.loadIndigitall(function(){
          console.log('Success!!');
        }, function(error){
          console.log('Error!! ' + error);
      });
    });
  7. Carga la librería de indigitall, importante cargarla después del bloque anterior, nunca antes:

    <script type="text/javascript" src="/indigitall/indigitall.min.js?v=x.x.x"></script>

Al final nos quedaría algo parecido a lo siguiente:

index.html

<!DOCTYPE html>
<html>
<head>
  <title>Ejemplo indigitall</title>
</head>
<body>
  <script>
      document.addEventListener('indigitallReady', function() {
        navigator.indigitall.loadIndigitall(function(){
            console.log('Success!!');
          }, function(error){
            console.log('Error!! ' + error);
        });
      });
  </script>
  <script type="text/javascript" src="/indigitall/indigitall.min.js?v=x.x.x"></script>
</body>
</html>

Con esto ya tendremos el navegador escuchando notificaciones.

¡No te olvides de modificar /indigitall/logo.png con tu propio logo!, así como el nombre de tu aplicación en indigitall/indigitall.json, y la url por defecto en indigitall/safari-bridge.html.


Ejemplo 2: Página no segura HTTP

Aviso: no recomendamos integrar el servicio de esta forma.

Requisitos:

Servidor seguro HTTPS

  1. Descarga la librería:

    Versión 3.1.12 https://descargas.indigitall.net/IndigitallBrowsers_v3.1.12.zip

    Última versión disponible https://descargas.indigitall.net/IndigitallBrowsers.zip

  2. Descomprime el zip

  3. Ahora tienes el manual y la carpeta indigitall, copia la carpeta a la raíz de tu servidor web

    https://push.example.com/indigitall/

  4. Copia el service-worker.min.js a la raíz de tu sitio web de tal forma que sea accesible desde la ruta https://push.example.com/service-worker.min.js

  5. Reemplaza los parámetros de configuración por defecto con los tuyos:

    Parámetro descripción
    APP_TOKEN El APP_TOKEN de tu aplicación
    WEB_SITE_PUSH_ID Identificador del certificado para Safari (se obtiene de la consola de Apple)
    ICON El icono por defecto de tu aplicación (también puedes sustituir el arhivo logo.png en la carpeta de indigitall)
    TITLE El título por defecto en caso de que no venga uno en la notificación
    DEBUG_MODE Si es false, no se imprimirán trazas por consola
    VAPID_PUBLIC_KEY String de clave pública VAPID del servidor de push. La proporciona el equipo de indigitall al crear la aplicación

    indigitall.json

    {
      "APP_TOKEN": "APP_TOKEN",
      "WEB_SITE_PUSH_ID": "web.com.domain",
      "ICON": "/indigitall/logo.png",
      "TITLE": "indigitall",
      "DEBUG_MODE": true,
      "VAPID_PUBLIC_KEY": "BPNci1jg-deZqNqeFdeYWodJ78bF7fsYvbbsDlgO..."
    }
  6. Crea la web de registro (https://push.example.com/index.html) donde redirigirás al usuario para pedirle los permisos de notificaciones

  7. Introduce un fragmento de JavaScript para inicializar el SDK:

    document.addEventListener('indigitallReady', function() {
      navigator.indigitall.loadIndigitall();
    });
  8. Carga la librería de indigitall, importante cargarla después del bloque anterior, núnca antes:

    <script type="text/javascript" src="/indigitall/indigitall.min.js?v=x.x.x"></script>

Al final nos quedaría algo parecido a lo siguiente:

https://push.example.com/index.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
</head>

<body>
    <script type="text/javascript">
        document.addEventListener('indigitallReady', function() {
            navigator.indigitall.loadIndigitall();
        });
    </script>
    <script src="/indigitall/indigitall.min.js?v=x.x.x"></script>
</body>

</html>

Servidor no seguro HTTP

  1. En tu página web incluye un bloque de JavaScript donde inicializar el SDK, como parámetro hay que pasarle la ubicación de la carpeta de indigitall en nuestro servidor seguro.

    document.addEventListener('indigitallReady', function() {
        var options = {
            INDIGITALL_FOLDER: 'https://domain/indigitall/'
        };
        navigator.indigitall.loadIndigitall(options, function(newUser){
            console.log('Successs!! is new user: ' + newUser);
          }, function(error){
            console.log('Error!! ' + error);
        });
    });
  2. Si en la función onLoadSuccess recibes true, significa que el usuario no está recibiendo notificaciones, entonces vamos a mostrarle un popup y preguntarle si desea recibirlas, si dice que sí, le redirigimos a la web de registro segura HTTPS

    function onLoadSuccess(newUser){
      if(confirm('¿Deseas recibir notificaciones?')){
        window.location.assign("https://push.example.com/indigitall/");
      }
    }
  3. En caso de que el usuario diga que no quiere recibir notificaciones, guardamos este dato para no preguntarle de nuevo.

    function onLoadSuccess(newUser){
      if(window.localStorage.getItem("UserRejectedNotifications")){
        return;
      }
    
      if(confirm('¿Deseas recibir notificaciones?')){
        window.location.assign("https://push.example.com/index.html");
      }else{
        window.localStorage.setItem("UserRejectedNotifications", true);
      }
    }
  4. Cuando el usuario llegue a nuestra web de registro, el navegador le preguntará si desea recibir notificaciones, una vez acepte, ya podrá recibirlas en nuestra web no segura HTTP.

Puedes añadir algo de estilos y texto en tu web de registro para informar al usuario de que debe aceptar los permisos de notificaciones.

¡No te olvides de modificar indigitall/logo.png con tu propio logo!, así como el nombre de tu aplicación en indigitall/indigitall.json, y la url por defecto en indigitall/safari-bridge.html.

Consejos

  • Una web de registro en un servidor seguro HTTPS equivale a un canal de comunicación, puedes tener varias páginas no seguras HTTP conectadas a la misma web de registro y todas recibirán las mismas notificaciones.

  • El SDK de indigitall posee unas funciones que te permiten acceder al localStorage de la web de registro y almacenar ahí la información que quieras, de esta forma podras acceder a la información desde cualquiera de tus páginas no seguras HTTP incluso aunque estén en diferentes dominios.