Push Notification manager
npm install webpush-clientHandles subscription / unsubscription of Webpush notifications in sync with a remote server.
The library ships with both a client and a service worker.
* Copy dist/webpush-client.min.js and dist/webpush-sw.js in your project.
* Run yarn add webpush-client or npm install --save webpush-client
``html`
`javascript
import Webpush from 'webpush-client'
Webpush.create({
serviceWorkerPath: '/js/webpush-sw.js', // Public path to the service worker
serverKey: 'my_server_key', // https://developers.google.com/web/fundamentals/push-notifications/web-push-protocol#application_server_keys
subscribeUrl: '/webpush', // Optionnal - your application URL to store webpush subscriptions
headers // Optional : An object or Headers object that will be passed to fetch
})
.then(WebPushClient => {
// do stuff with WebPushClient
})
;
`
* WebPushClient.isSupported()
> Return whether or not the browser AND the server both support Push notifications.
* WebPushClient.getPermissionState() prompt
> Return if Push notifications are allowed for your domain. _Possible values: , granted, denied_
* WebPushClient.getSubscription()
> Will return null if not subscribed or a object.
* WebPushClient.subscribe([options])
> Subscribe browser to Push Notifications. The browser will ask for permission if needed.
Return a Promise which resolves to the object (or will be rejected in case of access denied)
* WebPushClient.unsubscribe([options])
> Subscribe browser to Push Notifications. The browser will ask for permission if needed.
Return a Promise which resolves to the object (or will be rejected in case of access denied)
#### subscribeUrl
When the subscribeUrl option is provided, WebPushClient.subscribe([options]) will POST a JSON containing both the PushSubscription and the options objects:
`json`
{
"subscription": {
"endpoint": "http://endpoint",
"keys": {
"p256dh": "public key",
"auth": "private key"
}
},
"options": {}
}
The request will include current credentials allowing you to associate the current user logged in to the PushSubscription object and an optionnal, arbitrary options object of your own.
WebPushClient.unsubscribe([options]) will issue a DELETE request on subscribeUrl with the same body.
It's now up to you to handle these infos properly on the server side. Have a look at the RemoteStorage class to check out how these requests are generated.
If your application runs on Symfony, you can have a look at bentools/webpush-bundle for which this JS was originally designed for.
Build dist files using npx encore production --progress`