How to send push notifications from your website

How a notification reaches the browser

The sender never talks to the computer or phone directly. Each browser has its own push service (run by Google, Mozilla, Apple or Microsoft). When someone opts in, the browser creates a subscription with an address on that service. The message goes to that address, encrypted, and the service delivers it to the browser.

On the device, a service worker receives and shows the notification: a small JavaScript file from your site that the browser keeps registered.

What your site needs

• HTTPS. Browsers only allow Web Push on secure pages (localhost works for testing).
• A service worker served from the root of your domain.
• A permission request made after a user action, such as a button click. Asking on page load is often blocked or declined.
• A VAPID key pair, which identifies the sender to the push services.

Supported browsers

Chrome, Edge, Firefox and Safari, on desktop and Android. On iPhone and iPad, Safari receives website notifications from iOS 16.4, once the person adds the site to their home screen.

VAPID keys: who creates them and where they live

When you turn on an app's Web channel, vivapush generates the VAPID key pair. The private key is encrypted and never shown in full in the dashboard. The public key reaches the browser through your site's script. You provide a contact (email or website address) the push services can use to reach you.

A subscription stays tied to the VAPID key it was created with. If the key changes, existing subscribers have to opt in again, so don't rotate it without a reason.

Step by step with vivapush

1. Create the app in the dashboard and turn on the Web channel. The VAPID keys are generated at this point.
2. Authorize your site's domain and prove you own it: publish /.well-known/vivapush-verification.txt with the code, or create the DNS TXT record _vivapush.<your domain>. Local addresses such as localhost are verified automatically.
3. Copy the service worker from /sdk/vivapush-sw.js and serve it from the root of your domain, as /vivapush-sw.js.
4. Load the script on your site and call VivaPush.init with the app's public key (it starts with vp_pub_).
5. Call VivaPush.subscribe from a button click. The script asks for permission, creates the subscription and registers the browser with its time zone, language and browser name.
6. After sign-in, call VivaPush.setUser with the customer ID from your system so you can send to a specific person.

<script src="https://vivapush.com/sdk/vivapush.js"></script>
<script>
  VivaPush.init({ appKey: "vp_pub_...", apiUrl: "https://vivapush.com" });
  button.onclick = () => VivaPush.subscribe({ externalUserId: "customer-42" });
</script>

The script is an integration example to copy or adapt, not an official SDK. The contract is the public API, so you can write your own version.

Sending the notification

In the dashboard, a campaign has five steps: details, content, audience, delivery and review. The audience can be everyone, a saved segment or a filter on platform, country, language, tags and activity. Before reaching everyone, send a test to your test devices. You can schedule in your time zone or in each person's.

From your own system, call POST /api/v1/notifications with "platforms": ["web"] and a server key. A 202 response means the notification was saved and queued, not delivered yet. Repeating the same Idempotency-Key never sends twice.

Knowing what arrived

vivapush keeps the steps apart. “Accepted for delivery” means the browser's push service took the message. “Reached the device” only counts when the service worker confirms it. The same service worker records opens and clicks.

When a browser rejects a subscription (for example, the person blocked notifications), the device stops receiving and your system can be told through the subscriptions.invalidated webhook.

Good practices

• Explain what people will get before the browser's prompt appears.
• Keep order and account alerts (transactional) apart from promotions (marketing), and let people turn off only marketing with VivaPush.setPreferences.
• Keep the title short: the API accepts up to 65 characters in the title and 240 in the message.
• Send in each person's time zone so nobody gets woken up at night.

Frequently asked questions