PWA Push Notifications Part 2 -- 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: • PWA Push Notifications -- send notificatio...
0:00 Introduction
3:00 Install web-push
4:20 Generate VAPID Keys
5:34 Place VAPID Keys into config
7:10 Create handler/route to serve VAPID Key (Hapi.js)
11:53 Building the API project
13:40 Fixing authorization issues with route
23:42 Integrated VAPID Key into creating the push subscription request - Setup
26: 38 Integrated VAPID Key into creating the push subscription request - Execution
Api call
wire up to random button to test in UI
29:14 fix CORS block
33:19 Try to add push subscription notification to `sw.ts` (service worker file) -- fail
46:25 Move the code from `sw.ts` to its own file, `pushRegistration.ts`
51:10 Find and fix a typo
58:30 Figure out I still need to `await` my `promise` from subscription request
1:00:00 Be mystified by the endpoint value (I figured out what to do with that, will show you next video)
Links
[web-push](https://github.com/web-push-libs/web-...)
[subscribe to push notifications](https://developer.mozilla.org/en-US/d...)
[what we get back from `.subscribe()`](https://developers.google.com/web/ilt...)
[allow cors for all routes: Hapi](https://akhromieiev.com/tutorials/usi...)
[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"