PWA Push Notifications Part 4: send notifications to Android, Windows, Linux & MacOS

Опубликовано: 23 Апрель 2026
на канале: kaos josh
95
1

Join me as I integrate push notifications -- one of the many things I'll have to do to create my PWA.


Part 4
Plan
1. `JSON.stringify` the data from the push subscription result (the data from the promise)
2. add properties `auth` and `p256dh` to:
validation schema (Joi)
route (hapi handler)
api call (front-core ajax call)
3. verify new properties are saved
4. Test sending a message to the endpoint
create endpoint `push-notify` with `message` param
curl it!

Timestamps
1:16 parsing the `promise` from the subscription notification request
2:42 update `joi` validation schema for `PushSubscription`
4:50 implement `save` for `PushSubscription` (for this demonstration only)
5:36 implement route for triggering a subscription notification
6:15 forgot to change validation reference from `PushSubscriptionEndpoint` to `PushSubscription`
7:50 typo: `require` should have been `required`
9:28 another validation reference error, this time the endpoint is rejecting the input from subscription request
11:02 fix validation error
22:02 `toString` the payload before `save`ing it
31:27 restructure the data for my `post` request to suit valiation schema
41:00 be mystified as to why my browser is not receiving the push notification even though I'm getting a `201` response




[email protected]

"dependencies":
"bootstrap": "^4.5.3",
"react": "^16.13.1",
"react-bootstrap": "^1.3.0",
"react-dom": "^16.13.1",
"react-hook-form": "^6.9.2",
"react-redux": "^7.2.2",
"react-router-dom": "^5.2.0",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0",
"workbox-precaching": "^5.1.4",
"workbox-routing": "^5.1.4",
"workbox-strategies": "^5.1.4"


"devDependencies":
"@babel/core": "^7.0.0-0",
"@babel/plugin-transform-runtime": "^7.12.1",
"@babel/preset-env": "^7.12.1",
"@babel/preset-typescript": "^7.12.1",
"@babel/runtime": "^7.12.1",
"autoprefixer": "^10.0.1",
"parcel": "^1.12.4",
"postcss": "^8.1.4",
"sass": "^1.27.0",
"shelljs": "^0.8.4",
"typescript": "^4.0.3",
"upath": "^2.0.0"