https://github.com/saurabhdaware/pwainit-node-pushapi
Push API backend code along with the instructions to generate and use VAPID keys.
https://github.com/saurabhdaware/pwainit-node-pushapi
node-pushapi progressive-web-app push-notifications pushapi pwa pwainit pwainit-backend
Last synced: 6 months ago
JSON representation
Push API backend code along with the instructions to generate and use VAPID keys.
- Host: GitHub
- URL: https://github.com/saurabhdaware/pwainit-node-pushapi
- Owner: saurabhdaware
- Created: 2019-08-09T10:14:08.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-11T01:23:25.000Z (about 3 years ago)
- Last Synced: 2024-06-13T06:44:57.757Z (over 1 year ago)
- Topics: node-pushapi, progressive-web-app, push-notifications, pushapi, pwa, pwainit, pwainit-backend
- Language: JavaScript
- Homepage:
- Size: 30.3 KB
- Stars: 4
- Watchers: 3
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# NodeJS PushAPI Example
## Local Installation and Generating Vapid Keys
- `git clone https://github.com/saurabhdaware/pwainit-node-pushapi`
- `cd pwainit-node-pushapi`
- `npm install`
- `./node_modules/.bin/web-push generate-vapid-keys`
- Create a .env file in root directory and copy paste following content and replace above generated keys with the values below
```
PUBLIC_VAPID_KEY = ""
PRIVATE_VAPID_KEY = ""
EMAIL = ""
```
- `node index.js`
## Client side setup
**Checkout [pwainit](https://github.com/saurabhdaware/pwainit) to initate the client side part in one command**
- You will have to use generated public vapid key on client side to generate subscription.
- If you have used [PWAinit](https://github.com/saurabhdaware/pwainit) to generate PWA you will have to Paste the key in `publicVapidKey` variable in index.html script tag.
- Go through the [Push API docs](https://developers.google.com/web/ilt/pwa/introduction-to-push-notifications) to understand the code properly.
- Make sure you have following code in your service worker file.
### sw.js
```js
// NOTIFICATIONS
// Please go through https://developers.google.com/web/ilt/pwa/introduction-to-push-notifications#push_api to understand this properly
// Listens to push events from server.
self.addEventListener('push', function(e) {
const dataFromServer = e.data.json(); // or your can add e.data.text() and pass text data from server
var options = {
body: dataFromServer.body,
icon: 'assets/logo-512.png',
vibrate: [100, 50, 100],
data: {
dateOfArrival: Date.now(),
// primaryKey: '2'
},
actions:[
{action: 'github', title: 'Open Github Repo', icon: 'images/checkmark.png'},
{action: 'close', title: 'Close notification', icon: 'images/xmark.png'},
]
};
e.waitUntil(
self.registration.showNotification(dataFromServer.title, options)
);
});
self.addEventListener('notificationclick', function(e) {
var notification = e.notification;
var primaryKey = notification.data.primaryKey;
var action = e.action;
if (action === 'close') {
notification.close();
}else if(action == 'github'){
clients.openWindow('https://github.com/saurabhdaware/pwainit')
notification.close();
}else {
console.log('..')
notification.close();
}
});`
```