How to implement Web Push Notifications on your own domain?

[nordhagen]

Hi. I believe there’s an error in the step 4 code example on this page https://www.magicbell.com/blog/web-push-notifications-from-your-domain

The code refers to the variable createSubscription and the function registerSubscription, but these are not in scope by way of the example.

I cannot find these items in your source code, nor are they part of the JS standard lib or available on window, so there’s no telling where they come from and in our testing the code doesn’t work.

Please advice!

[vannawong]

Bumping! My team is looking for notification service options and Magicbell looks great! This would be extremely helpful for onboarding.

[smeijer]

Hi,

Very sorry about that. That blog post had a couple of errors. I've fixed the snippet, but the MagicBell provider is not covered in that post.

Re the solution, I've just pushed out a new version of our react sdk. Due to recent api changes, you'll need to use @magicbell/[email protected] or later to use the PushNotificationsSubscriber component.

Your custom component should look like:

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

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

Note that this component does depend on our provider, to get access to the MagicBell api key and user email or external id. Please be sure that one of the parent components includes our provider. If it doesn't - because you only use this component, and not for example the inbox - you can include it as follows:

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

function App() {
  return (
    <MagicBellProvider apiKey="…" userEmail="[[email protected]](mailto:[email protected])">
      <PushNotificationsSubscriber serviceWorkerPath="/service-worker.js">
        {({ createSubscription }) => (
          <button onClick={createSubscription}>
            Enable push notifications
          </button>
        )}
      </PushNotificationsSubscriber>
    </MagicBellProvider>
  );
}

There's no need to wrap it in a provider twice, in fact, you should prevent doing so. So the exact solution, depends a bit on how you integrate with MagicBell and what other components you use.