https://github.com/filipchalupa/pwa-push-subscription-handler

Handling PWA push notifications subscription flow made easier.
https://github.com/filipchalupa/pwa-push-subscription-handler

npm push-notifications pwa typescript

Last synced: about 15 hours ago
JSON representation

Handling PWA push notifications subscription flow made easier.

• Host: GitHub
• URL: https://github.com/filipchalupa/pwa-push-subscription-handler
• Owner: FilipChalupa
• Created: 2019-02-13T23:18:17.000Z (over 5 years ago)
• Default Branch: main
• Last Pushed: 2022-02-27T01:04:07.000Z (over 2 years ago)
• Last Synced: 2024-03-23T12:31:13.255Z (8 months ago)
• Topics: npm, push-notifications, pwa, typescript
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/pwa-push-subscription-handler
• Size: 136 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# PWA push subscription handler

Handling PWA push notifications subscription flow made easier. [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/PushManager)

## Installation

`npm install --save-dev pwa-push-subscription-handler`

## Usage

### HTML

```html

```

### JavaScript

```javascript

import { PwaPushSubscriptionHandler } from 'pwa-push-subscription-handler'

const $button = document.querySelector('#pushToggleButton')

const publishSubscription = async (subscription: PushSubscription) => {

	// Send user's subscription object to your server and save it

	return fetch('http://example.com/submit/', {

		method: 'POST',

		body: JSON.stringify(subscription),

	})

}

const unpublishSubscription = async () => {

	// Let your server know user's user agent won't accept any new notifications

	return

}

const pwaPushSubscriptionHandler = new PwaPushSubscriptionHandler(

	'***', // Public Vapid key - see https://www.npmjs.com/package/web-push

	publishSubscription,

	unpublishSubscription // May be omitted

)

pwaPushSubscriptionHandler.addListener((state) => {

	// state = 'loading' | 'updating' | 'not-supported' | 'disabled' | 'not-subscribed' | 'subscribed' | 'error'

	$button.style.display = ['disabled', 'not-supported'].includes(state)

		? 'none'

		: 'inline-block'

	$button.setAttribute(

		'disabled',

		['loading', 'updating', 'error'].includes(state)

	)

	switch (state) {

		case 'subscribed':

			$button.innerText = 'Disable notifications'

			break

		case 'not-subscribed':

			$button.innerText = 'Enable notifications'

			break

		default:

			$button.innerText = 'Loading'

	}

})

$button.addEventListener('click', pwaPushSubscriptionHandler.toggle})

```

### Screencast

![UI example](./screencast.gif)

### State

- `'subscribed'` - user is subscribed - show button "Disable notifications"

- `'not-subscribed'` - user is not yet subscibed or has unsubscribed - show button "Enable notifications"

- `'updating'` - transitioning between subscribed and not-subscribed - disable button, show loading indicator

- `'loading'` - waiting for service worker (may not finish on the first page load) - hide button

- `'disabled'` - user/browser blocked notifications - hide button

- `'not-supported'` - browser doesn't support push notifications - hide button

- `'error'` - something went wrong, button won't work correctly - hide or disable button