SDK sur votre prélanding

En règle générale, un visiteur arrive sur un prélanding et passe de là à la page de la boutique de la PWA, où se trouve le bouton d'installation. Mais l'installation et l'abonnement aux notifications push peuvent être déclenchés directement depuis votre propre prélanding : vous connectez le Browser SDK et appelez ses méthodes depuis vos propres boutons. Le visiteur installe alors l'application et s'abonne aux notifications sans quitter votre page.

Le visiteur n'est pas obligé d'installer l'application pour cela : l'abonnement push fonctionne sans installation.

Prérequis

• Un prélanding hébergé dans Qubix. Il s'agit de votre page dans la section Websites — importez-la de la même façon qu'un site ordinaire (voir Importer un site).
• Un domaine configuré et actif. Le prélanding doit être servi sur un domaine configuré dans Qubix et actif (voir Domaines). C'est indispensable : l'installation et les notifications push ne fonctionnent que si la page et les adresses de service du SDK sont sur le même domaine.
• Une PWA créée — vous aurez besoin de son identifiant (pwaId) disponible sur la fiche dans la section PWA Apps.

Comment connecter

1. Dans le code du prélanding, définissez la configuration et chargez le script du SDK. La configuration doit être placée avant le script :

   index.htmlHTML

   <script>
     window.pwaConfig = {
       pwaId: 'YOUR-PWA-ID',
       domain: 'your-domain.com',
     }
   </script>
   <script src="https://your-domain.com/sdk.js" defer></script>

   La clé push est automatiquement intégrée dans /sdk.js — vous n'avez pas besoin de l'ajouter manuellement. La description complète des champs se trouve dans la référence du Browser SDK.

2. Préparez le SDK pour l'installation — une seule fois, au chargement de la page. Cet appel enregistre la partie service et attache le manifeste de l'application :

   JavaScript

   sdk.pwa.init()

3. Associez l'installation à votre propre bouton :

   HTML

   <button id="install">Install the app</button>
   <script>
     document.getElementById('install').addEventListener('click', () => {
       sdk.pwa.install()
     })
   </script>

4. Associez l'abonnement push à votre propre bouton (ou appelez-le au moment opportun) :

   JavaScript

   await sdk.subscribePush()

C'est tout — l'installation et l'abonnement s'effectuent directement sur votre page. Le visiteur n'est pas redirigé vers la page de la boutique.

Conseil

Si un scénario nécessite tout de même la page de la boutique, sdk.showStore() permet de l'ouvrir. Ne pas appeler cette méthode — le visiteur reste sur votre prélanding.

Le navigateur gère l'installation

Affichez le bouton d'installation uniquement lorsque l'installation est réellement disponible — vérifiez sdk.pwa.canInstall(). Les navigateurs n'autorisent pas toujours l'invite d'installation : une connexion sécurisée (HTTPS) est requise, et généralement une action du visiteur sur la page. C'est pourquoi l'installation et l'abonnement sont habituellement associés à un appui explicite plutôt que déclenchés au chargement.

Vérification

Ouvrez le prélanding sur un téléphone et appuyez sur vos boutons — le navigateur affichera l'invite d'installation et l'invite de notification. Le résultat est visible dans les rapports : les événements install_accepted, push_allow et autres arrivent dans le flux d'événements.

Étapes suivantes

Référence du Browser SDK

Toutes les méthodes et tous les événements du Browser SDK.

Importer un site

Comment importer un prélanding dans Qubix.

Campagnes push

Envoyer des notifications aux abonnés.