VAPID key generator
Create the key pair that web push notifications need, in your browser. Copy it as .env lines or JSON for the web-push package, or check that an existing pair belongs together.
……Made in your browser and never sent to us. Store the private key as a server secret, and don't replace the pair once you have subscribers: their subscriptions would stop working.
Use the keys for web push
- Put the keys in your server's environment: the private key as a secret, never in front-end code or a public repository.
- In the browser, register a service worker and call
pushManager.subscribe()with the public key. Send the subscription to your server and store it. - On the server, send with
web-pushor another library. Your service worker shows the notification in itspushevent. Try it first with theweb push tester. - For iPhone, the app must be added to the Home Screen first, and subscribing has to start from a tap. Check your setup with the PWA checker.
Questions
What are VAPID keys?
A P-256 key pair that identifies your server to browser push services (Voluntary Application Server Identification, RFC 8292). The browser subscribes with your public key, and your server signs each push with the private key, so only you can send to your subscribers.
Are these keys compatible with the web-push npm package?
Yes. They use the same base64url format as webpush.generateVAPIDKeys(): an 87-character public key and a 43-character private key. They also work with libraries for PHP, Python, Go, Java and .NET that take base64url VAPID keys.
Is it safe to generate keys on a website?
These keys are created in your browser with the Web Crypto API and never sent to us; you can disconnect from the internet and the tool still works. For production you can also generate them on your own machine with npx web-push generate-vapid-keys.
Can I change my VAPID keys later?
Only by losing your subscribers. Every subscription is tied to the public key it was made with, so new keys mean every user has to subscribe again. Generate them once and store them safely.
What should the subject be?
A way for push services to reach you if something goes wrong: a mailto: address or an https: URL of your site. Use a real one; push services can reject requests with a malformed subject.
Do VAPID keys work for iPhone push?
Yes. Safari on iOS 16.4 and later uses standard web push with VAPID, for web apps added to the Home Screen. Your manifest's display must be standalone or fullscreen.
Everything a PWA needs, free
PWA checker
Test install, push, offline and app store readiness for any URL.
Manifest generator
Fill in a form, get a valid manifest.webmanifest and the HTML tags.
PWA icon generator
One logo in, every icon, maskable icon, favicon and iOS launch screen out.
Web push tester
Send a test notification to any subscription and see what the push service says.
We'll make your web app installable, with push
Setup covers the manifest, icons, iOS launch screens, a service worker and web push, tested on real iPhones and Android phones. Fixed price, $149.