Web Push Notifications - End to End implementation

Published: 06 October 2019
on channel: A shot of code
105,556
1.7k

In this video we create a working implementation of web push notifications using the 'web-push' npm package and a web page with a push handler in the service worker.

Links to the samples used:
https://github.com/web-push-libs/web-...
https://developers.google.com/web/ilt...

P.S Just joined buy me a coffee :-)
https://www.buymeacoffee.com/ashotofcode

Github link:
https://github.com/MarkJamesHoward/push

0:00 Intro
1:00 Install web-push for s server side
1:21 Create hosting webpage with Subscribe button
1:45 Add Service Worker Registration
3:00 Implement Subscribe Button (Call Subscribe on PushManager)
3:50 Add ApplicationServerKey on Web Page
5:50 Generate VAPI Keys
6:30 Add VAPI Public Key to Web Page
6:50 Set VAPI Details
8:00 Create Service Worker
8:20 Handle Push Event in Service Worker
9:15 Push Site into Github (link in description)
10:25 Push Site into Netlify to host
11:40 Subscription Details to store in DB
13:30 Perform Push!
14:12 Push Working in Chrome Browser
14:30 Push Working in Firefox (but me not noticing alert!)
15:28 Push working in Edge Browser


Watch video Web Push Notifications - End to End implementation online without registration, duration hours minute second in high quality. This video was added by user A shot of code 06 October 2019, don't forget to share it with your friends and acquaintances, it has been viewed on our site 105,556 once and liked it 1.7 thousand people.