https://github.com/br0ken-/web-push-api
Utility to subscribe/unsubscribe to Push API notifications and syncing with backend.
https://github.com/br0ken-/web-push-api
push-api push-notifications web-push web-push-api
Last synced: 3 months ago
JSON representation
Utility to subscribe/unsubscribe to Push API notifications and syncing with backend.
- Host: GitHub
- URL: https://github.com/br0ken-/web-push-api
- Owner: BR0kEN-
- Created: 2020-02-12T08:03:29.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2020-02-14T10:08:24.000Z (almost 6 years ago)
- Last Synced: 2025-03-06T08:12:41.411Z (10 months ago)
- Topics: push-api, push-notifications, web-push, web-push-api
- Language: JavaScript
- Homepage:
- Size: 12.7 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Web Push API
The API for subscribing/unsubscribing to [Push API](https://developer.mozilla.org/en-US/docs/Web/API/Push_API) notifications and optional syncing the subscription to your backend.
## Installation
```bash
npm i --save web-push-api
```
## Usage
### Abstract example.
```javascript
import { isSupported, getPushSubscriptionFlow, getPushSubscriptionPayload } from 'web-push-api';
if (isSupported) {
getPushSubscriptionFlow((method, pushSubscription) => {
sendRequestToBackend(method, getPushSubscriptionPayload(pushSubscription));
});
}
```
### React component
```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 flow[method](applicationServerKey);
} 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 = (
);
} else {
children = (
);
}
return (
{ children }
);
}
PushNotificationsSubscriber.propTypes = {
offline: PropTypes.bool.isRequired,
applicationServerKey: PropTypes.string.isRequired,
};
export default flow ? PushNotificationsSubscriber : () => null;
```
## Alternatives
- https://github.com/dmitry-korolev/push-js