Passer au contenu
Guides utilisateur Support Demander une démo Se connecter
Pushwoosh.com

SDK Web Push 3.0

Intégration

Anchor link to

Exemple d’intégration sur GitHub

Obtenez le SDK Web Push de Pushwoosh et décompressez-le. Vous devriez avoir les fichiers suivants :

Anchor link to
  • pushwoosh-service-worker.js

Placez tous ces fichiers à la racine de premier niveau du répertoire de votre site web.

Anchor link to

Initialisez le SDK :

Anchor link to
  1. Incluez le SDK depuis notre CDN de manière asynchrone.
<script type="text/javascript" src="//cdn.pushwoosh.com/webpush/v3/pushwoosh-web-notifications.js" async></script>
  1. Initialisez le SDK Web Push et assurez-vous de mettre l’initialisation en file d’attente jusqu’à ce que le SDK soit entièrement chargé.
<script type="text/javascript">
var Pushwoosh = Pushwoosh || [];
Pushwoosh.push(['init', {
    logLevel: 'info', // valeurs possibles : error, info, debug
    applicationCode: 'XXXXX-XXXXX', // votre code d'application depuis le Panneau de Contrôle Pushwoosh
    apiToken: 'XXXXXXX', //  Jeton d'API d'appareil
    safariWebsitePushID: 'web.com.example.domain', //  chaîne de domaine inversé unique, obtenue dans votre portail de développeur Apple. Nécessaire uniquement si vous envoyez des notifications push au navigateur Safari
    defaultNotificationTitle: 'Pushwoosh', // définit un titre par défaut pour les notifications push
    defaultNotificationImage: 'https://yoursite.com/img/logo-medium.png', // URL vers une image de notification personnalisée
    autoSubscribe: false, // ou true. Si true, invite un utilisateur à s'abonner aux notifications push lors de l'initialisation du SDK
    subscribeWidget: {
      enable: true
    },
    userId: 'user_id', // optionnel, définissez un ID utilisateur personnalisé
    tags: {
        'Name': 'John Smith'     // optionnel, définissez des Tags personnalisés
    }
}]);
</script>

Pop-ups web

Anchor link to

Les campagnes de pop-ups web se chargent par défaut — aucune entrée webPopups n’est requise dans votre objet init. N’en ajoutez une que pour vous désinscrire ou modifier les valeurs par défaut :

webPopups: {
  // enable: false, // optionnel, désinscription complète : le bundle n'est jamais chargé
  autoShow: true, // optionnel, réglez sur false pour charger les pop-ups sans les afficher automatiquement — voir les méthodes WebPopups ci-dessous
  colorScheme: 'auto', // optionnel, 'auto' (par défaut) | 'light' | 'dark'
},

Les campagnes de pop-ups web affichent des superpositions que vous configurez dans le Panneau de Contrôle, telles que des promotions, des annonces ou des formulaires de capture de prospects. Contrairement au pop-up d’abonnement personnalisé (subscribePopup), qui ne gère que l’acceptation des notifications push web, les campagnes de pop-ups web peuvent afficher n’importe quel contenu que vous configurez. Pour la configuration dans le Panneau de Contrôle, voir Comprendre les pop-ups web.

colorScheme choisit la palette avec laquelle un pop-up configuré avec le mode sombre s’affiche :

  • 'auto' (par défaut) : suit le schéma de couleurs du système d’exploitation du visiteur (prefers-color-scheme).
  • 'light' ou 'dark' : affiche toujours cette palette, quel que soit le paramètre du système d’exploitation du visiteur.

Un pop-up sans mode sombre configuré dans l’éditeur s’affiche toujours en mode clair — colorScheme n’a aucun effet sur lui.

Pour un contrôle programmatique, voir les méthodes WebPopups et les événements de pop-up web.

Bouton d’abonnement aux notifications push

Anchor link to

Pour inviter vos utilisateurs à s’abonner aux notifications push, nous vous recommandons d’implémenter un bouton d’abonnement aux notifications push sur votre site web. Améliorez l’expérience utilisateur et obtenez plus d’abonnés !

Configuration

Anchor link to

Pour terminer l’implémentation des notifications push sur votre site web, vous devez configurer les plateformes web dans votre Panneau de Contrôle Pushwoosh en suivant nos guides étape par étape :

Enregistrement du service worker dans une portée différente

Anchor link to

Parfois, vous ne pouvez pas placer le fichier du service worker dans un répertoire racine d’un site web, mais dans un sous-répertoire.

Dans ce cas, modifiez la configuration (étape 4.3) en ajoutant un paramètre

serviceWorkerUrl: “/push-notifications/pushwoosh-service-worker.js”

où /push-notifications/pushwoosh-service-worker.js est le chemin vers le fichier pushwoosh-service-worker.js.

Gestionnaires d’événements

Anchor link to

Dans le SDK Web de Pushwoosh 3.0, vous pouvez vous abonner à certains événements pour les suivre**,** ou vous désabonner des événements si vous n’avez plus besoin de les suivre.

Pour suivre le chargement du SDK Web 3.0, déclenchez l’événement onLoad comme suit :

// Événement de chargement
Pushwoosh.push(['onLoad', (api) => {
  console.log('Pushwoosh chargé !');
}]);

Pour suivre l’initialisation correcte du SDK Web, déclenchez l’événement onReady :

// Événement Prêt
Pushwoosh.push((api) => {
  console.log('Pushwoosh prêt !');
});

Pour vous abonner ou vous désabonner de l’un des événements du SDK, utilisez les gestionnaires après le chargement du SDK :

Pushwoosh.push(['onLoad', (api) => {
  function onEventNameHandler() {
    console.log('Événement déclenché : event-name !');
  }


  // Pour s'abonner à un événement :
  Pushwoosh.addEventHandler('event-name', onEventNameHandler)


  // Pour se désabonner d'un événement :
  Pushwoosh.removeEventHandler('event-name', onEventNameHandler)
}]);

Événements du SDK

Anchor link to

Événement d’abonnement

Anchor link to

Exécuté après qu’un utilisateur accepte de recevoir des notifications push.

Pushwoosh.push(['onLoad', (api) => {
  Pushwoosh.addEventHandler('subscribe', (payload) => {
    console.log('Événement déclenché : subscribe');
  });
}]);

Événement de désabonnement

Anchor link to

Exécuté après qu’un appareil est désinscrit des notifications.

Pushwoosh.push(['onLoad', (api) => {
  Pushwoosh.addEventHandler('unsubscribe', (payload) => {
    console.log('Événement déclenché : unsubscribe');
  });
}]);

Événements du widget d’abonnement

Anchor link to

Suivre l’affichage d’un widget d’invite à l’abonnement.

Pushwoosh.push(['onLoad', (api) => {
  // Exécuté lors de l'affichage du widget d'invite à l'abonnement
  Pushwoosh.addEventHandler('show-subscription-widget', (payload) => {
    console.log('Événement déclenché : show-subscription-widget');
  });


  // Exécuté lors du masquage du widget d'invite à l'abonnement
  Pushwoosh.addEventHandler('hide-subscription-widget', (payload) => {
    console.log('Événement déclenché : hide-subscription-widget');
  });
}]);

Événements de la boîte de dialogue d’autorisation de notification

Anchor link to

Suivre l’affichage de la boîte de dialogue d’abonnement native.

Pushwoosh.push(['onLoad', function (api) {
  // Exécuté lors de l'affichage de la boîte de dialogue d'autorisation
  Pushwoosh.addEventHandler('show-notification-permission-dialog', (payload) => {
    console.log('Événement déclenché : show-notification-permission-dialog');
  });


  // Exécuté lors du masquage de la boîte de dialogue d'autorisation avec l'un des trois statuts possibles :
  // 1. default - la boîte de dialogue est fermée
  // 2. granted - l'autorisation est accordée
  // 3. denied - l'autorisation est refusée
  Pushwoosh.addEventHandler('hide-notification-permission-dialog', (payload) => {
    console.log('Événement déclenché : hide-notification-permission-dialog', payload.permission);
  });
}]);

Événements d’autorisation

Anchor link to

Vérifier le statut de l’autorisation des notifications push lors de l’initialisation du SDK ; suivre la mise à jour de ce statut chaque fois qu’elle a lieu.

Pushwoosh.push(['onLoad', (api) => {
  // Exécuté pendant l'initialisation du SDK si 'autoSubscribe: false' et/ou si un utilisateur ignore une invite de notification push.
  Pushwoosh.addEventHandler('permission-default', (payload) => {
    console.log('Événement déclenché : permission-default');
  });


  // Exécuté pendant l'initialisation du SDK si les notifications sont bloquées ou une fois qu'un utilisateur bloque les notifications push.
  Pushwoosh.addEventHandler('permission-denied', (payload) => {
    console.log('Événement déclenché : permission-denied');
  });


  // Exécuté pendant l'initialisation du SDK si les notifications sont autorisées ou une fois qu'un utilisateur autorise les notifications push.
  Pushwoosh.addEventHandler('permission-granted', (payload) => {
    console.log('Événement déclenché : permission-granted');
  });
}]);

Événement de réception de push

Anchor link to

Suivre la livraison d’une notification push à un appareil.

Pushwoosh.push(['onLoad', (api) => {
  // Exécuté lorsqu'une notification push est affichée.
  Pushwoosh.addEventHandler('receive-push', (payload) => {
    console.log('Événement déclenché : receive-push', payload.notification);
  });
}]);

Événements de notification

Anchor link to

Suivre si une notification push est ouverte ou fermée par un utilisateur.

Pushwoosh.push(['onLoad', (api) => {
  // Exécuté lorsqu'un utilisateur clique sur une notification.
  Pushwoosh.addEventHandler('open-notification', (payload) => {
    console.log('Événement déclenché : open-notification', payload.notification);
  });


  // Exécuté lorsqu'un utilisateur ferme une notification push.
  Pushwoosh.addEventHandler('hide-notification', (payload) => {
    console.log('Événement déclenché : hide-notification', payload.notification);
  });
}]);

Événements de la boîte de réception

Anchor link to

Suivre les notifications envoyées à la boîte de réception.

Pushwoosh.push(['onLoad', (api) => {
  // Exécuté par le ServiceWorker après que le message de la boîte de réception est reçu et enregistré dans indexedDB.
  Pushwoosh.addEventHandler('receive-inbox-message', (payload) => {
    console.log('Événement déclenché : receive-inbox-message', payload.message);
  });


  // Exécuté après que la boîte de réception est mise à jour automatiquement pendant le chargement de la page.
  Pushwoosh.addEventHandler('update-inbox-messages', (payload) => {
    console.log('Événement déclenché : receive-inbox-message', payload.messages);
  });
}]);

Événements du pop-up d’abonnement personnalisé

Anchor link to

Pour plus de détails sur la gestion des événements du pop-up d’abonnement personnalisé, veuillez consulter le Guide des événements du pop-up d’abonnement personnalisé.

Événements de pop-up web

Anchor link to
Pushwoosh.push(['onLoad', (api) => {
  // Exécuté une fois que les pop-ups web ont été chargés et que le pipeline d'affichage automatique a été exécuté pour la page actuelle
  Pushwoosh.addEventHandler('web-popups-ready', () => {
    console.log('Événement déclenché : web-popups-ready');
  });


  // Exécuté lorsqu'un pop-up web est affiché, automatiquement ou via webPopups.show()
  Pushwoosh.addEventHandler('show-web-popup', (payload) => {
    console.log('Événement déclenché : show-web-popup', payload.code, payload.trigger); // trigger: 'auto' | 'api'
  });


  // Exécuté lorsqu'un pop-up web est masqué
  Pushwoosh.addEventHandler('hide-web-popup', (payload) => {
    console.log('Événement déclenché : hide-web-popup', payload.code, payload.reason); // reason: 'user' | 'api' | 'preempted'
  });
}]);

API

Anchor link to

Une fois le SDK Web Push initialisé, vous pouvez effectuer les appels suivants à l’API Pushwoosh. Toutes les méthodes renvoient des objets Promise.

Pushwoosh.push((api) => {
  // Définir des tags pour un utilisateur
  api.setTags({
    'Tag Name 1': 'value1',
    'Tag Name 2': 'value2'
  });


  // Obtenir les tags pour un utilisateur depuis le serveur
  api.getTags();


  // Enregistrer l'ID utilisateur
  api.registerUser('user123');


    // Enregistrer l'e-mail de l'utilisateur
  api.registerEmail('user@example.com');


  // Enregistrer le numéro SMS
  api.registerSmsNumber('+15551234567');


  // Enregistrer le numéro WhatsApp
  api.registerWhatsappNumber('+1234567890');


  // Publier un événement
  api.postEvent('myEventName', {attributeName: 'attributeValue'});


  //Se désinscrire des notifications
  api.unregisterDevice();


  // Définir la langue de l'appareil (remplace la valeur dans le Tag "Language")
  api.setLanguage('es');


  // Alternativement, enregistrement multiple de l'utilisateur avec des appareils et des canaux
  api.multiRegisterDevice({
    user_id: 'user123',
    email: 'user@example.com',
    sms_phone_number: '+1234567890',
    tags: {
      'UserType': { operation: TTagOperationSet, value: 'Premium' },
      'Interests': { operation: TTagOperationAppend, values: ['sports', 'technology'] }
    }
  });
});

multiRegisterDevice

Anchor link to

Méthode d’enregistrement améliorée qui permet d’enregistrer un profil utilisateur avec plusieurs appareils et canaux de messagerie en un seul appel API. Cette méthode est particulièrement utile pour les applications multiplateformes ou lors de la mise en œuvre de stratégies de messagerie omnicanal.

Pushwoosh.push((api) => {
  api.multiRegisterDevice({
    user_id: 'user123',              // Optionnel : Identifiant de l'utilisateur
    email: 'user@example.com',       // Optionnel : E-mail pour la messagerie électronique
    sms_phone_number: '+1234567890', // Optionnel : Numéro de téléphone SMS (format E.164)
    whatsapp_phone_number: '+1234567890', // Optionnel : Numéro WhatsApp (format E.164)
    kakao_phone_number: '+1234567890',    // Optionnel : Numéro KakaoTalk (format E.164)
    language: 'en',                  // Optionnel : Code de langue (ISO 639-1)
    timezone: 'America/New_York',    // Optionnel : Identifiant de fuseau horaire
    city: 'New York',               // Optionnel : Ville pour le ciblage
    country: 'US',                  // Optionnel : Pays pour le ciblage
    state: 'NY',                    // Optionnel : État pour le ciblage
    tags: {                         // Optionnel : Valeurs de tag avec opérations
      'UserType': {
        operation: TTagOperationSet,     // Définir la valeur du tag (0)
        value: 'Premium'
      },
      'Interests': {
        operation: TTagOperationAppend,  // Ajouter à la valeur du tag (1)
        values: ['sports', 'technology']
      },
      'LoginCount': {
        operation: TTagOperationIncrement, // Incrémenter la valeur du tag (3)
        value: '1'
      }
    },
    push_devices: [                 // Optionnel : Tableau d'appareils push
      {
        hwid: 'web-device-456',
        platform: TPlatformChrome, // Plateforme Chrome (11)
        push_token: 'fcm-token-here',
        app_version: '2.1.0',
        platformData: {
          public_key: 'web-push-public-key',
          auth_token: 'web-push-auth-token',
          browser: 'chrome'
        }
      }
    ]
  })
  .then((response) => {
    console.log('Enregistrement multiple réussi :', response);
  })
  .catch((error) => {
    console.error('Échec de l\'enregistrement multiple :', error);
  });
});

Types de plateformes :

  • TPlatformSafari (10) : Plateforme Safari
  • TPlatformChrome (11) : Plateforme Chrome
  • TPlatformFirefox (12) : Plateforme Firefox

Types d’opérations sur les tags :

  • TTagOperationSet (0) : Définir la valeur du tag (remplacer la valeur existante)
  • TTagOperationAppend (1) : Ajouter à la valeur du tag (ajouter à la liste)
  • TTagOperationRemove (2) : Supprimer la valeur du tag (supprimer de la liste)
  • TTagOperationIncrement (3) : Incrémenter la valeur du tag (incrément numérique)

Avantages :

  • Appel API unique : Enregistrez plusieurs appareils et canaux en une seule fois
  • Opération atomique : Tous les enregistrements réussissent ou échouent ensemble
  • Centré sur l’utilisateur : Associe tous les appareils à un seul profil utilisateur
  • Tagging avancé : Prend en charge des opérations complexes sur les tags
  • Multiplateforme : Gérez plusieurs plateformes simultanément

Exemple d’envoi de Tags à Pushwoosh :

Pushwoosh.push((api) => {
  var myCustomTags = {
    'Tag 1': 123,
    'Tag 2': 'some string'
  };
  api.setTags(myCustomTags)
    .then((res) => {
      var skipped = res && res.skipped || [];
      if (!skipped.length) {
        console.log('succès');
      }
      else {
        console.warn('tags ignorés :', skipped);
      }
    })
    .catch((err) => {
      console.error('erreur setTags :', err);
    });
});

Incrémenter la valeur d’un Tag

Anchor link to

Pour incrémenter une valeur d’un Tag de type Nombre, utilisez le paramètre operation avec la valeur ‘increment’ comme suit :

Pushwoosh.push((api) => {
  api.setTags({
    'Tag 1': {
      operation: 'increment',
      value: 1
    }
  })
});

Ajouter des valeurs à un Tag

Anchor link to

Pour ajouter de nouvelles valeurs au Tag de type Liste existant, utilisez le paramètre operation avec la valeur ‘append’ comme suit :

Pushwoosh.push((api) => {
  api.setTags({
    'Tag 3': {
      operation: 'append',
      value: ['Value3']
    }
  })
});

Supprimer la valeur d’un Tag

Anchor link to

Pour supprimer une valeur d’un Tag de type Liste, utilisez le paramètre operation avec la valeur ‘remove’ comme suit :

Pushwoosh.push((api) =>{
  api.setTags({
    'Tag 3': {
      operation: 'remove',
      value: ['Value2']
    }
  })
});

Méthodes publiques

Anchor link to

Pushwoosh.subscribe()

Cette méthode est utilisée pour demander l’autorisation d’un utilisateur pour les notifications push. Si un utilisateur est déjà abonné, l’exécution de la méthode s’arrêtera.

Si un utilisateur ne s’est pas encore abonné aux notifications push :

1. L’autorisation pour les notifications push est demandée.

2. Si un utilisateur autorise les notifications, l’événement onSubscribe est déclenché.

Pushwoosh.subscribe() est exécuté automatiquement si autoSubscribe: true. est défini lors de l’initialisation du SDK.

Appelez cette méthode si vous avez choisi d’inviter manuellement un utilisateur à s’abonner aux notifications push en utilisant le paramètre autoSubscribe: false lors de l’initialisation :

<button onclick="Pushwoosh.subscribe()">S'abonner</button>
<script>
  Pushwoosh.push(['onSubscribe', (api) => {
    console.log('Utilisateur abonné avec succès');
  }]);
</script>

Pushwoosh.unsubscribe()

  1. La méthode /unregisterDevice est exécutée.
  2. L’événement onUnsubscribe est déclenché.
<button onclick="Pushwoosh.unsubscribe()">Se désabonner</button>
<script type="text/javascript">
  Pushwoosh.push(['onUnsubscribe', (api) => {
    console.log('Utilisateur désabonné avec succès');
  }]);
</script>

Pushwoosh.isSubscribed()

Vérifie si un utilisateur est abonné et renvoie un drapeau true/false.

Pushwoosh.isSubscribed().then((isSubscribed) => {
  console.log('isSubscribed', isSubscribed);
});

Pushwoosh.getHWID()

Renvoie le HWID de Pushwoosh.

Pushwoosh.getHWID().then((hwid) => {
  console.log('hwid :', hwid);
});

Pushwoosh.getPushToken()

Renvoie le jeton push s’il est disponible.

Pushwoosh.getPushToken().then((pushToken) => {
  console.log('pushToken :', pushToken);
});

Pushwoosh.getUserId()

Renvoie l’ID utilisateur s’il est disponible.

Pushwoosh.getUserId().then((userId) => {
  console.log('userId :', userId);
});

Pushwoosh.getParams()

Renvoie une liste des paramètres suivants :

Pushwoosh.getParams().then((params) => {
  params = params || {};
  var hwid = params.hwid;
  var pushToken = params.pushToken;
  var userId = params.userId;
});

Pushwoosh.isAvailableNotifications()

Vérifie si un navigateur prend en charge le WebSDK 3.0 de Pushwoosh, renvoie ‘true’ ou ‘false’.

Pushwoosh.isAvailableNotifications() // true/false

Méthodes InboxMessages

Anchor link to

messagesWithNoActionPerformedCount(): Promise<number>

Renvoie le nombre de messages ouverts.

Pushwoosh.pwinbox.messagesWithNoActionPerformedCount()
  .then((count) => {
    console.log(`${count} messages ouverts`);
  });

unreadMessagesCount()

Renvoie le nombre de messages non lus.

Pushwoosh.pwinbox.unreadMessagesCount()
  .then((count) => {
    console.log(`${count} messages non lus`);
  });

messagesCount(): Promise<number>

Renvoie le nombre total de messages.

Pushwoosh.pwinbox.messagesCount()
  .then((count) => {
    console.log(`${count} messages`);
  });

loadMessages(): Promise<Array>

Charge la liste des messages non supprimés.

Pushwoosh.pwinbox.loadMessages()
  .then(() => {
    console.log('Les messages ont été chargés');
  });

readMessagesWithCodes(codes: Array<string>): Promise<void>

Marque les messages comme lus par Inbox_Ids.

Pushwoosh.pwinbox.readMessagesWithCodes(codes)
  .then(() => {
    console.log('Les messages ont été lus');
  });

performActionForMessageWithCode(code: string): Promise<void>

Exécute l’action assignée à un message et marque le message comme lu.

Pushwoosh.pwinbox.performActionForMessageWithCode(code)
  .then(() => {
    console.log('L\'action a été effectuée');
  });

deleteMessagesWithCodes(codes: Array<string>): Promise<void>

Marque les messages comme supprimés.

Pushwoosh.pwinbox.deleteMessagesWithCodes([code])
  .then(() => {
    console.log('Les messages ont été supprimés');
  });

syncMessages(): Promise<void>

Synchronise les messages avec le serveur.

Pushwoosh.pwinbox.syncMessages()
  .then(() => {
    console.log('Les messages ont été synchronisés');
  });

Méthodes WebPopups

Anchor link to

L’API programmatique des pop-ups web est disponible chaque fois que le widget est chargé, ce qui est le comportement par défaut (voir ci-dessus). Accédez-y via Pushwoosh.moduleRegistry.webPopups une fois que l’événement web-popups-ready a été déclenché.

show(code: string): Promise<boolean>

Affiche un pop-up immédiatement, en ignorant toutes les conditions d’affichage (délai, règles de page, type d’appareil/visiteur, limitation de fréquence, type de déclencheur). Ferme un pop-up déjà visible pour faire de la place. Résout à false au lieu de rejeter lorsque le pop-up ne peut pas être affiché.

Pushwoosh.moduleRegistry.webPopups.show('popup_code')
  .then((shown) => console.log('Pop-up affiché :', shown));

hide(code?: string): boolean

Masque le pop-up visible. Si code est passé, ne le masque que s’il correspond au pop-up visible. Renvoie false si rien n’a été masqué.

Pushwoosh.moduleRegistry.webPopups.hide();

hideAll(): boolean

Masque le pop-up visible et rejette tout ce qui est encore en attente pour le chargement de la page actuelle. show() continue de fonctionner par la suite.

Pushwoosh.moduleRegistry.webPopups.hideAll();

isVisible(code?: string): boolean

Vérifie si un pop-up est actuellement visible. Sans code, vérifie si un pop-up quelconque est visible.

Pushwoosh.moduleRegistry.webPopups.isVisible('popup_code');

getVisibleCode(): string | null

Renvoie le code du pop-up actuellement à l’écran, ou null si aucun n’est visible.

Pushwoosh.moduleRegistry.webPopups.getVisibleCode();

getAvailableCodes(): Array<string>

Renvoie les codes de chaque pop-up que le serveur a renvoyé pour cet appareil.

Pushwoosh.moduleRegistry.webPopups.getAvailableCodes();

getState(): object

Renvoie un instantané de l’état du pop-up web : visible (code à l’écran, ou null), queued (codes en attente de l’emplacement d’affichage), waiting (codes avec un minuteur de délai armé), et available (chaque code que le serveur a renvoyé).

Pushwoosh.moduleRegistry.webPopups.getState();

Prise en charge des Progressive Web App

Anchor link to

Pour intégrer Pushwoosh dans votre Progressive Web Application (PWA), suivez les étapes décrites ci-dessous.

1. Copiez le chemin vers votre fichier Service Worker :

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js') // <- l'URL de votre service worker
  });
}

Ensuite, utilisez le paramètre serviceWorkerUrl lors de l’initialisation du WebSDK comme suit :

var Pushwoosh = Pushwoosh || [];
Pushwoosh.push(['init', {
  logLevel: 'error',
  applicationCode: 'XXXXX-XXXXX',
  safariWebsitePushID: 'web.com.example.domain',
  defaultNotificationTitle: 'Pushwoosh',
  defaultNotificationImage: 'https://yoursite.com/img/logo-medium.png',
  serviceWorkerUrl: '/service-worker.js', // <- l'URL de votre service worker
}]);

Le WebSDK n’enregistre pas le nouveau Service Worker immédiatement ; un Service Worker est enregistré lorsqu’il est nécessaire :

  • lorsqu’un appareil reçoit un jeton push (lors de l’enregistrement de l’appareil ou d’un réabonnement),
  • lorsqu’un jeton push est supprimé (lors de la suppression d’un appareil de la base d’utilisateurs).

Cela accélère le chargement de vos pages en réduisant le nombre de requêtes au serveur.

Les navigateurs ne permettent pas d’enregistrer deux Service Workers différents en même temps (en savoir plus : https://github.com/w3c/ServiceWorker/issues/921), donc pour que votre PWA fonctionne correctement, un Service Worker commun doit être enregistré pour votre base de code et la base de code de Pushwoosh.

2. Ajoutez la chaîne suivante à votre Service Worker (au début ou à la fin, peu importe) :

importScripts('https://cdn.pushwoosh.com/webpush/v3/pushwoosh-service-worker.js' + self.location.search);

Ainsi, vous activez la réception et le traitement des notifications push envoyées via les services Pushwoosh pour votre Service Worker.

Installation depuis Google Tag Manager

Anchor link to

Utilisez le code suivant dans votre Google Tag Manager pour initialiser le SDK Pushwoosh. Créez une balise HTML personnalisée et collez le code ci-dessous. Assurez-vous de modifier votre code d’application Pushwoosh, votre ID de site web Safari et l’URL de l’image de notification par défaut.
Définissez également une priorité de déclenchement de balise élevée (ex : 100) et déclenchez-la sur Toutes les pages. Voir la capture d’écran ci-dessous.Copier

<script type="text/javascript" src="//cdn.pushwoosh.com/webpush/v3/pushwoosh-web-notifications.js" async></script>
<script type="text/javascript">
  var Pushwoosh = Pushwoosh || [];
  Pushwoosh.push(['init', {
    logLevel: 'error',
    applicationCode: 'XXXXX-XXXXX',
    safariWebsitePushID: 'web.com.example.domain',
    defaultNotificationTitle: 'Pushwoosh',
    defaultNotificationImage: 'https://yoursite.com/img/logo-medium.png',
    autoSubscribe: true,
    subscribeWidget: {
      enable: false
    },
    userId: 'user_id'
  }]);
</script>