How to run the project locally
Open a new terminal session.
CD to the root folder of the project and run yarn to install all Node packages.
Then run yarn start to start the project and automatically launch a browser.
Click Subscribe Web Push and copy a subscription JSON object in a text box.
Use copied subscription object on a server side to send push notification.
This project requires Node.js version >= 14.
How to send a push message from a server
Set a pushSubscription object in PushMessageFromServer.js, we can get it after subscribing.
Then execute the following command:
$ node PushMessageFromServer.js Notification does not always show as a banner on Windows.
Try to turn off focus assist.
No push notification message at all
You may need to manually update service worker. Open a Chrome developer tool with ctrl+shift+i keys
and select an application tab.
Then click Service Workers node > Skip waiting service worker.
Generate publish and private key public and private keys with the following code
const vapIdKeys = webPush . generateVAPIDKeys ( ) ;
const vapidKeys = webPush . generateVAPIDKeys ( ) ;
console . log ( vapidKeys ) ;
Use a public key in subscription script (PushSubscription.tsx)
A user subscribes web push with subscription script (PushSubscription.tsx) and bet subscription object.
Use public, private keys and subscription object on server script (PushMessageFromServer.js) to send push message to a subscribed user.
Subscription object is what we store in a database. It is an identity of a subscribed user.
Use a service worker script (service-worker.js) to handle push notification and customize how to show it to a user.
You can test push with a localhost and do need to deploy to public URL
Get subscription object on a published website for testing only For using Web Push in .NET project. Here are some useful articles: Requirements for Web Push on iOS
iOS 16.4+ (Released March 2023)
Safari or any iOS browser using WebKit (all iOS browsers use WebKit, including Chrome, Firefox, Edge)
Your site must be:
Served over HTTPS
Installed as a PWA (Progressive Web App) via "Add to Home Screen"
Must use the standard Push API + Notification API
How Upgrade React to the major release version yarn upgrade react --latest
yarn upgrade react-dom --latest
yarn upgrade react-dom --latest
yarn upgrade @types/react --latest
yarn upgrade @types/react-dom --latest