How To Set Up Web Push Notifications

Web push notifications make it possible to reach your audience without designing a labor-intensive app. It’s never been more critical to reach your audience at the right moment, and web push notifications give you a direct way to do just that.

Web push notifications are great for all kinds of customer communications, whether that’s promoting eCommerce sales, pushing out the latest news, or alerting customers about potential outages.

It’s much easier to set up web push notifications than to build a native app, but it still requires some technical know-how. Check out this guide to understand the basics of web push notifications and how to set them up on your own website.

In this article:

• Understanding Web Push Notifications
• Step-by-Step Guide to Setting Up Web Push Notifications
• Powering Up Your Engagement with Web Push Notifications
• Frequently Asked Questions

Understanding Web Push Notifications

Web push notifications allow websites to send real-time updates to users, even when they aren’t on your website. This technology leverages the push notification system commonly associated with mobile apps, bringing it to the web for a more seamless user experience. Best of all, there’s no need to create a mobile app to enjoy the benefits of web push notifications, giving you the best of both worlds.

Web push notifications use a combination of browser APIs and server-side scripts to push notifications to users’ mobile devices. They rely on three components to push notifications to users’ devices:

• Service worker: These are JavaScript files that run in the background and respond to push events from the server.
• Push API: The push API delivers the message from the server to the service worker. This is what makes real-time communication with your users possible.
• Notification API: When the service worker gets a push message, it uses the notification API to create a visual alert. With this API, you’re free to customize the look and text of the notification, including the title, body, icon, and action buttons.

Once you have these components set up, you’re ready to go. Your website will ask the user for permission to send notifications.

If they grant permission, your site registers a service worker, a background script that operates independently of your website. When your server sends a message, the service worker takes it and displays it on the user’s device.

Step-by-Step Guide to Setting Up Web Push Notifications

Setting up web push notifications may seem complex at first, but you’ll have them up and running on your website in no time with the right tools and process.

1. Pick a Push Notification Service

First, choose a service like MagicBell to start sending notifications. It’s as easy as signing up for an account, installing the SDK on your website, and configuring notification settings within the MagicBell dashboard. With MagicBell, you can send notifications to all major browsers, including Chrome, Firefox, and Safari.

2. Set up the Service Worker

Service workers are a must when sending and displaying notifications. You first need to register a service worker on your site by adding a JavaScript file to your website’s root directory and registering it within your site's code.

It should look something like this:

if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register('/service-worker.js').then(function(registration) {
        console.log('Service Worker registered with scope:', registration.scope);
    }).catch(function(error) {
        console.log('Service Worker registration failed:', error);
    });
}

Define how the worker should behave once it’s installed. You’ll likely need to set up a cache for offline support and tell the service worker how to handle incoming push events.

3. Ask for Permission

Always ask for explicit permission before sending push notifications. Instead of bombarding users with a “Do you want notifications?” message right when they land on your site, wait until they engage with your content first.

Instead of relying solely on the browser’s default permission prompt, consider using a custom prompt that explains the value of subscribing to notifications. This can be a small banner or pop-up that appears on the page. Once the user interacts with your custom prompt, trigger the browser’s permission request. That should look something like this:

Notification.requestPermission().then(function(permission) {
    if (permission === 'granted') {
        console.log('Notification permission granted.');
    } else {
        console.log('Notification permission denied.');
    }
});

4. Personalize and Test

At this point, you’ve created the infrastructure for sending notifications. Here’s the fun part! Create the content for your notification, including the title, message, icon, and any actions you want users to take.

As always, check your notifications before going live. Send test notifications to ensure they display correctly across different browsers and devices or use a tool like webpushtest.com to demo standards-based web push notifications on all platforms — even iOS. 

Powering Up Engagement with Web Push Notifications

Web push notifications give users the immediacy of a native app without downloading yet another app. Businesses also benefit from web push notifications because there’s no need to create a pricey native app. They’re incredibly beneficial, but setting up these notifications requires technical skill.

Whether you’re a total newbie or a notification pro, MagicBell simplifies the notification experience. Lean on our platform to build an all-in-one notification inbox across all channels — including email, Slack, and more. Create a MagicBell account now to start sending push notifications today.

Frequently Asked Questions

What happens if a user clears their browser cache or deletes cookies?

Clearing a browser cache or cookies can affect a user’s subscription to web push notifications, especially if they remove the service worker. However, this depends on how your website handles push notifications. Every solution is different, so check to see if your push notification service requires prompting users to resubscribe.

Can users unsubscribe from web push notifications?

Absolutely. Not only is this a best practice for user experience, but it’s also the law. Like email and SMS messages, users must have complete control over their web push notification subscriptions. They can unsubscribe anytime by adjusting their browser settings or interacting with the notification, which might include an "unsubscribe" option.

Are there any limitations on the size or content of a web push notification?

Yes. Most browsers limit the title to 50 to 100 characters and the message body to up to 250 characters. Generally, you can only attach a single image to notifications and can’t include interactive features, like videos, in the message directly.