🔔 Push notifications
Notifications push Firebase : du site web à l'app Flutter
Ce guide explique comment intégrer les notifications dans une app Wrapply : notifications locales, Firebase ou OneSignal, permissions, synchronisation du token appareil et envoi depuis le backend.
Commandes bridge pour les notifications
Voici les commandes de notification réellement exposées par l'app Wrapply générée. Utilisez-les seulement lorsque le bridge est prêt et gardez un fallback pour les navigateurs standards.
| Commande | Usage | Payload | Réponse typique |
|---|---|---|---|
window.Wrapply.notifications.requestPermission(payload) | Demande l'autorisation native de notification | { provider: 'firebase' } | { ok, granted, permission } |
window.Wrapply.notifications.getToken(payload) | Lit le token appareil pour le provider sélectionné | { provider: 'firebase' } | { ok, token, selectedProvider } |
window.Wrapply.notifications.refreshToken(payload) | Force le rafraîchissement du token | { provider: 'firebase' } | { ok, token } |
window.Wrapply.notifications.updateToken(payload) | Alias de refreshToken | { provider } | { ok, token } |
window.Wrapply.notifications.show(payload) | Affiche une notification locale immédiate | { title, body, data } | { ok, shown: true } |
window.Wrapply.notifications.getStatus(payload) | Vérifie les autorisations et l'état du 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' })
});
Exemples d'intégration
Vous pouvez utiliser le même pattern bridge en JavaScript, React, Vue, Angular, PHP/Laravel, WordPress ou jQuery. L'important est d'attendre le bridge natif avant de l'appeler.
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>
Lorsque les fonctions natives sont activées, le ZIP généré inclut aussi WRAPPLY_NATIVE_BRIDGE_GUIDE.pdf avec modules actifs, appels exacts et notes d'implémentation.
Fonctionnement des notifications dans les apps Wrapply
Les notifications ne sont pas seulement un bouton dans l’app. Elles nécessitent une autorisation, un fournisseur, un token appareil et souvent un backend ou une Cloud Function.
| Étape | Appel bridge | Rôle |
|---|---|---|
| 1 | requestPermission | Demande l’autorisation avant d’afficher des notifications |
| 2 | getToken | Lit le token local/Firebase/OneSignal et l’envoie au backend |
| 3 | refreshToken / updateToken | Met à jour le token après login, logout, changement de compte ou réinstallation |
| 4 | show | Affiche une notification locale immédiate depuis le site dans l’app |
| 5 | getStatus | Vérifie permission et configuration avant d’afficher des actions UI |
Les notifications locales fonctionnent sans fichiers externes mais ne sont pas de vraies push distantes. Firebase et OneSignal exigent une configuration et un backend.
Fournisseurs de notifications
Le site peut choisir le fournisseur de notifications à chaque appel. Wrapply inclut uniquement le fournisseur sélectionné dans l’app générée.
| Fournisseur | Usage | Configuration requise | Note importante |
|---|---|---|---|
| local | Défaut sûr, token local stocké en shared preferences | Aucun fichier externe | Utile pour test/session ; pas un vrai token push distant |
| firebase | Fournisseur Firebase Cloud Messaging | android/app/google-services.json et optionnel ios/Runner/GoogleService-Info.plist | Si les fichiers manquent, retour ok:false/configured:false |
| onesignal | Fournisseur OneSignal | OneSignal App ID dans configuration/build | Nécessite la configuration OneSignal avant les push distantes |
Exemples par type de code
Utilisez les mêmes appels bridge depuis JavaScript, React, Vue, Angular ou CMS. Le point essentiel est d’attendre wrapplyNativeBridgeReady, demander l’autorisation, lire le token et l’envoyer au 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 })
});
});
Quand les fonctions bridge sont activées, Wrapply fournit aussi un PDF avec modules actifs, appels exacts, configuration fournisseur et notes pour la revue des stores.