Web push notifications: how to set up without annoying

What web push is and how it works

Web push notifications are short messages from a site that reach the browser even when the tab is closed. The user grants permission once, the browser returns a subscription with an endpoint and keys, and your server sends messages through a push service using a VAPID-signed protocol. The golden rule is to ask for permission at the right moment and never flood people.

Opt-in UX: how to ask well

Firing the native browser prompt in the first second almost always earns a “Block.” A two-step pattern works: first your own soft prompt explaining the benefit, and only after agreement the system request.

• Not instantly. Show the prompt after a first useful action, not on arrival.
• Explain why. “Notify you when the price drops?” beats a silent prompt.
• Respect a no. If they decline, don't re-ask for weeks.
• Context. Ask on a product page, not the homepage.

VAPID keys

VAPID (Voluntary Application Server Identification) identifies your server to the push service. You need a key pair: the public key goes to the browser at subscription, the private key stays on the server and signs requests.

# Generate a VAPID key pair
npx web-push generate-vapid-keys

Public Key:  BQ8...prqZk
Private Key: 3Kf...9dQ
Subject:     mailto:push@yourtrend.online

The public key is passed when subscribing in the browser:

registration.pushManager.subscribe({
  userVisibleOnly: true,
  applicationServerKey: 'BQ8...prqZk'
});

Frequency: how not to annoy

Push annoys faster than email because it appears over everything. Frequency guidance:

Always offer quiet hours and easy opt-out. A night-time push is a direct path to being turned off.

Web push segmentation

As with email, don't send to everyone. Segment by viewed categories, city, language and behavior. Abandoned cart, a price drop on a favorite, back-in-stock — targeted scenarios are clicked far more than mass blasts. In YourTrend web push lives alongside email, SMS, segments and automations, so the channel is chosen to fit the audience — overview on the features page.

Useful use cases

1. Abandoned cart after 1–2 hours.
2. Price drop on a favorited item.
3. Back in stock for those who waited.
4. Order status: shipped, delivered.
5. Content: a new article on a topic they follow.

What sending and receiving look like

The server sends an encrypted message to the subscription endpoint, and the service worker in the browser catches the push event and shows a notification even with the tab closed. The payload is a short JSON:

{
  "title": "Price dropped 20%",
  "body": "The sneakers in your favorites are cheaper now",
  "icon": "/icons/push-192.png",
  "url": "/catalog/sneakers/42"
}

// service-worker.js
self.addEventListener('push', function(event) {
  const d = event.data.json();
  event.waitUntil(
    self.registration.showNotification(d.title, {
      body: d.body, icon: d.icon, data: { url: d.url }
    })
  );
});

On click, send the user to the specific product from the url field, not the homepage — that noticeably lifts conversion.

Browser support and iOS

Web push works in Chrome, Firefox, Edge and Opera on desktop and Android. The key caveat is Safari: on iPhone and iPad push arrives only if the user added the site to the home screen as a PWA (available since iOS 16.4+). So web push complements email but doesn't replace it: part of your audience technically won't have it. Combine channels — email, SMS and push — per segment.

Common mistakes

• Permission prompt in the first second with no context.
• Only promos, zero useful notifications.
• No segmentation — the same push to everyone.
• No quiet hours or clear opt-out.
• The link goes to the homepage, not the specific product.

Takeaway

Web push is a fast, engaging channel but demands tact: ask at the right time, explain the benefit, segment and keep a sane frequency. Then notifications help instead of annoy. Pick a plan with the channels you need on the pricing page.