@magicbell/react-headless
Version:
Hooks to build a notification inbox
41 lines • 1.93 kB
JavaScript
import { path } from 'ramda';
import { useEffect } from 'react';
import { createPushSubscription, createSafariPushSubscription } from '../../lib/push.js';
import useConfig from '../../stores/config/index.js';
/**
* Headless component to create subscriptions to web push notifications.
*
* @example
* <WebPushNotificationsSubscriber>
* {({ createSubscription }) =>
* <button onClick={createSubscription}>Subscribe</button>}
* <WebPushNotificationsSubscriber>
*/
export default function WebPushNotificationsSubscriber({ children, serviceWorkerPath = '/service-worker.js', skipServiceWorkerRegistration = false, }) {
const config = useConfig();
const isSafari = 'safari' in window;
const isPushAPISupported = 'PushManager' in window;
useEffect(() => {
if (!skipServiceWorkerRegistration) {
navigator.serviceWorker.register(serviceWorkerPath);
}
}, [serviceWorkerPath, skipServiceWorkerRegistration]);
const createSubscription = async () => {
if (!config) {
return Promise.reject(new Error('Context for MagicBell was not found'));
}
if (isSafari) {
const authenticationToken = path(['safari', 'authenticationToken'], config.channels?.webPush.config);
const websitePushID = path(['safari', 'websitePushId'], config.channels?.webPush.config);
const webServiceUrl = path(['safari', 'webServiceUrl'], config.channels?.webPush.config);
return createSafariPushSubscription(authenticationToken, webServiceUrl, websitePushID);
}
if (isPushAPISupported) {
return navigator.serviceWorker.ready.then(async (registration) => {
await createPushSubscription(registration.pushManager, config);
});
}
};
return children({ createSubscription, isPushAPISupported });
}
//# sourceMappingURL=WebPushNotificationsSubscriber.js.map