Check out a free preview of the full Progressive Web Applications and Offline course:
The "VAPID for Web Push" Lesson is part of the full, Progressive Web Applications and Offline course featured in this preview video. Here's what you'd learn in this lesson:

After introducing Voluntary Application Server Identification (VAPID) for Web Push, which helps distinguish legitimate traffic from bad, Mike demonstrates how to generate VAPID keys.

Get Unlimited Access Now

Transcript from the "VAPID for Web Push" Lesson

[00:00:00]
>> Mike North: So the second thing is a little bit more interesting, that is something called a VAPID key. VAPID stands for Voluntary Application Server Identification for Web Push, this is not so much encryption, it's just identification. And the idea is that you generate some keys, and the public key is part of your app that you ship and the private key is part of what you use to send messages to this web push service.

[00:00:30] And it serves to really ensure that this came from your server. Now it's voluntary, you do not have to use it but it's a good idea to use it. You're a good citizen developer for doing this. The main benefit is that the push service itself can identify traffic coming into it, and so it's a way that it can kinda mitigate or more easily detect DDoS attacks.

[00:01:00] So if you identify yourself, your traffic is not going to be confused for other things, and they know exactly who they will shut down, right? So if there's an issue, they're likely to let the identified traffic continue as usual, and sort of throttle down the unidentified traffic cuz that could potentially be malicious.

[00:01:21] So here's a function that you need, you'll need this for the exercise, it's basically gonna take that VAPID key and turn it into a form that this library can consume. Just copy and paste it, and use it when we have these subscribe options, right? So we need to have this in a form where it is an eight bit integer array and currently it's a Base 64 string and this puts it in the right format.

[00:01:55] So and we don't have this function available to us as part of the service worker platform but we can use it by copying and pasting. So the way you generate a pair of VAPID keys is possible with this web push library that's already installed. You should already have VAPID keys in your private folder in the project, there should be a little JSON file in there called, I think it's just vapid.json.

[00:02:23] And public key goes to the browser, private key is part of the little Node.js thing that's gonna be sending the notifications.