🔔 Push notifications
Firebase Push-Nachrichten: von Website zu Flutter-App
Diese Anleitung erklärt, wie Benachrichtigungen in eine Wrapply-App integriert werden: lokale Benachrichtigungen, Firebase oder OneSignal, Berechtigungen, Geräte-Token-Sync und Backend-Versand.
Bridge-Befehle für Benachrichtigungen
Dies sind die echten Benachrichtigungsbefehle der generierten Wrapply-App. Verwenden Sie sie erst, wenn die Bridge bereit ist, und behalten Sie einen Fallback für normale Browser.
| Befehl | Verwendung | Payload | Typische Antwort |
|---|---|---|---|
window.Wrapply.notifications.requestPermission(payload) | Fragt native Benachrichtigungsberechtigung an | { provider: 'firebase' } | { ok, granted, permission } |
window.Wrapply.notifications.getToken(payload) | Liest Geräte-Token für den gewählten Provider | { provider: 'firebase' } | { ok, token, selectedProvider } |
window.Wrapply.notifications.refreshToken(payload) | Erzwingt Token-Aktualisierung | { provider: 'firebase' } | { ok, token } |
window.Wrapply.notifications.updateToken(payload) | Alias von refreshToken | { provider } | { ok, token } |
window.Wrapply.notifications.show(payload) | Zeigt sofortige lokale Benachrichtigung | { title, body, data } | { ok, shown: true } |
window.Wrapply.notifications.getStatus(payload) | Prüft Berechtigungs- und Providerstatus | { provider } | { ok, granted, configured } |
onWrapplyReady(async (Wrapply) => {
if (!Wrapply.notifications) return;
const permission = await Wrapply.notifications.requestPermission({ provider: 'firebase' });
if (!permission.ok || !permission.granted) return;
const token = await Wrapply.notifications.getToken({ provider: 'firebase' });
await fetch('/api/device-token', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ token: token.token, provider: token.selectedProvider })
});
});
if (!Wrapply.notifications) return;
const permission = await Wrapply.notifications.requestPermission({ provider: 'firebase' });
if (!permission.ok || !permission.granted) return;
const token = await Wrapply.notifications.getToken({ provider: 'firebase' });
await fetch('/api/device-token', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ token: token.token, provider: token.selectedProvider })
});
});
await window.Wrapply.notifications.show({
title: 'Order updated',
body: 'Your order is ready',
data: JSON.stringify({ url: '/orders/123' })
});
title: 'Order updated',
body: 'Your order is ready',
data: JSON.stringify({ url: '/orders/123' })
});
Integrationsbeispiele
Das gleiche Bridge-Muster funktioniert in JavaScript, React, Vue, Angular, PHP/Laravel, WordPress oder jQuery. Wichtig ist, auf die native Bridge zu warten.
JavaScript
async function runNativeFeature(currentUser) {
if (!window.Wrapply?.notifications) return;
const permission = await window.Wrapply.notifications.requestPermission({ provider: 'firebase' });
if (!permission.ok || !permission.granted) return;
const result = await window.Wrapply.notifications.getToken({ provider: 'firebase' });
await fetch('/api/wrapply-event', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(result)
});
}
if (!window.Wrapply?.notifications) return;
const permission = await window.Wrapply.notifications.requestPermission({ provider: 'firebase' });
if (!permission.ok || !permission.granted) return;
const result = await window.Wrapply.notifications.getToken({ provider: 'firebase' });
await fetch('/api/wrapply-event', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(result)
});
}
React Hook
import { useEffect, useState } from 'react';
export function useWrapplyBridge() {
const [ready, setReady] = useState(false);
useEffect(() => {
if (window.Wrapply?.__nativeBridgeReady) return setReady(true);
const onReady = () => setReady(true);
window.addEventListener('wrapplyNativeBridgeReady', onReady);
return () => window.removeEventListener('wrapplyNativeBridgeReady', onReady);
}, []);
return { ready, Wrapply: ready ? window.Wrapply : null };
}
export function useWrapplyBridge() {
const [ready, setReady] = useState(false);
useEffect(() => {
if (window.Wrapply?.__nativeBridgeReady) return setReady(true);
const onReady = () => setReady(true);
window.addEventListener('wrapplyNativeBridgeReady', onReady);
return () => window.removeEventListener('wrapplyNativeBridgeReady', onReady);
}, []);
return { ready, Wrapply: ready ? window.Wrapply : null };
}
Vue Composable
import { ref, onMounted } from 'vue';
export function useWrapplyBridge() {
const ready = ref(false);
onMounted(() => {
if (window.Wrapply?.__nativeBridgeReady) ready.value = true;
else window.addEventListener('wrapplyNativeBridgeReady', () => ready.value = true, { once: true });
});
return { ready };
}
export function useWrapplyBridge() {
const ready = ref(false);
onMounted(() => {
if (window.Wrapply?.__nativeBridgeReady) ready.value = true;
else window.addEventListener('wrapplyNativeBridgeReady', () => ready.value = true, { once: true });
});
return { ready };
}
Angular Service
@Injectable({ providedIn: 'root' })
export class WrapplyBridgeService {
async callNative(payload = {}) {
if (!window.Wrapply?.notifications) return { ok: false, error: 'Bridge unavailable' };
return window.Wrapply.notifications.getStatus(payload);
}
}
export class WrapplyBridgeService {
async callNative(payload = {}) {
if (!window.Wrapply?.notifications) return { ok: false, error: 'Bridge unavailable' };
return window.Wrapply.notifications.getStatus(payload);
}
}
jQuery
$('#wrapply-action').on('click', async function () {
if (!window.Wrapply?.notifications) return;
const result = await window.Wrapply.notifications.getStatus({});
$('#wrapply-output').text(JSON.stringify(result, null, 2));
});
if (!window.Wrapply?.notifications) return;
const result = await window.Wrapply.notifications.getStatus({});
$('#wrapply-output').text(JSON.stringify(result, null, 2));
});
CMS / Backend Template
<button onclick="runNativeFeature(window.currentUser)">Open app feature</button>
<script>
window.addEventListener('wrapplyNativeBridgeReady', function () {
document.body.classList.add('wrapply-native-app');
});
</script>
<script>
window.addEventListener('wrapplyNativeBridgeReady', function () {
document.body.classList.add('wrapply-native-app');
});
</script>
Wenn native Funktionen aktiviert sind, enthält das ZIP zusätzlich WRAPPLY_NATIVE_BRIDGE_GUIDE.pdf mit aktiven Modulen, exakten Aufrufen und Implementierungshinweisen.
So funktionieren Benachrichtigungen in Wrapply-Apps
Benachrichtigungen sind nicht nur ein Button in der App. Sie brauchen Berechtigung, Provider, Geräte-Token und meist ein Backend oder eine Cloud Function für Remote-Nachrichten.
| Schritt | Bridge-Aufruf | Funktion |
|---|---|---|
| 1 | requestPermission | Fragt Berechtigung vor Benachrichtigungen an |
| 2 | getToken | Liest local/Firebase/OneSignal Token und sendet es ans Backend |
| 3 | refreshToken / updateToken | Aktualisiert Token nach Login, Logout, Konto-Wechsel oder Neuinstallation |
| 4 | show | Zeigt lokale Sofortbenachrichtigung aus der Website in der App |
| 5 | getStatus | Prüft Berechtigung und Provider-Konfiguration vor UI-Aktionen |
Lokale Benachrichtigungen funktionieren ohne externe Dateien, sind aber keine echten Remote-Pushs. Firebase und OneSignal benötigen Konfiguration und Backend.
Benachrichtigungsanbieter
Die Website kann den Benachrichtigungsanbieter pro Aufruf wählen. Wrapply integriert nur den ausgewählten Anbieter in die generierte App.
| Anbieter | Nutzung | Erforderliche Konfiguration | Wichtiger Hinweis |
|---|---|---|---|
| local | Sicherer Standard, lokales Token in shared preferences | Keine externe Datei | Nützlich für Tests/Sitzung; kein echtes Remote-Push-Token |
| firebase | Firebase Cloud Messaging Anbieter | android/app/google-services.json und optional ios/Runner/GoogleService-Info.plist | Fehlen Dateien, kommt ok:false/configured:false zurück |
| onesignal | OneSignal Anbieter | OneSignal App ID in Konfiguration/Build | Erfordert OneSignal-Setup vor Remote-Pushs |
Beispiele nach Codetyp
Nutze dieselben Bridge-Aufrufe aus JavaScript, React, Vue, Angular oder CMS-Seiten. Wichtig ist: auf wrapplyNativeBridgeReady warten, Berechtigung anfragen, Token lesen und ans Backend senden.
function onWrapplyReady(callback) {
if (window.Wrapply && window.Wrapply.__nativeBridgeReady) {
callback(window.Wrapply);
return;
}
window.addEventListener("wrapplyNativeBridgeReady", () => {
callback(window.Wrapply);
}, { once: true });
}
if (window.Wrapply && window.Wrapply.__nativeBridgeReady) {
callback(window.Wrapply);
return;
}
window.addEventListener("wrapplyNativeBridgeReady", () => {
callback(window.Wrapply);
}, { once: true });
}
onWrapplyReady(async (Wrapply) => {
const permission = await Wrapply.notifications.requestPermission({ provider: "firebase" });
if (!permission.ok || !permission.granted) return;
const token = await Wrapply.notifications.getToken({ provider: "firebase" });
await fetch("/api/device-token", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ token: token.token, provider: token.provider })
});
await Wrapply.notifications.show({
title: "Welcome",
body: "Notifications are enabled for this app.",
data: JSON.stringify({ url: window.location.href })
});
});
const permission = await Wrapply.notifications.requestPermission({ provider: "firebase" });
if (!permission.ok || !permission.granted) return;
const token = await Wrapply.notifications.getToken({ provider: "firebase" });
await fetch("/api/device-token", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ token: token.token, provider: token.provider })
});
await Wrapply.notifications.show({
title: "Welcome",
body: "Notifications are enabled for this app.",
data: JSON.stringify({ url: window.location.href })
});
});
Wenn Bridge-Funktionen aktiv sind, liefert Wrapply zusätzlich ein PDF mit aktiven Modulen, exakten Aufrufen, Provider-Konfiguration und Store-Review-Hinweisen.