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

...
Josue Montano
Reading Time: 4 min

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.

https://app.magicbell.com

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.

If you use Ruby on Rails, create that file under the public folder
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.
Enabling domains for testing service workers locally

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');
service-worker.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".

The Apple Developer dashboard

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

Page to register a new identifier

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

Form to register a Website Push ID

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".

Page to generate a new certificate for the Website Push ID we already created

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

Form to create a new certificate for the Website Push ID

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.

Download page

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.

Export the certificate you downloaded from Apple in 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.

MagicBell - Notification Inbox

Keep Reading

Here are a few related articles!

Get started

Schedule a Demo.

Get a demo and see how you can add MagicBell's notification inbox to your product within an hour.

Schedule a Demo