title
Push Notifications Using Node.js & Service Worker

description
In this video we will create push notification capability using Node.js without any 3rd party services. We will achieve this using web-push, the push/notifications api and service workers. Code: https://github.com/bradtraversy/node_push_notifications Webpush Repo: https://github.com/web-push-libs/web-push Helpful Articles: https://developers.google.com/web/ilt/pwa/introduction-to-push-notifications https://developers.google.com/web/fundamentals/primers/service-workers/ https://medium.com/samsung-internet-dev/a-beginners-guide-to-service-workers-f76abf1960f6 💖 Become a Patron: Show support & get perks! http://www.patreon.com/traversymedia Website & Udemy Courses http://www.traversymedia.com Follow Traversy Media: http://www.facebook.com/traversymedia http://www.twitter.com/traversymedia http://www.instagram.com/traversymedia

detail
{'title': 'Push Notifications Using Node.js & Service Worker', 'heatmap': [{'end': 461.432, 'start': 421.86, 'weight': 1}], 'summary': "Learn to build a push notification system using node.js and web push, without third-party services, with a focus on service workers' significance in modern browsers, exploring push notifications for user engagement and setting up server and client operations for successful push notifications, creating a client folder and files, implementing web push notifications with a preference for single quotes, converting a vapid public key to a uint8 array, and implementing a service worker to utilize push notifications with a 90% open rate in marketing.", 'chapters': [{'end': 70.877, 'segs': [{'end': 55.983, 'src': 'embed', 'start': 29.984, 'weight': 0, 'content': [{'end': 37.029, 'text': 'Now it can get a little confusing, so I just want to talk a little bit about push notifications as well as service workers,', 'start': 29.984, 'duration': 7.045}, {'end': 40.251, 'text': 'because we do need service workers to use push notifications.', 'start': 37.029, 'duration': 3.222}, {'end': 47.016, 'text': 'So basically a push notification, or in our case is a web push notification.', 'start': 40.912, 'duration': 6.104}, {'end': 52.32, 'text': "it's almost like a text message and modern browsers can handle them using service workers.", 'start': 47.016, 'duration': 5.304}, {'end': 55.983, 'text': 'so the last few versions of Chrome, Last few versions of Firefox.', 'start': 52.32, 'duration': 3.663}], 'summary': 'Web push notifications rely on service workers in modern browsers like chrome and firefox.', 'duration': 25.999, 'max_score': 29.984, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HlYFW2zaYQM/pics/HlYFW2zaYQM29984.jpg'}], 'start': 7.188, 'title': 'Building web push notification system', 'summary': 'Provides a guide on building a push notification system using node.js and web push, highlighting the capability to send notifications without third-party services and the significance of service workers in modern browsers.', 'chapters': [{'end': 70.877, 'start': 7.188, 'title': 'Building web push notification system', 'summary': 'Explains how to build a push notification system using node.js and web push, which allows users to send notifications without third-party services, and the importance of service workers for handling push notifications in modern browsers.', 'duration': 63.689, 'highlights': ['Web Push module enables building push notification system without third-party services, reducing dependency on external platforms.', 'Service workers are essential for handling push notifications in modern browsers like Chrome and Firefox, while Edge does not fully support them yet.']}], 'duration': 63.689, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HlYFW2zaYQM/pics/HlYFW2zaYQM7188.jpg', 'highlights': ['Web Push module enables building push notification system without third-party services, reducing dependency on external platforms.', 'Service workers are essential for handling push notifications in modern browsers like Chrome and Firefox, while Edge does not fully support them yet.']}, {'end': 515.27, 'segs': [{'end': 99.637, 'src': 'embed', 'start': 71.597, 'weight': 4, 'content': [{'end': 76.344, 'text': "um, push notifications are great for capturing the user's attention for whatever reason.", 'start': 71.597, 'duration': 4.747}, {'end': 84.835, 'text': "maybe you have a sale on some kind of e-commerce site or some kind of point of action where you really want to grab the user's attention now,", 'start': 76.344, 'duration': 8.491}, {'end': 88.19, 'text': 'Just to show you what they look like.', 'start': 85.908, 'duration': 2.282}, {'end': 91.592, 'text': "I'm sure most of you know, but if you don't, you can go to this.", 'start': 88.19, 'duration': 3.402}, {'end': 96.135, 'text': 'test.peter.sh slash notification generator.', 'start': 91.592, 'duration': 4.543}, {'end': 99.637, 'text': "You can choose some different options here if you want, but I'm going to leave the defaults.", 'start': 96.535, 'duration': 3.102}], 'summary': 'Push notifications are effective for capturing user attention, especially for sales or specific actions.', 'duration': 28.04, 'max_score': 71.597, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HlYFW2zaYQM/pics/HlYFW2zaYQM71597.jpg'}, {'end': 224.605, 'src': 'embed', 'start': 182.514, 'weight': 0, 'content': [{'end': 186.757, 'text': "So obviously dealing with offline content, that's at the core of progressive web apps.", 'start': 182.514, 'duration': 4.243}, {'end': 196.084, 'text': "And then right here, using push notifications, your website can send the user notifications even if it's open, or I'm sorry, even if it isn't open.", 'start': 187.498, 'duration': 8.586}, {'end': 200.667, 'text': 'You may have seen this on Mastodon, Twitter, Facebook, etc.', 'start': 196.484, 'duration': 4.183}, {'end': 202.789, 'text': "So that's what we'll be doing, guys.", 'start': 201.528, 'duration': 1.261}, {'end': 206.532, 'text': "This is another good article on push notifications, but it's kind of technical.", 'start': 202.809, 'duration': 3.723}, {'end': 208.354, 'text': 'This is the Google Docs again.', 'start': 206.592, 'duration': 1.762}, {'end': 211.357, 'text': "So let's go ahead and get started here.", 'start': 209.295, 'duration': 2.062}, {'end': 217.302, 'text': "I'm going to open up VS Code and I just have an empty folder called Node Push Notifications.", 'start': 211.397, 'duration': 5.905}, {'end': 224.605, 'text': "And basically what we need to do is create a server side script that's going to accept an endpoint.", 'start': 217.862, 'duration': 6.743}], 'summary': 'Progressive web apps enable offline content and push notifications for user engagement.', 'duration': 42.091, 'max_score': 182.514, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HlYFW2zaYQM/pics/HlYFW2zaYQM182514.jpg'}, {'end': 368.895, 'src': 'embed', 'start': 329.202, 'weight': 1, 'content': [{'end': 338.43, 'text': "Okay, we're going to bring in a couple more things as well.", 'start': 329.202, 'duration': 9.228}, {'end': 340.412, 'text': 'So we also want web push.', 'start': 338.551, 'duration': 1.861}, {'end': 342.914, 'text': "So it'll be web dash push.", 'start': 340.572, 'duration': 2.342}, {'end': 347.859, 'text': "But here I'm just going to call it web push.", 'start': 345.417, 'duration': 2.442}, {'end': 352.123, 'text': "And let's see, we want body parser.", 'start': 349.821, 'duration': 2.302}, {'end': 363.493, 'text': "So that'll be require body dash parser and then we just want the path module, which is a core node.js module,", 'start': 354.631, 'duration': 8.862}, {'end': 368.895, 'text': "because we're just going to have to define the static path for for our client side.", 'start': 363.493, 'duration': 5.402}], 'summary': 'Adding web push, body parser, and path module for defining static path.', 'duration': 39.693, 'max_score': 329.202, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HlYFW2zaYQM/pics/HlYFW2zaYQM329202.jpg'}, {'end': 461.432, 'src': 'heatmap', 'start': 421.86, 'weight': 1, 'content': [{'end': 434.26, 'text': "so it's going to be dot slash, node underscore modules, slash dot bin slash web dash push and then we can run the command.", 'start': 421.86, 'duration': 12.4}, {'end': 442.948, 'text': "So we'll say generate say generate dash vapid keys and there we go.", 'start': 434.3, 'duration': 8.648}, {'end': 445.911, 'text': 'So it gives us a public key and a private key.', 'start': 442.968, 'duration': 2.943}, {'end': 446.752, 'text': 'All right.', 'start': 446.472, 'duration': 0.28}, {'end': 461.432, 'text': "Now what we want to do is put these into variables so we'll say const say public VAPID key which will be a string and private VAPID key.", 'start': 446.792, 'duration': 14.64}], 'summary': "Running 'generate vapid keys' command in node.js yields public and private keys", 'duration': 39.572, 'max_score': 421.86, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HlYFW2zaYQM/pics/HlYFW2zaYQM421860.jpg'}, {'end': 515.27, 'src': 'embed', 'start': 483.129, 'weight': 2, 'content': [{'end': 493.955, 'text': 'So next thing we want to do is we want to run web push dot, set vapid details and this takes in three things.', 'start': 483.129, 'duration': 10.826}, {'end': 496.417, 'text': "it's going to take in a mail to an email address.", 'start': 493.955, 'duration': 2.462}, {'end': 509.524, 'text': 'So we want to say mail to colon and then some kind of email address and then it takes in the public key and then the private key.', 'start': 496.497, 'duration': 13.027}, {'end': 512.029, 'text': 'All right.', 'start': 511.829, 'duration': 0.2}, {'end': 515.27, 'text': "And I didn't even explain what these vapid keys do.", 'start': 512.149, 'duration': 3.121}], 'summary': 'Setting up web push with vapid details requires an email address, public key, and private key.', 'duration': 32.141, 'max_score': 483.129, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HlYFW2zaYQM/pics/HlYFW2zaYQM483129.jpg'}], 'start': 71.597, 'title': 'Push notifications and service workers', 'summary': 'Explores the use of push notifications for user engagement, highlighting key features and demonstrates the process and appearance of push notifications. additionally, it introduces service workers, explaining their role in progressive web apps and the process of setting up a server side script to handle push notifications.', 'chapters': [{'end': 136.635, 'start': 71.597, 'title': 'Push notifications for user engagement', 'summary': 'Explores the use of push notifications to capture user attention, especially for sales and point of action, demonstrating the process and appearance of push notifications via a website, highlighting key features such as title, content, icon, and images.', 'duration': 65.038, 'highlights': ['The chapter explores the use of push notifications to capture user attention, especially for sales and point of action.', 'Demonstrates the process and appearance of push notifications via a website.', 'Highlights key features such as title, content, icon, and images.']}, {'end': 515.27, 'start': 137.296, 'title': 'Service workers and push notifications', 'summary': 'Introduces service workers, explaining their role in progressive web apps, their functions such as offline content and push notifications, and the process of setting up a server side script to handle push notifications.', 'duration': 377.974, 'highlights': ['Service workers are at the core of progressive web apps and can be used for offline content and push notifications. Service workers play a crucial role in progressive web apps and enable the display of offline content and push notifications.', 'A service worker is a JavaScript file added to a website and can be used for offline display and push notifications. Service workers are JavaScript files added to websites to facilitate offline content display and push notifications.', 'Setting up a server side script to handle push notifications involves creating an endpoint with Express and sending a subscription object from the client to the server. The process involves creating an endpoint with Express called subscribe and sending a subscription object from the client to the server to trigger push notifications.', 'Installing dependencies such as web push, express, and body parser is necessary for setting up the server side script. Dependencies like web push, express, and body parser are essential for setting up the server side script for push notifications.', 'Generating VAPID keys is a crucial step in setting up push notifications and involves creating public and private keys and setting them using web push. The process includes generating VAPID keys, which involves creating public and private keys and setting them using web push.']}], 'duration': 443.673, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HlYFW2zaYQM/pics/HlYFW2zaYQM71597.jpg', 'highlights': ['The chapter explores the use of push notifications to capture user attention, especially for sales and point of action.', 'Highlights key features such as title, content, icon, and images.', 'Service workers play a crucial role in progressive web apps and enable the display of offline content and push notifications.', 'Setting up a server side script to handle push notifications involves creating an endpoint with Express and sending a subscription object from the client to the server.', 'Dependencies like web push, express, and body parser are essential for setting up the server side script for push notifications.', 'Generating VAPID keys is a crucial step in setting up push notifications and involves creating public and private keys and setting them using web push.']}, {'end': 793.528, 'segs': [{'end': 573.32, 'src': 'embed', 'start': 515.33, 'weight': 0, 'content': [{'end': 519.491, 'text': "Basically, they they identify who's sending the push notification.", 'start': 515.33, 'duration': 4.161}, {'end': 522.332, 'text': 'All right.', 'start': 519.511, 'duration': 2.821}, {'end': 523.173, 'text': 'Sorry for that bang.', 'start': 522.373, 'duration': 0.8}, {'end': 524.254, 'text': 'And if you guys can hear that.', 'start': 523.193, 'duration': 1.061}, {'end': 529.447, 'text': 'So next thing we want to do is create our subscribe route.', 'start': 525.703, 'duration': 3.744}, {'end': 532.77, 'text': "So this is what we're going to send from the client.", 'start': 530.468, 'duration': 2.302}, {'end': 542.259, 'text': "We're going to send to this route and then this is going to be responsible for basically sending the notification directly to the service worker.", 'start': 532.79, 'duration': 9.469}, {'end': 544.421, 'text': "So it's going to be a post request.", 'start': 542.98, 'duration': 1.441}, {'end': 550.047, 'text': "So we'll say app.post and we're going to just call it subscribe.", 'start': 544.441, 'duration': 5.606}, {'end': 553.913, 'text': 'All right.', 'start': 553.533, 'duration': 0.38}, {'end': 555.834, 'text': "And then we'll put an arrow function here.", 'start': 553.953, 'duration': 1.881}, {'end': 557.454, 'text': "We'll say request response.", 'start': 555.874, 'duration': 1.58}, {'end': 566.718, 'text': "And in here, what we want to do first is we want to get the push subscription object that we're going to send from the client.", 'start': 559.175, 'duration': 7.543}, {'end': 571.799, 'text': "So let's say get push subscription object.", 'start': 566.738, 'duration': 5.061}, {'end': 573.32, 'text': 'And we can do that.', 'start': 572.48, 'duration': 0.84}], 'summary': 'Creating a subscribe route for sending push notifications via a post request.', 'duration': 57.99, 'max_score': 515.33, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HlYFW2zaYQM/pics/HlYFW2zaYQM515330.jpg'}, {'end': 660.855, 'src': 'embed', 'start': 625.964, 'weight': 4, 'content': [{'end': 632.466, 'text': "next we're going to create the payload, so we can attach a payload which is completely optional.", 'start': 625.964, 'duration': 6.502}, {'end': 637.748, 'text': "but what i'm going to do is put the title of the push notification as the payload.", 'start': 632.466, 'duration': 5.282}, {'end': 649.224, 'text': "so let's say const payload equals, And we actually want to run this through json.stringify, to make sure it's a JSON string.", 'start': 637.748, 'duration': 11.476}, {'end': 660.855, 'text': "So it'll be an object with a title and for the title we'll just say push test.", 'start': 654.211, 'duration': 6.644}], 'summary': "Creating a payload for push notifications, setting the title as 'push test'.", 'duration': 34.891, 'max_score': 625.964, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HlYFW2zaYQM/pics/HlYFW2zaYQM625964.jpg'}], 'start': 515.33, 'title': 'Push notification route and server configuration', 'summary': 'Covers creating a subscribe route for push notifications and configuring the server to run on a specific port, including setting up static folder for the client, resulting in successful server and client operation.', 'chapters': [{'end': 717.569, 'start': 515.33, 'title': 'Creating push notification route', 'summary': 'Covers creating a subscribe route for sending push notifications from the client, including setting up the route, handling the push subscription object, sending a 201 status response, creating a payload, and passing the object into the send notification function.', 'duration': 202.239, 'highlights': ['Creating a subscribe route for sending push notifications from the client Setting up the route, handling the push subscription object, sending a 201 status response, creating a payload, and passing the object into the send notification function', "Setting up the route and handling the push subscription object Setting up the route with a post request, getting the push subscription object from the client's request", 'Sending a 201 status response Setting the response status to 201 to indicate successful resource creation', "Creating a payload for the push notification Creating a payload with the title 'push test' and converting it to a JSON string", 'Passing the object into the send notification function Using the web push send notification function to send the push notification, handling any errors with synchronous catch']}, {'end': 793.528, 'start': 718.15, 'title': 'Configuring server and client', 'summary': 'Explains configuring a server to run on a specific port, setting up a static folder for the client, and restarting the server, ultimately leading to the successful running of the server and client.', 'duration': 75.378, 'highlights': ['The chapter explains setting up a static folder for the client using Express.static and the path.join method with the current directory, resulting in the successful configuration of the static folder.', 'It demonstrates the process of configuring a server to run on a specific port using console.log and back ticks to display the server start message, followed by the port variable, leading to the successful running of the server on the specified port.', 'The chapter concludes with the successful restart of the server, resulting in the server and client running seamlessly.']}], 'duration': 278.198, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HlYFW2zaYQM/pics/HlYFW2zaYQM515330.jpg', 'highlights': ['Creating a subscribe route for sending push notifications from the client', 'Setting up a static folder for the client using Express.static and path.join method', 'Configuring a server to run on a specific port using console.log and back ticks', 'Sending a 201 status response to indicate successful resource creation', "Creating a payload for the push notification with the title 'push test'", 'Passing the object into the send notification function to send the push notification']}, {'end': 1216.673, 'segs': [{'end': 818.292, 'src': 'embed', 'start': 793.548, 'weight': 0, 'content': [{'end': 800.976, 'text': "So we're going to create a new folder and we're going to call it client and it has to be called client because that's what we called it right here.", 'start': 793.548, 'duration': 7.428}, {'end': 806.601, 'text': 'And by the way, if you notice things change when I save like the single quotes, they turn into double quotes.', 'start': 800.996, 'duration': 5.605}, {'end': 813.728, 'text': "It's because I'm using the prettier extension and that's what it's configured to do, which I might change because I prefer single quotes.", 'start': 806.641, 'duration': 7.087}, {'end': 818.292, 'text': "Anyways, let's go to client and let's create a couple files here.", 'start': 814.469, 'duration': 3.823}], 'summary': "Creating a new 'client' folder and discussing file creation and configuration changes.", 'duration': 24.744, 'max_score': 793.548, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HlYFW2zaYQM/pics/HlYFW2zaYQM793548.jpg'}, {'end': 999.294, 'src': 'embed', 'start': 970.618, 'weight': 2, 'content': [{'end': 978.542, 'text': "we're going to run a function that we're going to create called send, and if there's an error, we can actually do a dot catch.", 'start': 970.618, 'duration': 7.924}, {'end': 981.388, 'text': "Everything's going to be asynchronous.", 'start': 979.987, 'duration': 1.401}, {'end': 985.249, 'text': "We're also going to use async await, which I'll explain in a second.", 'start': 981.448, 'duration': 3.801}, {'end': 991.352, 'text': "But for right here, let's say if we get an error, then we're going to console.error that error.", 'start': 985.389, 'duration': 5.963}, {'end': 999.294, 'text': "All right, so let's go down here and create that function.", 'start': 996.192, 'duration': 3.102}], 'summary': 'Creating an asynchronous function called send with error handling.', 'duration': 28.676, 'max_score': 970.618, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HlYFW2zaYQM/pics/HlYFW2zaYQM970618.jpg'}, {'end': 1191.479, 'src': 'embed', 'start': 1160.14, 'weight': 1, 'content': [{'end': 1166.165, 'text': "Let's say register push.", 'start': 1160.14, 'duration': 6.025}, {'end': 1168.527, 'text': "We'll do a quick console log.", 'start': 1166.945, 'duration': 1.582}, {'end': 1179.395, 'text': "So what we'll do is create a variable now and we're going to call this subscription.", 'start': 1174.851, 'duration': 4.544}, {'end': 1187.676, 'text': "So this subscription is going to be set to, we're going to use a wait because this is asynchronous, and we're going to say register.", 'start': 1181.05, 'duration': 6.626}, {'end': 1191.479, 'text': 'So this is the variable we just created when we registered the service worker.', 'start': 1187.756, 'duration': 3.723}], 'summary': 'Creating a subscription variable for registering push notifications.', 'duration': 31.339, 'max_score': 1160.14, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HlYFW2zaYQM/pics/HlYFW2zaYQM1160140.jpg'}], 'start': 793.548, 'title': 'Creating client folder and files and implementing web push notifications', 'summary': "Discusses creating a 'client' folder with specific files and implementing web push notifications using node, with a preference for single quotes. it also involves registering service worker, subscribing to push notifications, and sending notifications using async await and the fetch api for improved asynchronous code handling and backend communication.", 'chapters': [{'end': 876.821, 'start': 793.548, 'title': 'Creating client folder and files', 'summary': "Discusses the process of creating a 'client' folder with 'index.html', 'client.js', and 'worker.js' files to implement push notifications using node, with a preference for single quotes over double quotes during code formatting.", 'duration': 83.273, 'highlights': ["The process involves creating a 'client' folder and files including 'index.html', 'client.js', and 'worker.js' to implement push notifications using Node.", 'The preference for single quotes over double quotes during code formatting is mentioned, with a consideration to change the configuration in the future.', "The index.html file is set up using Emmet to generate a boilerplate, with an H1 tag included for the title, 'push notifications using node'.", 'The content of the index.html file is minimal, with the inclusion of an H1 tag and the client.js file.']}, {'end': 1216.673, 'start': 876.841, 'title': 'Implementing web push notifications', 'summary': 'Involves implementing web push notifications, including registering the service worker, subscribing to push notifications, and sending notifications, using async await and the fetch api, for a better handling of asynchronous code and communication with the backend.', 'duration': 339.832, 'highlights': ['Implementing web push notifications, including registering the service worker, subscribing to push notifications, and sending notifications, using async await and the fetch API, for a better handling of asynchronous code and communication with the backend.', 'Explaining the use of async await as a more elegant way to handle asynchronous code, especially for promise-based service workers and the fetch API for backend communication.', 'Detailing the process of registering the service worker, including using the navigator API and the await keyword for asynchronous operations, and defining the scope for the service worker.', "Describing the registration of push notifications, utilizing the push manager's subscribe method with user visible only set to true and an application server key."]}], 'duration': 423.125, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HlYFW2zaYQM/pics/HlYFW2zaYQM793548.jpg', 'highlights': ["The process involves creating a 'client' folder and files including 'index.html', 'client.js', and 'worker.js' to implement push notifications using Node.", 'Implementing web push notifications, including registering the service worker, subscribing to push notifications, and sending notifications, using async await and the fetch API, for a better handling of asynchronous code and communication with the backend.', 'The preference for single quotes over double quotes during code formatting is mentioned, with a consideration to change the configuration in the future.', 'Explaining the use of async await as a more elegant way to handle asynchronous code, especially for promise-based service workers and the fetch API for backend communication.']}, {'end': 1789.655, 'segs': [{'end': 1391.563, 'src': 'embed', 'start': 1338.607, 'weight': 0, 'content': [{'end': 1340.548, 'text': 'Sending push.', 'start': 1338.607, 'duration': 1.941}, {'end': 1347.249, 'text': 'And then what we need to do basically is send this subscription object to our back end.', 'start': 1341.668, 'duration': 5.581}, {'end': 1352.831, 'text': "Remember in our Node.js where we have our subscribe route, we're going to catch it right here.", 'start': 1347.49, 'duration': 5.341}, {'end': 1360.073, 'text': "So it's going to come through the body into this variable and then down here it's going to be passed into send notification,", 'start': 1352.931, 'duration': 7.142}, {'end': 1362.214, 'text': 'which will interact with the service worker.', 'start': 1360.073, 'duration': 2.141}, {'end': 1363.934, 'text': 'So hopefully that makes sense.', 'start': 1362.614, 'duration': 1.32}, {'end': 1365.775, 'text': "So we're going to use fetch.", 'start': 1364.874, 'duration': 0.901}, {'end': 1366.375, 'text': "I'm going to use await.", 'start': 1365.815, 'duration': 0.56}, {'end': 1374.017, 'text': 'fetch and the route that we want is slash subscribe.', 'start': 1367.575, 'duration': 6.442}, {'end': 1380.819, 'text': 'now we want to make a post request, so we have to add in a couple extra parameters here.', 'start': 1374.017, 'duration': 6.802}, {'end': 1388.142, 'text': 'so one is going to be the method which is going to be post, and then we also want the body.', 'start': 1380.819, 'duration': 7.323}, {'end': 1388.842, 'text': 'now the body.', 'start': 1388.142, 'duration': 0.7}, {'end': 1391.563, 'text': "we're going to wrap this in Jason dot stringify.", 'start': 1388.842, 'duration': 2.721}], 'summary': 'Send subscription object to back end via node.js route using fetch and post request.', 'duration': 52.956, 'max_score': 1338.607, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HlYFW2zaYQM/pics/HlYFW2zaYQM1338607.jpg'}, {'end': 1518.92, 'src': 'embed', 'start': 1484.921, 'weight': 2, 'content': [{'end': 1490.685, 'text': 'And in here, we want to be able to get, remember that payload? And in the payload, we had the title.', 'start': 1484.921, 'duration': 5.764}, {'end': 1494.367, 'text': "So we're going to create a variable called data.", 'start': 1491.786, 'duration': 2.581}, {'end': 1497.91, 'text': 'And we can get this with that event parameter data.', 'start': 1494.788, 'duration': 3.122}, {'end': 1500.031, 'text': "And it's going to be JSON.", 'start': 1498.67, 'duration': 1.361}, {'end': 1504.834, 'text': "And then I'm just going to do another console.log here.", 'start': 1501.992, 'duration': 2.842}, {'end': 1508.217, 'text': "And we'll say that the push has been received.", 'start': 1505.195, 'duration': 3.022}, {'end': 1514.339, 'text': 'So say push received.', 'start': 1509.337, 'duration': 5.002}, {'end': 1518.92, 'text': 'I like to put my little ellipses here.', 'start': 1515.999, 'duration': 2.921}], 'summary': "Creating a variable 'data' to receive json payload and logging 'push received'.", 'duration': 33.999, 'max_score': 1484.921, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HlYFW2zaYQM/pics/HlYFW2zaYQM1484921.jpg'}, {'end': 1769.694, 'src': 'embed', 'start': 1741.421, 'weight': 3, 'content': [{'end': 1747.744, 'text': "But I did want to do some kind of project that implements them and also push notifications because it's something that's really cool.", 'start': 1741.421, 'duration': 6.323}, {'end': 1754.886, 'text': 'If you can offer that to your clients, I guess push notifications have a 90% open rate.', 'start': 1748.124, 'duration': 6.762}, {'end': 1758.968, 'text': 'So they can be pretty powerful for marketing and stuff like that.', 'start': 1755.426, 'duration': 3.542}, {'end': 1761.029, 'text': 'but hopefully you guys enjoyed this.', 'start': 1759.568, 'duration': 1.461}, {'end': 1764.551, 'text': "i will put this code up on github so that'll be in the description.", 'start': 1761.029, 'duration': 3.522}, {'end': 1769.694, 'text': "i'm also going to put these links to these articles in the description if you want to learn more, and, like i said,", 'start': 1764.551, 'duration': 5.143}], 'summary': 'Project with push notifications can have a 90% open rate, useful for marketing.', 'duration': 28.273, 'max_score': 1741.421, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HlYFW2zaYQM/pics/HlYFW2zaYQM1741421.jpg'}], 'start': 1217.314, 'title': 'Vapid public key conversion and service worker implementation', 'summary': 'Involves converting a vapid public key to a uint8 array and making a post request for push notifications, followed by implementing a service worker, utilizing push notifications with a 90% open rate in marketing.', 'chapters': [{'end': 1418.575, 'start': 1217.314, 'title': 'Converting vapid public key', 'summary': 'Involves converting a vapid public key to a uint8 array using a specific function and making a post request to send a push notification to the backend, followed by a brief explanation of the process and the code involved.', 'duration': 201.261, 'highlights': ['Converting Vapid public key to uint8 array The chapter involves converting a Vapid public key to a uint8 array using a specific function, as stated in the Web Push documentation.', 'Sending push notification to the backend The process includes making a post request to send a push notification to the backend using the subscription object and specifying the content type as JSON.', 'Usage of fetch and await in making the request The usage of fetch and await is demonstrated in making the post request with the necessary parameters, including the method, body, and headers.']}, {'end': 1789.655, 'start': 1418.715, 'title': 'Implementing service workers for push notifications', 'summary': 'Covers implementing a service worker to handle push notifications, including console logging, showing notifications with title and body, and utilizing the 90% open rate for push notifications in marketing.', 'duration': 370.94, 'highlights': ['The chapter covers implementing a service worker to handle push notifications, including console logging, showing notifications with title and body, and utilizing the 90% open rate for push notifications in marketing.', "The service worker is created to handle the push event, and console logs 'service worker loaded' to indicate its loading.", 'The notification displayed includes the title and body from the payload, showcasing the implementation of push notifications with specific content.', 'The tutorial mentions the 90% open rate for push notifications, highlighting its potential for marketing and client engagement.']}], 'duration': 572.341, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/HlYFW2zaYQM/pics/HlYFW2zaYQM1217314.jpg', 'highlights': ['Utilization of fetch and await in making the post request', 'Sending push notification to the backend using the subscription object', 'Converting Vapid public key to uint8 array using a specific function', 'Implementing a service worker to handle push notifications and showcasing the 90% open rate for marketing']}], 'highlights': ['Service workers are essential for handling push notifications in modern browsers like Chrome and Firefox, while Edge does not fully support them yet.', 'The chapter explores the use of push notifications to capture user attention, especially for sales and point of action.', 'Dependencies like web push, express, and body parser are essential for setting up the server side script for push notifications.', "The process involves creating a 'client' folder and files including 'index.html', 'client.js', and 'worker.js' to implement push notifications using Node.", 'Implementing web push notifications, including registering the service worker, subscribing to push notifications, and sending notifications, using async await and the fetch API, for a better handling of asynchronous code and communication with the backend.', 'Implementing a service worker to handle push notifications and showcasing the 90% open rate for marketing']}