Saltar al contenido principal

Implementar notificaciones push web

Una vez que el equipo de Actito haya realizado la configuración necesaria y haya obtenido el archivo SDK, estará listo para implementar la biblioteca web Notificare en su sitio web.

Instalación a través de NPM​

Se recomienda encarecidamente utilizar un paquete de módulos como webpack o Rollup en su entorno de desarrollo. De lo contrario, no podrá aprovechar los principales beneficios de la API modular, es decir, reducir el tamaño del paquete de su aplicación.

npm install notificare-web

Una vez que el paquete esté instalado en su proyecto, puede incluir las funciones necesarias para su aplicación.

import { } from 'notificare-web/core';
import { } from 'notificare-web/assets';
import { } from 'notificare-web/geo';
import { } from 'notificare-web/in-app-messaging';
import { } from 'notificare-web/inbox';
import { } from 'notificare-web/push';
import { } from 'notificare-web/push-ui';
import { } from 'notificare-web/user-inbox';

// CSS files
import 'notificare-web/in-app-messaging/in-app-messaging.css';
import 'notificare-web/push/push.css';
import 'notificare-web/push-ui/push-ui.css';

El ejemplo anterior muestra la importación de archivos CSS a través de JavaScript. Sin embargo, puede ajustar esto para que coincida con la importación preferida de su pila de aplicaciones. Por ejemplo, si tiene el archivo global.css, puede importar nuestros archivos CSS de la siguiente manera:

@import "notificare-web/in-app-messaging/in-app-messaging.css";
@import "notificare-web/push/push.css";
@import "notificare-web/push-ui/push-ui.css";

Instalación a través de CDN​

También puede cargar paquetes Notificare como módulos de script en navegadores que admitan [módulos ES] nativos (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules).

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.notifica.re/libs/web/v4/{{version}}/notificare-in-app-messaging.css" />
  <link rel="stylesheet" href="https://cdn.notifica.re/libs/web/v4/{{version}}/notificare-push.css" />
  <link rel="stylesheet" href="https://cdn.notifica.re/libs/web/v4/{{version}}/notificare-push-ui.css" />
</head>
<body>
<script type="module">
  import { } from 'https://cdn.notifica.re/libs/web/v4/{{version}}/notificare-core.js';
  import { } from 'https://cdn.notifica.re/libs/web/v4/{{version}}/notificare-assets.js';
  import { } from 'https://cdn.notifica.re/libs/web/v4/{{version}}/notificare-geo.js';
  import { } from 'https://cdn.notifica.re/libs/web/v4/{{version}}/notificare-in-app-messaging.js';
  import { } from 'https://cdn.notifica.re/libs/web/v4/{{version}}/notificare-inbox.js';
  import { } from 'https://cdn.notifica.re/libs/web/v4/{{version}}/notificare-push.js';
  import { } from 'https://cdn.notifica.re/libs/web/v4/{{version}}/notificare-push-ui.js';
  import { } from 'https://cdn.notifica.re/libs/web/v4/{{version}}/notificare-user-inbox.js';

  // more code ...
</script>
</body>
</html>

Recomendamos utilizar una versión fijada al incluir nuestras bibliotecas y administrar sus actualizaciones según sea necesario. Sin embargo, también puedes utilizar el marcador de posición latest para estar siempre actualizado.

import { } from 'https://cdn.notifica.re/libs/web/v4/latest/notificare-core.js';
nota

Cuando utilice Google Tag Manager para incluir nuestras bibliotecas, asegúrese de habilitar la compatibilidad con document.write.

alt text

Archivo de configuración​

Para conectar su aplicación a Notificare, debe descargar el archivo de configuración del SDK que el equipo de Actito ha subido a Transferbox.

Como referencia, así es como debería verse este archivo:

{
"applicationKey": "{{ YOUR APPLICATION KEY }}",
"applicationSecret": "{{ YOUR APPLICATION SECRET }}",
}
Consejo

Aunque no es necesario para Web Push, recomendamos crear dos configuraciones diferentes en Notificare utilizando entornos separados para desarrollo y producción. Para cada aplicación tendrá un conjunto diferente de claves, lo que dará como resultado dos archivos de configuración diferentes.

Iniciar notificación​

Iniciar Notificare es tan simple como llamar a launch(). A continuación se puede encontrar un pequeño código de muestra.

import { launch } from 'notificare-web/core';

// Launch Notificare! 🚀
await launch();

Puedes retrasar el inicio de Notificare por primera vez. De lo contrario, asegúrese de ejecutar() cuando se cargue la página para evitar perder actualizaciones importantes.

Puede utilizar el evento onReady() como se muestra a continuación cuando desee controlar el estado de las dependencias en el flujo de inicialización de su aplicación.

import { onReady } from 'notificare-web/core';

onReady((application) => {
// Notificare is now safe to use.
});

Cancelar el lanzamiento de Notificare​

Es posible eliminar completamente todos los datos de un dispositivo, tanto localmente en su aplicación como de forma remota en nuestros servidores. Desea evitar hacer esto, pero en los casos en que el usuario solicite eliminar su cuenta, puede utilizar el siguiente método:

import { unlaunch } from 'notificare-web/core';

await unlaunch();

Después de invocar esta función, todos los datos del dispositivo se destruirán y ya no se podrán deshacer. Una vez que se complete el proceso, se ejecutará el evento onUnlaunched().

import { onUnlaunched } from 'notificare-web/core';

onUnlaunched(() => {
// All device data was deleted.
// Notificare cannot be used until it's launched again.
});

En este punto, llamar a cualquier otro método en Notificare fallará y la única forma de comenzar a usar el SDK nuevamente es invocar su contraparte, el método launch.