Supported Browsers
Browser | Windows PC | macOS | Android | iOS |
---|---|---|---|---|
Google Chrome | YES | YES | YES | N/A |
Firefox (non-ESR) | YES | YES | YES | N/A |
Safari | N/A | NO | N/A | N/A |
Microsoft Edge | YES | N/A | YES | N/A |
Opera | YES | YES | YES | N/A |
Internet Explorer | N/A | N/A | N/A | N/A |
Legend:
N/A Push notifications are technically Not Available in this configuration.
NO We do not support push notifications in this configuration.
Testing as a new user
Clearing Browsing Data under Google Chrome
We recommend you create a dedicated profile to test web push in Google Chrome. A new profile can be created by clicking the person icon (👤) left of the the ⋮ menu button, and choosing Manage people, then clicking the Add person button on the opened window.
With this new profile, you should clear browsing data every time you want to test subscribing to push notifications:
- Under Chrome, choose Clear Browsing Data...
- Select Advanced
- Select All time in the Time range dropdown
- Check Cookies and other site data as well as Content settings
Web push is not working at all
- Make sure you are using a supported browser;
- Make sure you are not browsing in Private mode, Incognito mode or Guest browsing mode.
- Make sure your browser's notifications are not disabled in your system.
- If your device is connected to the Internet via an enterprise network, chances are you are behind a Firewall. Firebase Cloud Messaging, the technology behind Chrome push notifications, requires ports
5228
,5229
and5230
to be open for notifications to be delivered. - Make sure you are not in Do not disturb mode in your OS.
- Please close any already displayed notification, as in some cases only a few are shown at a time, and the rest appears once room is made.
- Do not use fullscreen, otherwise notifications will wait until you exit fullscreen.
The changes I made from the dashboard are not applied immediately
There are 2 levels of cache implied in the configuration you manage via the dashboard:
- Server-side edge cache: It is used to ensure prompt delivery of the configuration to each client. It's duration is 1 hour.
- Client-side cache: It is used to reduce the number of requests done by the client to reduce battery and data consumption. It's duration is 12 hours.
This means that a change you did in the dashboard will be seen for new visitors in 1 hour maximum, and will be seen for previous visitors in 12 hours maximum.
If you wish to validate a configuration change, wait 1 hour max and either test as a new user or invalidate the client-side cache using the following code:
WonderPush.Developer.invalidateConfig()
It is possible that you need to execute this command in the context of the wonderpush.min.html
frame in addition to the top
context. Change the context as show below, and run the command again:


I cannot put the async script tag on my site
If you are restricted to writing JavaScript and cannot add the first script
tag, simply use the following alternative snippet:
(function(){
var js = document.createElement('script');
js.src = 'https://cdn.by.wonderpush.com/sdk/1.1/wonderpush-loader.min.js';
js.async = true;
document.head.appendNode(js);
})();
window.WonderPush = window.WonderPush || [];
WonderPush.push(["init", {
webKey: "YOUR_WEBKEY",
}]);
Replace YOUR_WEBKEY
with the webkey of the snippet from your dashboard.
The subscription dialog is not showing
- Double-check the subscription dialog settings in your dashboard. Please allow 12 hours for any change to be taken into account.
- Clear browsing data as indicated above and try again.
- Open the console in your browser and check for any error messages related to WonderPush.
- Make sure the WonderPush SDK is correctly installed by pasting this script in the console:
WonderPush.push(function() { console.log('WonderPush is installed'); });
Press Enter, the console should display "WonderPush is installed". If you do not see this message, double check our Website Quickstart.
- Double-check the subscription dialog init options of your integration.
Notifications are not received in Google Chrome
Make sure you don't have many notifications already displayed, depending on the browser and OS, new notifications will only be displayed once older ones are closed.
- Check that you are subscribed to notifications by pasting the following script in your console:
WonderPush.push(function() { WonderPush.isSubscribedToNotifications().then(function(isSubscribed) { console.log('Subscribed', isSubscribed); }); });
Press Enter. The console should display: Subscribed: true
.
If not, then paste the following to subscribe:
WonderPush.push(function() { WonderPush.subscribeToNotifications(); });
- Go to chrome://gcm-internals/ and check that you see
GCM Client State: READY
andConnection State: CONNECTED
, then send yourself a notification, and verify it is received in the Receive Message Log. If the log stays empty, the notification was not delivered.
If not, then contact your network administrator. - Clear website data as described at the top of this document, subscribe again and send yourself a push notification.
ReferenceError: WonderPush is not defined
This means that WonderPush has not been included in your page, either prior to the first place you use it, or at all.
Be sure to include WonderPush in all your pages to properly track user engagement.
If you happen to use WonderPush in multiple places and cannot make sure that the SDK installation snippet is present prior to one of the places you use it, simply add this simple line at the top or your script:
WonderPush = window.WonderPush || [];
WonderPush.push is not a function
See the upgrade guide.
You will need to update your integration script.
Replace this older snippet:
<script>
(function(w,d,s,i,n){w[n]=w[n]||{q:[],init:function(o){w[n].initOpts=o;},ready:function(c){w[n].q.push(c);}};
setTimeout(function(j,k){if(!d.getElementById(i)){k=d.getElementsByTagName(s)[0];j=d.createElement(s);j.id=i;
j.src="wonderpush-loader.js";k.parentNode.insertBefore(j,k);}},0);
}(window,document,"script","wonderpush-jssdk-loader","WonderPush"));
WonderPush.init({
webKey: "YOUR_WEBKEY",
// any other options…
});
</script>
With this new one, as you can find in your dashboard:
<script src="https://cdn.by.wonderpush.com/sdk/1.1/wonderpush-loader.min.js" async></script>
<script>
WonderPush = window.WonderPush || [];
WonderPush.push(["init", {
webKey: "YOUR_WEBKEY",
// any other options…
}]);
</script>
You will also need to update calls from WonderPush.ready
to WonderPush.push
, see next section.
This site has been updated in the background
When receiving web push notifications, instead of the intended message the following is displayed: This site has been updated in the background
.
It's likely that your site has more than one service worker on the same scope. Please follow the steps described in Service Worker Integration.
WonderPush.ready is not a function
See the upgrade guide.
Update calls from WonderPush.ready
to WonderPush.push
, you're done.
To ease migration you can also add the following line, after the first line shown as context:
WonderPush = window.WonderPush || [];
WonderPush.ready = WonderPush.push;
Why can't I see my subscription prompt for Web Push notifications on iOS?
Unfortunately, iOS does not yet support web push. So, only an application can implement push on iOS devices, but not a website.
Read more:
When will iOS implement web push notifications?
Sign the petition on change.org
Updated 2 months ago