Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ertrzyiks/web-push-demo
Example application using web Push API
https://github.com/ertrzyiks/web-push-demo
Last synced: about 1 month ago
JSON representation
Example application using web Push API
- Host: GitHub
- URL: https://github.com/ertrzyiks/web-push-demo
- Owner: ertrzyiks
- License: mit
- Created: 2019-06-02T19:08:47.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T18:00:26.000Z (about 2 years ago)
- Last Synced: 2024-12-07T19:36:07.557Z (about 1 month ago)
- Language: JavaScript
- Homepage: https://notifications-demo.ertrzyiks.me
- Size: 1.12 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Push API Demo
This is an example project presenting how to send Push Notifications to
the browser. The notification is send using
[VAPID](https://developers.google.com/web/ilt/pwa/introduction-to-push-notifications#using_vapid) authentication method.
## See it in action
https://notifications-demo.ertrzyiks.me
## How it works
**Client side components**:
- [Push Api](https://developer.mozilla.org/en-US/docs/Web/API/Push_API)
Manages subscription
- [Service workers](https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API)
Receives push notification in background
- [Notification](https://developer.mozilla.org/en-US/docs/Web/API/Notification)
Displays system notifications
**Server side components**:
- [web-push](https://github.com/web-push-libs/web-push) to send notifications
## Browser support
For the most recent information refer to: https://caniuse.com/#feat=push-api,notifications,serviceworkers
## Installation
1. Install npm dependencies
```
yarn install
```
2. Copy .env.sample file as .env
3. Generate VAPID keys
```
yarn web-push generate-vapid-keys
```
4. Save the provided keys in the `.env` file as
```
VAPID_PRIVATE_KEY=BEkyy4.....ef7graNA
VAPID_PUBLIC_KEY=B5A.....dRE
```
5. Update value of `VAPID_EMAIL` in the `.env` file
6. Start the server
```
yarn start
```
## Useful links
- https://developers.google.com/web/ilt/pwa/introduction-to-push-notifications