Guide d’intégration du SDK Web Push pour boutique Shopify

Présentation

Ce guide explique comment intégrer le SDK Web Push dans une boutique Shopify pour activer les notifications push navigateur.

Prérequis

• Accès administrateur à la boutique Shopify
• Fichiers du SDK Web Push (webSdk.produce.min.3.3.4.js, sw.produce.min.3.3.4.js)
• Connaissances de base en édition de thèmes Shopify

Étapes d’intégration

Ajout via l’éditeur de thème Shopify (recommandé)

1. Envoyer les fichiers SDK dans Shopify

1. Se connecter à l’admin Shopify
2. Aller dans Boutique en ligne > Thèmes
3. Sur le thème actif, cliquer sur Actions puis Modifier le code
4. Dans le dossier Ressources, cliquer sur Ajouter une ressource
5. Envoyer webSdk.produce.min.3.3.4.js (fichier principal du SDK)
6. Envoyer sw.produce.min.3.3.4.js (fichier Service Worker utilisé pour le push)
7. Noter les URL des ressources (ex. {{ 'webSdk.produce.min.3.3.4.js' | asset_url }} et {{ 'sw.produce.min.3.3.4.js' | asset_url }})

Important : sw.produce.min.3.3.4.js est le Service Worker qui traite les messages push en arrière-plan. Son chemin doit être correctement configuré à l’initialisation du SDK.

2. Inclure le script SDK et initialiser

1. Dans l’éditeur de thème, ouvrir le fichier theme.liquid
2. Ajouter le code suivant avant la balise </head> :

              
              <script>
  (function() {
    function initializeSDK() {
      const visitorId = getFingerprint();

      if (typeof window.MTpushInterface !== 'undefined') {
        MTpushInterface.mtPush.onDisconnect(function () {
          console.log("onDisconnect");
        });

        MTpushInterface.onMsgReceive((msgData) => {
          console.log("Message push reçu:", msgData);
        });

        MTpushInterface.init({
          appkey: "",
          user_str: visitorId,
          fail(err) {
            console.log("Échec init push", err);
          },
          success(data) {
            console.log("Init push réussie", data);
          },
          webPushcallback(code, tip) {
            console.log("Code et message", code, tip);
          },
          swUrl: '{{ "sw.produce.min.3.3.4.js" | asset_url }}',
        });
      }
    }

    window.MTpushInterfaceReady = initializeSDK;
  })();
</script>
{{ 'webSdk.produce.min.3.3.4.js' | asset_url | script_tag }}

            

Vérification

1. Vérifier le chargement du SDK

1. Ouvrir une page de la boutique
2. Clic droit > Inspecter ou F12
3. Dans la console, vérifier les messages de chargement du SDK
4. Saisir window.MTpushInterface pour confirmer qu’il est défini

2. Tester le push

1. La boutique doit être en HTTPS (obligatoire pour le web push)
2. Vérifier si le navigateur affiche la demande de permission push (si configurée)

3. Vérifier l’enregistrement du Service Worker

1. Ouvrir les outils de développement (F12)
2. Onglet Application
3. Dans le panneau gauche, Service Workers
4. Vérifier que sw.produce.min.3.3.4.js est enregistré
5. En cas d’erreur, consulter la console

Dépannage

Problèmes courants et solutions

Q1 : Le SDK ne se charge pas

• Chemins : Vérifier que asset_url est correct
• Réseau : Vérifier que les fichiers JS sont bien téléchargés
• Ressources : S’assurer que les fichiers sont accessibles dans les Ressources Shopify

Q2 : Échec de l’initialisation

• Ordre de chargement : Le script SDK doit s’exécuter avant le code d’init
• HTTPS : Le web push ne fonctionne qu’en HTTPS
• Navigateur : Vérifier la prise en charge du web push
• swUrl : Configurer correctement et s’assurer que l’URL du SW est accessible
• Ressources : Confirmer que sw.produce.min.3.3.4.js est bien envoyé dans les Ressources

Q4 : Échec de l’enregistrement du Service Worker

• swUrl : Utiliser {{ 'sw.produce.min.3.3.4.js' | asset_url }} pour l’URL correcte
• Accès : Ouvrir l’URL du Service Worker dans le navigateur et vérifier le téléchargement
• Application > Service Workers : Vérifier l’état d’enregistrement
• HTTPS : Les Service Workers nécessitent HTTPS (sauf en localhost)