🔔 Push notifications
Notifiche push Firebase: da sito web ad app Flutter
Questa guida spiega come integrare le notifiche in un’app Wrapply: notifiche locali, Firebase o OneSignal, richiesta permessi, sincronizzazione del token dispositivo e invio dal backend.
Comandi bridge per notifiche
Questi sono i comandi reali esposti dall'app Wrapply generata. Usali solo dopo che il bridge è pronto e mantieni sempre un fallback per il sito aperto da browser normale.
| Comando | Uso | Payload | Risposta tipica |
|---|---|---|---|
window.Wrapply.notifications.requestPermission(payload) | Richiede il permesso nativo per le notifiche | { provider: 'firebase' } | { ok, granted, permission } |
window.Wrapply.notifications.getToken(payload) | Legge il token dispositivo per il provider selezionato | { provider: 'firebase' } | { ok, token, selectedProvider } |
window.Wrapply.notifications.refreshToken(payload) | Forza l'aggiornamento del token | { provider: 'firebase' } | { ok, token } |
window.Wrapply.notifications.updateToken(payload) | Alias di refreshToken | { provider } | { ok, token } |
window.Wrapply.notifications.show(payload) | Mostra una notifica locale immediata | { title, body, data } | { ok, shown: true } |
window.Wrapply.notifications.getStatus(payload) | Controlla stato permessi e provider | { 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' })
});
Esempi di integrazione
Puoi usare lo stesso pattern bridge in JavaScript, React, Vue, Angular, PHP/Laravel, WordPress o jQuery. La parte importante è attendere il bridge nativo prima di chiamarlo.
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)
});
}
Hook React
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 };
}
Composable Vue
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 };
}
Service Angular
@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 / template backend
<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>
Quando abiliti funzionalità native, lo ZIP generato include anche WRAPPLY_NATIVE_BRIDGE_GUIDE.pdf con moduli attivi, chiamate esatte e note di implementazione per il cliente.
Come funzionano le notifiche nelle app Wrapply
Le notifiche non sono solo un pulsante nell’app. Servono permesso, provider, token dispositivo e di solito un backend o una Cloud Function per inviare messaggi remoti.
| Step | Chiamata bridge | Cosa fa |
|---|---|---|
| 1 | requestPermission | Chiede il permesso prima di mostrare notifiche |
| 2 | getToken | Legge il token local/Firebase/OneSignal e lo invia al backend |
| 3 | refreshToken / updateToken | Aggiorna il token dopo login, logout, cambio account o reinstallazione |
| 4 | show | Mostra una notifica locale immediata dal sito dentro l’app |
| 5 | getStatus | Controlla permesso e configurazione provider prima di mostrare azioni UI |
Le notifiche locali funzionano senza file esterni ma non sono vere push remote. Firebase e OneSignal richiedono configurazione provider e backend per inviare messaggi.
Provider notifiche
Il sito può scegliere il provider notifiche in ogni chiamata. Wrapply include nell’app generata solo il provider selezionato.
| Provider | Uso | Configurazione richiesta | Nota importante |
|---|---|---|---|
| local | Default sicuro, token locale salvato in shared preferences | Nessun file esterno | Utile per test/sessione; non è un vero token push remoto |
| firebase | Provider Firebase Cloud Messaging | android/app/google-services.json e opzionale ios/Runner/GoogleService-Info.plist | Se mancano i file, il bridge torna ok:false/configured:false |
| onesignal | Provider OneSignal | OneSignal App ID in configurazione/build | Richiede setup OneSignal prima di inviare push remote |
Esempi per tipo di codice
Usa le stesse chiamate bridge da JavaScript, React, Vue, Angular o CMS. La parte importante è attendere wrapplyNativeBridgeReady, chiedere il permesso, leggere il token e inviarlo al backend.
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 })
});
});
Quando abiliti funzioni bridge, Wrapply fornisce anche un PDF con moduli attivi, chiamate esatte, configurazione provider e note per la review degli store.