{"id":21868504,"url":"https://github.com/totallynotchase/web-push-tryout","last_synced_at":"2026-05-09T10:24:38.125Z","repository":{"id":42491466,"uuid":"304542483","full_name":"TotallyNotChase/web-push-tryout","owner":"TotallyNotChase","description":"Trying out push notifications using a backend and service workers","archived":false,"fork":false,"pushed_at":"2022-12-16T18:50:39.000Z","size":158,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-26T16:23:38.511Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TotallyNotChase.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-10-16T06:44:29.000Z","updated_at":"2022-03-28T14:19:01.000Z","dependencies_parsed_at":"2023-01-29T15:45:39.957Z","dependency_job_id":null,"html_url":"https://github.com/TotallyNotChase/web-push-tryout","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TotallyNotChase%2Fweb-push-tryout","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TotallyNotChase%2Fweb-push-tryout/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TotallyNotChase%2Fweb-push-tryout/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TotallyNotChase%2Fweb-push-tryout/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TotallyNotChase","download_url":"https://codeload.github.com/TotallyNotChase/web-push-tryout/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244874760,"owners_count":20524582,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-28T05:13:55.877Z","updated_at":"2026-05-09T10:24:38.091Z","avatar_url":"https://github.com/TotallyNotChase.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Web Push Tryout\nDemo backend + frontend for implementing push notifications using service workers\n\nMost 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\n\nBuilt with Typescript + Express + Pg-Promise (Postgresql) + EJS\n\nThe backend uses [web-push](https://www.npmjs.com/package/web-push) to handle the web push setup and notifications\n\n# Usage\n* Clone the repo using `git clone https://github.com/TotallyNotChase/web-push-tryout.git`\n* `cd` into `web-push-tryout`\n* Execute `npm i` to set up the packages\n* Execute `./node_modules/.bin/web-push generate-vapid-keys` and save the output for later use\n* Set up the user configurations, create a file named `userconfig.json` inside `web-push-tryout`\n\n  The format of the JSON should be-\n  ```json\n  {\n    \"NAME\": \u003capp_name\u003e,\n    \"PORT\": \u003cport_to_assign_the_server_on\u003e,\n    \"ENV\": \"development\"/\"production\",\n    \"DB_CONNECTION\": {\n      \"host\": \u003cpostgres_host\u003e,\n      \"port\": \u003cpostgres_port\u003e,\n      \"database\": \u003cdatabase_name\u003e,\n      \"user\": \u003cpostgres_username\u003e,\n      \"password\": \u003cpostgres_userpass\u003e\n    },\n    \"PUBLIC_VAPID_KEY\": \u003cPublic_VAPID_key_generated_from_web-push\u003e,\n    \"PRIVATE_VAPID_KEY\": \u003cPrivate_VAPID_key_generated_from_web-push\u003e,,\n    \"WEB_PUSH_CONTACT\": \u003cmailto_link_to_an_email_to_be_associated_with_web_push\u003e\n  }\n  ```\n\n  \u003ctable\u003e\n  \u003ctr\u003e\n    \u003cth\u003eFieldname\u003c/td\u003e\n    \u003cth\u003eDescription\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n\n    `NAME`\n\n    \u003c/td\u003e\n    \u003ctd\u003e\n\n    The name of the webapp - can be whatever \n\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n\n    `PORT`\n\n    \u003c/td\u003e\n    \u003ctd\u003e\n\n    The port to assign the webserver on (should be a number - not string)\n\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n\n    `ENV`\n\n    \u003c/td\u003e\n    \u003ctd\u003e\n\n    The environment to run the express server on - usually `development`\n\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n\n    `DB_CONNECTION`\n\n    \u003c/td\u003e\n    \u003ctd\u003e\n\n    Postgre DB connection object\n\n    `host` is usually `\"localhost\"` and `port` is `5432` (should be a number - not string) for a default configured postgre server running locally\n\n    `database` should be a **newly created** database on the server\n\n    `user` and `password` are the credentials for the postgre user\n\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n\n    `PUBLIC_VAPID_KEY`\n\n    \u003c/td\u003e\n    \u003ctd\u003e\n\n    Public VAPID key generated from `web-push generate-vapid-keys` on one of the previous steps\n\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n\n    `PRIVATE_VAPID_KEY`\n\n    \u003c/td\u003e\n    \u003ctd\u003e\n\n    Private VAPID key generated from `web-push generate-vapid-keys` on one of the previous steps\n\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n\n    `WEB_PUSH_CONTACT`\n\n    \u003c/td\u003e\n    \u003ctd\u003e\n\n    A `mailto` link to the mail contact associated with the server - should look like `mailto: \u003cyouremail\u003e`\n\n    \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003c/table\u003e\n\n* Execute `npm run build` to build the project\n\n  This will transpile or the typescript files into javascipt and put them into `dist/`\n\n  It also moves any other necessary non-typescript files from `src/` to `dist/` (handled by `copyRes.js`)\n\n* Execute `npm run serve` to run the server\n\n# Tour of the source code\nAll the backend code related stuff is in `src/`, static assets for the frontend are in `assets/`\n\n## Backend files\n\u003ctable\u003e\n\u003ctr\u003e\n  \u003cth\u003eComponent\u003c/td\u003e\n  \u003cth\u003eDescription\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd\u003e\n  \n  `controllers/`\n  \n  \u003c/td\u003e\n  \u003ctd\u003e\n  \n  Controllers for different routes\n  \n  \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd\u003e\n  \n  `database/`\n  \n  \u003c/td\u003e\n  \u003ctd\u003e\n  \n  Component that manages low level SQL queries using pg-promise and exposes a high level, ORM-like API to be used by the app\n\n  `database/models/` - Types that describe the model of the tables\n\n  `database/repos/` - Classes that handle collection of closely related table(s) and expose the high level API to be used by the app\n\n  `database/sql/` - SQL query files and objects for each collection of closely related table(s), grouped by folder\n  \n  \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd\u003e\n  \n  `middleware/`\n  \n  \u003c/td\u003e\n  \u003ctd\u003e\n  \n  Handles middleware configuration and exposes middleware objects to be used by the app\n  \n  \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd\u003e\n  \n  `routers/`\n  \n  \u003c/td\u003e\n  \u003ctd\u003e\n  \n  Routers that map controllers to corresponding routes - exposes a router object to be used by the app\n  \n  \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd\u003e\n  \n  `types/`\n  \n  \u003c/td\u003e\n  \u003ctd\u003e\n  \n  Extra types used across the project\n  \n  \u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n  \u003ctd\u003e\n  \n  `webpush-handler/`\n  \n  \u003c/td\u003e\n  \u003ctd\u003e\n  \n  Component that has the web-push API exposed to itself\n\n  Manages the web-push calls\n  \n  \u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\n## Frontend files\nThe 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\n\n### index.ts\nMakes sure the browser supports push notifications\n\nInitiallized the UI, based on initial state of subscription\n\nSets up handlers for the subscribe and push buttons\n\nThis 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.\n\n### sw.ts\nService worker file that sets up event listener for the push notification to be sent\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftotallynotchase%2Fweb-push-tryout","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftotallynotchase%2Fweb-push-tryout","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftotallynotchase%2Fweb-push-tryout/lists"}