Push Notifications
Firebase Cloud Messaging (FCM) — Server
import admin from 'firebase-admin';
admin.initializeApp({
credential: admin.credential.cert(serviceAccount),
});
// Send to single device
await admin.messaging().send({
token: deviceToken,
notification: { title: 'New Order', body: 'Order #1234 confirmed' },
data: { orderId: '1234', type: 'order_confirmed' },
android: { priority: 'high' },
apns: { payload: { aps: { sound: 'default', badge: 1 } } },
});
// Send to topic
await admin.messaging().send({
topic: 'promotions',
notification: { title: 'Flash Sale', body: '50% off today!' },
});
Web Push (Service Worker)
// Register service worker and subscribe
const registration = await navigator.serviceWorker.register('/sw.js');
const subscription = await registration.pushManager.subscribe({
userVisibleNotification: true,
applicationServerKey: urlBase64ToUint8Array(VAPID_PUBLIC_KEY),
});
// Send subscription to server
await fetch('/api/push/subscribe', {
method: 'POST',
body: JSON.stringify(subscription),
headers: { 'Content-Type': 'application/json' },
});
Service Worker (sw.js)
self.addEventListener('push', (event) => {
const data = event.data.json();
event.waitUntil(
self.registration.showNotification(data.title, {
body: data.body,
icon: '/icon-192.png',
badge: '/badge-72.png',
data: { url: data.url },
})
);
});
self.addEventListener('notificationclick', (event) => {
event.notification.close();
event.waitUntil(clients.openWindow(event.notification.data.url));
});
Server (web-push library)
import webpush from 'web-push';
webpush.setVapidDetails('mailto:admin@example.com', VAPID_PUBLIC_KEY, VAPID_PRIVATE_KEY);
await webpush.sendNotification(subscription, JSON.stringify({
title: 'New Message',
body: 'You have a new message from John',
url: '/messages/123',
}));
Expo Notifications (React Native)
import * as Notifications from 'expo-notifications';
// Request permission
const { status } = await Notifications.requestPermissionsAsync();
if (status !== 'granted') return;
// Get push token
const token = (await Notifications.getExpoPushTokenAsync()).data;
// Send token to your server
// Handle received notification
Notifications.addNotificationReceivedListener((notification) => {
console.log(notification.request.content);
});
// Handle notification tap
Notifications.addNotificationResponseReceivedListener((response) => {
const data = response.notification.request.content.data;
navigateTo(data.screen);
});
Notification Service Pattern
class NotificationService {
async send(userId: string, notification: NotificationPayload) {
const devices = await this.deviceRepo.findByUser(userId);
const results = await Promise.allSettled(
devices.map((device) => {
switch (device.platform) {
case 'web': return this.sendWebPush(device, notification);
case 'ios':
case 'android': return this.sendFCM(device, notification);
}
})
);
// Remove invalid tokens
for (const [i, result] of results.entries()) {
if (result.status === 'rejected' && isInvalidToken(result.reason)) {
await this.deviceRepo.remove(devices[i].id);
}
}
}
}
Anti-Patterns
| Anti-Pattern | Fix |
|---|
| Sending pushes synchronously | Use background job queue |
| No token cleanup | Remove invalid/expired device tokens |
| Missing notification permission UX | Ask contextually with explanation |
| No notification grouping | Group by type to avoid notification spam |
| Silent failures on send | Log failures, retry transient errors |
Production Checklist
- VAPID keys generated for web push
- FCM service account configured
- Device token storage and cleanup
- Background job queue for batch sends
- Notification preferences per user
- Rate limiting to prevent spam
- Analytics: delivery rate, open rate