SDK auf Ihrer Vorlandingpage

Üblicherweise gelangt ein Besucher auf eine Vorlandingpage und wechselt von dort zur PWA-Store-Karte, auf der sich die Installationsschaltfläche befindet. Installation und Push-Abonnement lassen sich jedoch direkt auf Ihrer eigenen Vorlandingpage auslösen: Sie binden das Browser SDK ein und rufen seine Methoden über Ihre eigenen Schaltflächen auf. Der Besucher installiert die App und abonniert Push-Benachrichtigungen, ohne die Seite zur Store-Karte verlassen zu müssen.

Der Besucher muss die App dabei nicht zwingend installieren: Das Push-Abonnement funktioniert auch ohne Installation.

Voraussetzungen

• Eine in Qubix hochgeladene Vorlandingpage. Dabei handelt es sich um Ihre Seite im Bereich Websites — laden Sie sie genauso hoch wie eine gewöhnliche Website (siehe Website hochladen).
• Eine eingerichtete und aktive Domain. Die Vorlandingpage muss über eine Domain bereitgestellt werden, die in Qubix eingerichtet und aktiv ist (siehe Domains). Dies ist erforderlich: Installation und Push funktionieren nur, wenn sich die Seite und die Dienstadressen des SDK auf derselben Domain befinden.
• Eine erstellte PWA – Sie benötigen deren Bezeichner (pwaId) aus der Karte im Bereich PWA Apps.

Einbindung

1. Fügen Sie im Code der Vorlandingpage die Konfiguration ein und laden Sie das SDK-Skript. Die Konfiguration muss vor dem Skript stehen:

   index.htmlHTML

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

   Der Push-Schlüssel wird automatisch in /sdk.js eingebettet — Sie müssen ihn nicht manuell hinzufügen. Eine vollständige Beschreibung aller Felder finden Sie in der Browser SDK Referenz.

2. Bereiten Sie das SDK für die Installation vor – einmalig beim Laden der Seite. Dieser Aufruf registriert den Service-Teil und bindet das App-Manifest ein:

   JavaScript

   sdk.pwa.init()

3. Verknüpfen Sie die Installation mit Ihrer eigenen Schaltfläche:

   HTML

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

4. Verknüpfen Sie das Push-Abonnement mit Ihrer eigenen Schaltfläche (oder rufen Sie es zu einem geeigneten Zeitpunkt auf):

   JavaScript

   await sdk.subscribePush()

Fertig – Installation und Abonnement erfolgen direkt auf Ihrer Seite. Der Besucher wird nicht zur Store-Karte weitergeleitet.

Hinweis

Sollte ein bestimmtes Szenario die Store-Karte erfordern, öffnet sdk.showStore() diese. Rufen Sie diese Methode nicht auf – der Besucher verbleibt auf Ihrer Vorlandingpage.

Der Browser steuert die Installation

Zeigen Sie die Installationsschaltfläche nur an, wenn eine Installation tatsächlich möglich ist – prüfen Sie dazu sdk.pwa.canInstall(). Browser erlauben die Installationsaufforderung nicht immer: Eine sichere Verbindung (HTTPS) ist erforderlich, und in der Regel muss der Besucher zuvor auf der Seite aktiv gewesen sein. Deshalb werden sowohl Installation als auch Abonnement üblicherweise an einen expliziten Tap gebunden und nicht beim Laden der Seite ausgelöst.

Überprüfung

Öffnen Sie die Vorlandingpage auf einem Mobilgerät und tippen Sie auf Ihre Schaltflächen – der Browser zeigt die Installations- und die Benachrichtigungsaufforderung an. Das Ergebnis ist in den Berichten sichtbar: Die Ereignisse install_accepted, push_allow und weitere werden im Ereignisstrom erfasst.

Nächste Schritte

Browser SDK reference

All Browser SDK methods and events.

Uploading a website

How to upload a prelanding to Qubix.

Push campaigns

Sending notifications to those who subscribed.