Web Push API

The API for subscribing/unsubscribing to Push API notifications and optional syncing the subscription to your backend.

Installation

``bash
npm i --save web-push-api
`

Usage

$3

`javascript
import { isSupported, getPushSubscriptionFlow, getPushSubscriptionPayload } from 'web-push-api';

if (isSupported) {
getPushSubscriptionFlow((method, pushSubscription) => {
sendRequestToBackend(method, getPushSubscriptionPayload(pushSubscription));
});
}
`

$3

`javascript
import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import { isSupported, getPushSubscriptionFlow, getPushSubscriptionPayload } from 'web-push-api';

import Spinner from 'your-spinner-component';

const flow = !isSupported ? null : getPushSubscriptionFlow((method, pushSubscription) => {
fetch('https://example.com/web-push-api/subscription', { method, body: getPushSubscriptionPayload(pushSubscription) })
.then((response) => response.json())
.then(({ errors }) => errors.map(showError))
.catch(showError);
});

/**
* @param {Error|string} error
*/
function showError(error) {
alert(error instanceof Error ? error.message : error);
}

/**
* @param {function(state: Object): void} updateState
* @param {('getPermission'|'getSubscription'|'subscribe'|'unsubscribe')} method
* @param {('permission'|'subscription')} affects
* @param {string|null} valueOnError
* @param {string} [applicationServerKey]
*/
function doFlowAction(updateState, method, affects, valueOnError, applicationServerKey) {
(async () => {
let value = valueOnError;

try {
value = await flowmethod;
} catch (error) {
showError(error);
}

updateState({ processing: false, [affects]: value });
})();
}

/**
* @param {function(state: Object): void} updateState
* @param {('subscribe'|'unsubscribe')} method
* @param {string} [applicationServerKey]
*
* @return {function(event: Event): void}
*/
function getFlowActionHandler(updateState, method, applicationServerKey) {
return (event) => {
event.preventDefault();
updateState({ processing: true });
doFlowAction(updateState, method, 'subscription', null, applicationServerKey);
};
}

function PushNotificationsSubscriber({ offline, applicationServerKey }) {
const [{ permission, subscription, processing = true }, setState] = useState({});
const updateState = (state) => setState((prevState) => ({ ...prevState, ...state }));
let children;

useEffect(() => {
if (permission === undefined) {
doFlowAction(updateState, 'getPermission', 'permission', 'denied');
} else if (!offline && permission === 'granted' && subscription === undefined) {
doFlowAction(updateState, 'getSubscription', 'subscription', null);
}
}, [offline, permission, subscription, updateState]);

if (processing) {
children = (

);
} else if (permission !== 'granted' || offline) {
const title = offline
? 'This feature is not available since the app is offline. Please come back later.'
: 'Please turn notifications on. This will allow you receiving updates even if the application is closed.';

children = (



);
} else if (subscription === null) {
children = (
title="Click to subscribe to push notifications."
onClick={ getFlowActionHandler(updateState, 'subscribe', applicationServerKey) }
>


);
} else {
children = (
title="Click to unsubscribe from push notifications."
onClick={ getFlowActionHandler(updateState, 'unsubscribe') }
>


);
}

return (