Aller au contenu principal

Implémenter les notifications Web push

Une fois que l'équipe Actito a effectué la configuration nécessaire et que vous avez récupéré le fichier SDK, vous êtes maintenant prêt à implémenter la bibliothèque Web Notificare sur votre site Web.

Installation via NPM​

L'utilisation d'un bundler de modules comme webpack ou Rollup dans votre environnement de développement est fortement recommandée. Sinon, vous ne pourrez pas profiter des principaux avantages de l'API modulaire, à savoir la réduction de la taille du bundle de votre application.

npm install notificare-web

Une fois le package installé dans votre projet, vous pouvez inclure les fonctions nécessaires à votre application.

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';

L'exemple ci-dessus montre l'importation de fichiers CSS via JavaScript. Cependant, vous pouvez ajuster cela pour qu'il corresponde à l'importation préférée de votre pile d'applications. Par exemple, si vous avez le fichier global.css, vous pouvez importer nos fichiers CSS comme suit :

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

Installation via le CDN​

Vous pouvez également charger des packages Notificare en tant que modules de script dans les navigateurs prenant en charge les modules ES natifs .

<!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>

Nous vous recommandons d'utiliser une version épinglée lors de l'inclusion de nos bibliothèques et de la gestion de leurs mises à jour si nécessaire. Cependant, vous pouvez aussi utiliser le placeholder latest pour rester toujours à jour.

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

Lorsque vous utilisez Google Tag Manager pour inclure nos bibliothèques, assurez-vous d'activer la prise en charge de document.write.

alt text

Fichier de configuration​

Afin de connecter votre application à Notificare, vous devez télécharger le fichier de configuration du SDK qui a été déposé dans la Transferbox par l'équipe Actito.

Pour référence, voici à quoi devrait ressembler ce fichier :

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

Bien que cela ne soit pas obligatoire pour Web Push, nous recommandons de créer deux configurations différentes dans Notificare en utilisant des environnements séparés pour le développement et la production. Pour chaque application, vous disposerez d'un jeu de clés différent, ce qui entraînera deux fichiers de configuration différents.

Lancer Notificare​

Lancer Notificare est aussi simple que d'appeler launch(). Un petit exemple de code peut être trouvé ci-dessous.

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

// Launch Notificare! 🚀
await launch();

Vous pouvez retarder le lancement de Notificare pour la première fois. Sinon, assurez-vous de bien lancer() lorsque la page se charge pour éviter de manquer des mises à jour importantes.

Vous pouvez utiliser l'événement onReady() comme indiqué ci-dessous lorsque vous souhaitez contrôler l'état des dépendances dans le flux d'initialisation de votre application.

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

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

Annuler le lancement de Notificare​

Il est possible de supprimer complètement toutes les données d'un appareil, aussi bien localement dans votre application qu'à distance sur nos serveurs. Vous souhaitez éviter de le faire, mais dans les cas où l'utilisateur demande la suppression de son compte, vous pouvez utiliser la méthode suivante :

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

await unlaunch();

Après avoir invoqué cette fonction, toutes les données de l'appareil seront détruites et ne pourront plus être annulées. Une fois le processus terminé, l'événement onUnlaunched() sera exécuté.

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

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

À ce stade, l'appel de toute autre méthode dans Notificare échouera, et la seule façon de recommencer à utiliser le SDK est d'invoquer son homologue, la méthode launch.