Web Push Notifications Not Working — Service Worker Push API Failures
About Web Push Notifications Not Working
Fix Web Push API notification failures where browser push notifications are not received, blocked by browser settings, or fail to display. This guide covers everything you need to know about this topic, including common causes, step-by-step solutions, and answers to frequently asked questions.
Here are the key things to understand: Web Push uses Service Workers to receive push messages even when the website is not open. Push notifications require user permission (Notification.permission) and HTTPS. The Push API uses a push service (FCM for Chrome, Mozilla Push for Firefox) to deliver messages. VAPID keys (Voluntary Application Server Identification) authenticate the push server. Push subscriptions can expire and need to be renewed when the pushsubscriptionchange event fires. Understanding these fundamentals will help you diagnose and resolve this issue more effectively.
The most common reasons this occurs include: User denied notification permission or browser default blocks notifications for the site. Service Worker not registered or not active, preventing push message reception. VAPID public key mismatch between the subscription and the push message. Push subscription expired and was not renewed, causing messages to fail delivery. Identifying the root cause is the first step toward finding the right solution.
To resolve this, follow these recommended steps: Check notification permission: Notification.permission should return 'granted' in DevTools Console. Verify Service Worker is active: DevTools > Application > Service Workers > check status is 'activated'. Test push delivery: DevTools > Application > Service Workers > Push button to simulate a push message. Check browser notification settings: Chrome > Settings > Privacy > Notifications > ensure the site is allowed. Re-subscribe if push subscription expired: call registration.pushManager.subscribe() again. If these steps do not resolve the issue, consider consulting additional resources or a qualified professional.
This article is part of our Browser Errors collection on Error Codes Wiki. We provide comprehensive, up-to-date information to help you find solutions quickly.
Quick Answer
Why do notifications work on desktop but not mobile?
Mobile browsers have stricter notification policies. Chrome Android requires an active Service Worker and the app to be added to the home screen for reliable background push. iOS Safari only supports push in PWAs added to home screen (iOS 16.4+).
Overview
Fix Web Push API notification failures where browser push notifications are not received, blocked by browser settings, or fail to display.
Key Details
- Web Push uses Service Workers to receive push messages even when the website is not open
- Push notifications require user permission (Notification.permission) and HTTPS
- The Push API uses a push service (FCM for Chrome, Mozilla Push for Firefox) to deliver messages
- VAPID keys (Voluntary Application Server Identification) authenticate the push server
- Push subscriptions can expire and need to be renewed when the pushsubscriptionchange event fires
Common Causes
- User denied notification permission or browser default blocks notifications for the site
- Service Worker not registered or not active, preventing push message reception
- VAPID public key mismatch between the subscription and the push message
- Push subscription expired and was not renewed, causing messages to fail delivery
Steps
- 1Check notification permission: Notification.permission should return 'granted' in DevTools Console
- 2Verify Service Worker is active: DevTools > Application > Service Workers > check status is 'activated'
- 3Test push delivery: DevTools > Application > Service Workers > Push button to simulate a push message
- 4Check browser notification settings: Chrome > Settings > Privacy > Notifications > ensure the site is allowed
- 5Re-subscribe if push subscription expired: call registration.pushManager.subscribe() again