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

Описание

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

Part 1 https://youtu.be/r24Qzx5ks2Q
Part 2 https://youtu.be/bhFpqXUUTNA

Part 3
Timestamps

0:15 Go Over The Plan
1:20 Create Route to Accept Push Subscription (Hapi)
5:10 Add Payload Validation (Joi)
-- 13:15 Add Validation to Route
15:14 Add Service Call to Send Push Subscription to Server (Axios)
17:50 Implement Service Call into Push Registration Code
21:52 Run the Code (Or try at least)
23:18 Fix `validate` attribute placement in route structure
24:58 Hard Code API port # since config isn't working
26:43 Testing the Code by Allowing Push Notifications in Browser
-- 29:56 Save Subscription Endpoint on Server via `fs.WriteFileSync` -- not my final implementation
34:38 Create Route to Push Notification to Browser -- a de-coupled test of the notification system
37:53 Rebuild API and Test `curl`ing the `/push-notify` route
40:01 Integrate `sendNotification` into the `/push-notify` route
-- 41:04 Reviewing Relevant `web-push` documentation (mostly staring and mumbling)
-- 42:03 Starting Implementing
-- 42:59 Getting the Parameters Right
-- 46:52 Test `/push-notify` All the Way Thru
-- 48:20 Troubleshooting begins
-- 50:18 The Search for `auth` and `p256dh` Keys
-- 52:52 Fail 1
-- 56:43 I find `.getKey()` to call on `PushSubscription` promise settlement
-- 58:00 Me Trying to Parse `ArrayBuffer`


Plan
1. create route to accept subscription object created
`push-subscribe`
2. create service call to push subscription to server
2. create a save method to invoke
* place it in the fs for now
`fs.writeFileSync`
* method to retrieve as well
`fs.readFileSync`
4. Test sending a message to the endpoint
* create endpoint `push-notify` with `message` param
* curl it!

Links
[ArrayBuffer](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer)
[ArrayBuffer to String](https://developers.google.com/web/updates/2012/06/How-to-convert-ArrayBuffer-to-and-from-String)
[ArrayBuffer to String Alternate](https://www.w3docs.com/learn-javascript/arraybuffer-binary-arrays.html)
[ArrayBuffer to String S/O](https://stackoverflow.com/questions/5019801



node.js@12.16.1

"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"