Push Notifications Test
About This Page
This page demonstrates AffordaCalc's push notification capabilities for PWA validation. It allows you to subscribe to push notifications and test receiving them, even when the app is not active.
Push Notification Status
AffordaCalc Update
New information about your mortgage calculations is available.
Event Log
Push Notification Implementation
// Request permission and subscribe to push notifications
async function enablePushNotifications() {
// Check if push is supported
if (!('PushManager' in window)) {
console.warn('Push notifications not supported');
return false;
}
// Request permission
const permission = await Notification.requestPermission();
if (permission !== 'granted') {
console.warn('Notification permission denied');
return false;
}
// Get service worker registration
const registration = await navigator.serviceWorker.ready;
// Subscribe to push
const subscription = await registration.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: urlBase64ToUint8Array(VAPID_PUBLIC_KEY)
});
// Send subscription to server
await saveSubscription(subscription);
return true;
}
// Handle push notifications in the service worker
self.addEventListener('push', event => {
const data = event.data.json();
const options = {
body: data.body,
icon: '/icon-192.png',
badge: '/icon-192.png',
data: {
url: data.url || '/'
}
};
event.waitUntil(
self.registration.showNotification(data.title, options)
);
});