<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PWA Notification (CorePHP Demo)</title>
</head>
<body>
<h2>PWA Notification (CorePHP Demo)</h2>
<button onclick="subscribe()">Subscribe to Notifications</button>
<button onclick="sendNotification()">Send Notification</button>
<script>
const publicVapidKey = 'BMCg9uAVDJKmb0Qkx91HHNuQJVnQsegC1i4YsRaJkc8zmKSfqRioRvKiWAHdvWsSlnvd1QgYXI2lCyAbKyhPNfY';
function urlBase64ToUint8Array(base64String) {
const padding = '='.repeat((4 - base64String.length % 4) % 4);
const base64 = (base64String + padding)
.replace(/\-/g, '+')
.replace(/_/g, '/');
const rawData = window.atob(base64);
const outputArray = new Uint8Array(rawData.length);
for (let i = 0; i < rawData.length; ++i) {
outputArray[i] = rawData.charCodeAt(i);
}
return outputArray;
}
async function subscribe() {
if ('serviceWorker' in navigator && 'PushManager' in window) {
try {
// Register service worker
const registration = await navigator.serviceWorker.register('sw.js');
// Subscribe to push
const subscription = await registration.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: urlBase64ToUint8Array(publicVapidKey)
});
// Send subscription to backend
await fetch('pwa_notification_demo.php', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify(subscription)
});
alert('Subscribed successfully!');
} catch (err) {
alert('Subscription failed: ' + err);
}
} else {
alert('Push Notifications not supported.');
}
}
function sendNotification() {
fetch('pwa_notification_demo.php?send=true')
.then(res => res.text())
.then(res => alert(res))
.catch(err => alert(err));
}
</script>
</body>
</html>