https://github.com/totallynotchase/web-push-tryout
Trying out push notifications using a backend and service workers
https://github.com/totallynotchase/web-push-tryout
Last synced: about 1 month ago
JSON representation
Trying out push notifications using a backend and service workers
- Host: GitHub
- URL: https://github.com/totallynotchase/web-push-tryout
- Owner: TotallyNotChase
- License: mit
- Created: 2020-10-16T06:44:29.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-12-16T18:50:39.000Z (over 3 years ago)
- Last Synced: 2025-01-26T16:23:38.511Z (over 1 year ago)
- Language: TypeScript
- Homepage:
- Size: 154 KB
- Stars: 1
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Web Push Tryout
Demo backend + frontend for implementing push notifications using service workers
Most of the frontend is a modified version of the code from [web-push codelabs](https://developers.google.com/web/fundamentals/codelabs/push-notifications). But it also adds support for sending notification, unsubscription and saving/deleting the subscription from db
Built with Typescript + Express + Pg-Promise (Postgresql) + EJS
The backend uses [web-push](https://www.npmjs.com/package/web-push) to handle the web push setup and notifications
# Usage
* Clone the repo using `git clone https://github.com/TotallyNotChase/web-push-tryout.git`
* `cd` into `web-push-tryout`
* Execute `npm i` to set up the packages
* Execute `./node_modules/.bin/web-push generate-vapid-keys` and save the output for later use
* Set up the user configurations, create a file named `userconfig.json` inside `web-push-tryout`
The format of the JSON should be-
```json
{
"NAME": ,
"PORT": ,
"ENV": "development"/"production",
"DB_CONNECTION": {
"host": ,
"port": ,
"database": ,
"user": ,
"password":
},
"PUBLIC_VAPID_KEY": ,
"PRIVATE_VAPID_KEY": ,,
"WEB_PUSH_CONTACT":
}
```
Fieldname
Description
`NAME`
The name of the webapp - can be whatever
`PORT`
The port to assign the webserver on (should be a number - not string)
`ENV`
The environment to run the express server on - usually `development`
`DB_CONNECTION`
Postgre DB connection object
`host` is usually `"localhost"` and `port` is `5432` (should be a number - not string) for a default configured postgre server running locally
`database` should be a **newly created** database on the server
`user` and `password` are the credentials for the postgre user
`PUBLIC_VAPID_KEY`
Public VAPID key generated from `web-push generate-vapid-keys` on one of the previous steps
`PRIVATE_VAPID_KEY`
Private VAPID key generated from `web-push generate-vapid-keys` on one of the previous steps
`WEB_PUSH_CONTACT`
A `mailto` link to the mail contact associated with the server - should look like `mailto: `
* Execute `npm run build` to build the project
This will transpile or the typescript files into javascipt and put them into `dist/`
It also moves any other necessary non-typescript files from `src/` to `dist/` (handled by `copyRes.js`)
* Execute `npm run serve` to run the server
# Tour of the source code
All the backend code related stuff is in `src/`, static assets for the frontend are in `assets/`
## Backend files
Component
Description
`controllers/`
Controllers for different routes
`database/`
Component that manages low level SQL queries using pg-promise and exposes a high level, ORM-like API to be used by the app
`database/models/` - Types that describe the model of the tables
`database/repos/` - Classes that handle collection of closely related table(s) and expose the high level API to be used by the app
`database/sql/` - SQL query files and objects for each collection of closely related table(s), grouped by folder
`middleware/`
Handles middleware configuration and exposes middleware objects to be used by the app
`routers/`
Routers that map controllers to corresponding routes - exposes a router object to be used by the app
`types/`
Extra types used across the project
`webpush-handler/`
Component that has the web-push API exposed to itself
Manages the web-push calls
## Frontend files
The only files that need to be discussed about are the `index.ts` and `sw.ts` files that handle all the push notifications on the frontend side
### index.ts
Makes sure the browser supports push notifications
Initiallized the UI, based on initial state of subscription
Sets up handlers for the subscribe and push buttons
This is more or less a modified version of the codelabs `main.js`, except it adds support for communicating with the backend through `updateSubscriptionOnServer`, `deleteSubscriptionOnServer`, `initiatePushOnServer`. It also adds support for unsubscription on both the frontend and backend, as well as sending the notification itself through the backend.
### sw.ts
Service worker file that sets up event listener for the push notification to be sent