{"id":22339237,"url":"https://github.com/dotnetthailand/web-push-api-example","last_synced_at":"2025-03-26T09:12:37.903Z","repository":{"id":64790963,"uuid":"451068239","full_name":"dotnetthailand/web-push-api-example","owner":"dotnetthailand","description":"Web Push API example","archived":false,"fork":false,"pushed_at":"2022-12-29T05:02:08.000Z","size":714,"stargazers_count":0,"open_issues_count":1,"forks_count":1,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-01-31T10:22:12.924Z","etag":null,"topics":["push-notification","web-push-notification","webpush"],"latest_commit_sha":null,"homepage":"https://www.dotnetthailand.com/web-push-api-example/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dotnetthailand.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-01-23T10:19:30.000Z","updated_at":"2022-06-01T09:13:08.000Z","dependencies_parsed_at":"2023-01-31T08:01:19.451Z","dependency_job_id":null,"html_url":"https://github.com/dotnetthailand/web-push-api-example","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/dotnetthailand%2Fweb-push-api-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dotnetthailand%2Fweb-push-api-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dotnetthailand%2Fweb-push-api-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dotnetthailand%2Fweb-push-api-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dotnetthailand","download_url":"https://codeload.github.com/dotnetthailand/web-push-api-example/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245623077,"owners_count":20645680,"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":["push-notification","web-push-notification","webpush"],"created_at":"2024-12-04T07:07:39.796Z","updated_at":"2025-03-26T09:12:37.884Z","avatar_url":"https://github.com/dotnetthailand.png","language":"JavaScript","readme":"# web-push-api-example\n\n## How to run the project locally\n- Open a new terminal session.\n- CD to the root folder of the project and run `yarn` to install all Node packages.\n- Then run `yarn start` to start the project and automatically launch a browser.\n- Click `Subscribe Web Push` and copy a subscription JSON object in a text box. \n- Use subscription object on a server side to send push notification.\n- This project requires Node.js version \u003e= 14.\n\n\n# Send push notification from a server\n- Set a push subscription object that we get after a user's subscribed web push in `PushMessageFromServer.js`\n- Then execute the following command:\n  ```sh\n  $ node PushMessageFromServer.js\n  ```\n\n# Trouble shooting\n## Notification does not always show as banner on Windows.\n- Try to turn off focus assist.\n## No push notification message at all\n- You may need to manually update service worker. Open Chrome developer tool with ctrl+shift+i keys and then go to application tab.\n  Then click Service Workers node \u003e Skip waiting service worker.\n\n# Key concept\n- Generate publish and private key public and private keys with the following code\n  ```js\n  const vapIdKeys = webPush.generateVAPIDKeys();\n  const vapidKeys = webPush.generateVAPIDKeys();\n  console.log(vapidKeys);\n  ```\n- Use a public key in subscription script (App.tsx)\n- User subscribes web push with subscription script.\n- Use both public, private keys and subscription object on server script (PushMessageFromServer.js) to send push to a user.\n- Subscription object is what we store in a database. It is an identity of a subscribed user.\n- Use service worker script (service-worker.js) to handle push notification and customize how to show it to a user\n- You can test push with a localhost and do need to deploy to public URL\n\n# Get subscription object on a published website\n- For the main project in .NET Thailand repository, it can be accessed as http://www.dotnetthailand.com/web-push-api-example/.\n\n# Useful articles for .NET Web Push\n- https://www.pluralsight.com/guides/html5-desktop-notifications-with-react\n- https://blog.elmah.io/how-to-send-push-notifications-to-a-browser-in-asp-net-core/\n- https://www.bartvanuden.com/2018/01/23/push-notifications-to-your-pwa-with-asp-net-core-2-0-and-aurelia/\n- https://www.tpeczek.com/2017/12/push-notifications-and-aspnet-core-part.html\n- https://stackoverflow.com/a/47617427/1872200\n\n# Upgrade React to major release version\n  ```sh\n  yarn upgrade react --latest\n  yarn upgrade react-dom --latest\n  yarn upgrade react-dom --latest\n  yarn upgrade @types/react --latest\n  yarn upgrade @types/react-dom --latest\n  ```","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdotnetthailand%2Fweb-push-api-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdotnetthailand%2Fweb-push-api-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdotnetthailand%2Fweb-push-api-example/lists"}