🔔 Push notifications
Notificações push Firebase: de site para app Flutter
Este guia explica como integrar notificações em um app Wrapply: notificações locais, Firebase ou OneSignal, permissões, sincronização do token do dispositivo e envio pelo backend.
Comandos bridge para notificações
Estes são os comandos reais de notificação expostos pelo app Wrapply gerado. Use-os somente quando o bridge estiver pronto e mantenha fallback para navegadores comuns.
| Comando | Uso | Payload | Resposta típica |
|---|---|---|---|
window.Wrapply.notifications.requestPermission(payload) | Solicita permissão nativa de notificações | { provider: 'firebase' } | { ok, granted, permission } |
window.Wrapply.notifications.getToken(payload) | Lê o token do dispositivo para o provedor selecionado | { provider: 'firebase' } | { ok, token, selectedProvider } |
window.Wrapply.notifications.refreshToken(payload) | Força atualização do token | { provider: 'firebase' } | { ok, token } |
window.Wrapply.notifications.updateToken(payload) | Alias de refreshToken | { provider } | { ok, token } |
window.Wrapply.notifications.show(payload) | Mostra uma notificação local imediata | { title, body, data } | { ok, shown: true } |
window.Wrapply.notifications.getStatus(payload) | Verifica permissões e estado do provedor | { 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' })
});
Exemplos de integração
Você pode usar o mesmo padrão bridge em JavaScript, React, Vue, Angular, PHP/Laravel, WordPress ou jQuery. O ponto principal é esperar o bridge nativo antes de chamar.
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 recursos nativos estão ativos, o ZIP gerado também inclui WRAPPLY_NATIVE_BRIDGE_GUIDE.pdf com módulos ativos, chamadas exatas e notas de implementação.
Como funcionam as notificações em apps Wrapply
Notificações não são apenas um botão no app. Elas exigem permissão, provedor, token do dispositivo e normalmente um backend ou Cloud Function para enviar mensagens remotas.
| Etapa | Chamada bridge | O que faz |
|---|---|---|
| 1 | requestPermission | Solicita permissão antes de mostrar notificações |
| 2 | getToken | Lê token local/Firebase/OneSignal e envia ao backend |
| 3 | refreshToken / updateToken | Atualiza token após login, logout, troca de conta ou reinstalação |
| 4 | show | Mostra uma notificação local imediata do site dentro do app |
| 5 | getStatus | Verifica permissão e configuração antes de mostrar ações UI |
Notificações locais funcionam sem arquivos externos, mas não são push remotas reais. Firebase e OneSignal exigem configuração e backend para envio.
Provedores de notificações
O site pode escolher o provedor de notificações em cada chamada. O Wrapply inclui somente o provedor selecionado no app gerado.
| Provedor | Uso | Configuração necessária | Nota importante |
|---|---|---|---|
| local | Padrão seguro, token local salvo em shared preferences | Nenhum arquivo externo | Útil para testes/sessão; não é token push remoto real |
| firebase | Provedor Firebase Cloud Messaging | android/app/google-services.json e opcional ios/Runner/GoogleService-Info.plist | Se os arquivos faltarem, retorna ok:false/configured:false |
| onesignal | Provedor OneSignal | OneSignal App ID na configuração/build | Exige setup OneSignal antes de enviar push remotas |
Exemplos por tipo de código
Use as mesmas chamadas bridge em JavaScript, React, Vue, Angular ou CMS. O ponto importante é aguardar wrapplyNativeBridgeReady, pedir permissão, ler o token e enviá-lo ao 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 recursos bridge são ativados, o Wrapply também fornece um PDF com módulos ativos, chamadas exatas, configuração do provedor e notas para revisão nas lojas.