How to implement web push notifications for your site on your own domain

Web push notifications are powered through service workers. A service worker is just a script that your browser runs in the background. By using service works, you can send web-push notifications to your users even when they don't have your application open in a tab.

There are some differences in how modern browsers implement this feature. At MagicBell we have created abstractions to hide the complexity so you can enable web push notifications without breaking a sweat.

Step 1: Enable the web push channel

Make sure you have enabled the web push channel for your MagicBell project from the admin UI.

Step 2: Create the service worker file

Create the service worker file, make sure this file is available at https://your-domain.com/service-worker.js.

The location of the service worker file is important, it defines the scope of the service worker.

You’ll be able to register the service worker on localhost. However, if you use another domain to develop, you need HTTPS. As a workaround for Google Chrome, open chrome://flags/#unsafely-treat-insecure-origin-as-secure, enable it, add your domain and relaunch the browser.

Step 3: Import MagicBell’s functionality

Open the service worker file you just created and import MagicBell’s handlers for web push notifications:

importScripts('https://assets.magicbell.io/web-push-notifications/sw.js');

Step 4: Ask users to enable web push notifications

The latest version of our React library exposes the PushNotificationsSubscriber headless component, you can use it to register the service worker, request the user for permissions and store subscriptions to send browser push notifications.

import { PushNotificationsSubscriber } from '@magicbell/magicbell-react';

function MyComponent() {
  <PushNotificationsSubscriber serviceWorkerPath="/service-worker.js">
    {({ createSubscription }) => (
      <button onClick={registerSubscription}>Enable push notifications</button>
    }
  </<PushNotificationsSubscriber>
}

And that’s it! You have enabled web push notifications for Google Chrome and Firefox. Try creating a notification through our API and let the magic begin...

A step by step guide to implementing web push notifications for Safari

Unfortunately the latest version of Safari does not implement the Push API. Therefore, there are a few extra steps to take before you can send web push notifications to Safari browsers. These are required to comply with Apple's policies.

Step 1: Enroll into Apple's Developer Progam

First, you will need to register for an Apple Developer Account at https://developer.apple.com.

Once you have an account, you need to create an identifier and a certificate to sign web push notifications and add it to your MagicBell account. The following steps show how to do it.

Step 2: Register a web push identifier

Open your Apple Developer dashboard, and click on "Certificates, IDs & Profiles".

Open the Identifiers page and click on the plus icon to register a new identifier. Select "Website push IDs" and press "Continue".

Fill in the form, press "Continue" and then "Register".

Step 3: Create a certificate for the identifier

Now you are back on the "Certificates, IDs & Profiles" page. Open Certificates and click the plus icon.

Choose "Website Push ID Certificate", and press "Continue".

In the next screen select a Website Push ID for this certificate.

Now you have to upload a certificate from your Mac. Follow the instructions of that page if you don't know how to generate one.

Now you can download the certificate. Open the downloaded certificate in the Keychain Access app.

Step 4: Export the certificate in p12 format

Now you can find the downloaded certificate in the Keychain Access app, right click on it and select the export option from the context menu. Export the certificate in the p12 format.

The system is going to ask you to set a password for the certificate. Create a strong password.

Step 5: Upload the certificate to MagicBell

Finally, please contact us at hello@magicbell.io and we will send you instructions to upload this p12 certificate and its passphrase to MagicBell.