I’m working on implementing push notifications in a web application using Push.js. I’ve followed the documentation and managed to request notification permissions successfully using Notification.requestPermission(). However, after granting permission, I’m unable to display notifications when clicking the “Show notification” button. The page does not respond, and I’m not seeing any errors in the console.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Push Notification Example</title>
</head>
<body>
<button onclick="requestNotificationPermission()">Request permissions</button>
<button onclick="showNotification()">Show notification</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/push.js/1.0.5/push.js"></script>
<script>
function requestNotificationPermission() {
if ('Notification' in window) {
Notification.requestPermission().then(function(permission) {
if (permission === 'granted') {
console.log('Notification permission granted!');
}
}).catch(function(err) {
console.error('Error requesting notification permission:', err);
});
}
}
function showNotification() {
if ('Notification' in window) {
new Notification('Hello!', {
body: 'This is a sample notification.',
});
}
}
</script>
</body>
</html>