Browser Push Notifications: 85% Open Rates for $0/Month

Email newsletters have a 20-25% open rate on a good day. Social media posts reach 2-5% of your followers organically. Browser push notifications? According to industry benchmarks from Airship and PushEngage, the average click-through rate for web push notifications is 7-12%, with delivery rates exceeding 85%.

And here is the part that changes the economics: you can self-host web push notifications using the VAPID protocol and pay exactly $0 per month. No third-party service. No subscription. No per-subscriber pricing. The entire system runs on web standards that are built into every modern browser.

I implemented self-hosted push notifications across our 52-site network. Subscribers receive a notification within seconds of a new blog post being published. The total monthly cost for the entire system: zero dollars.

How Web Push Notifications Work

Web push notifications are delivered through a browser's built-in notification system using the Push API and VAPID (Voluntary Application Server Identification) protocol. Here is the chain:

1. A visitor to your site opts in to receive notifications through a browser-native permission prompt
2. The browser generates a unique subscription endpoint and sends it to your server
3. When you have new content, your server sends a push message to the subscription endpoint
4. The browser receives the message and displays a notification — even if the user is not on your site
5. The user clicks the notification and is taken to your content

The critical difference from email is that push notifications bypass the inbox entirely. There is no spam filter. There is no promotions tab. The notification appears as a system-level alert on the user's device — desktop or mobile — with the same urgency as a text message or app notification.

The VAPID Protocol

VAPID (Voluntary Application Server Identification for Web Push) is the open standard that authenticates your server to push services. Instead of using a third-party notification service, you generate your own VAPID keys and communicate directly with the browser's push service.

Every modern browser (Chrome, Firefox, Edge, Safari) supports VAPID-based push notifications. The implementation requires:

1. A pair of VAPID keys — a public key (shared with the browser) and a private key (kept on your server)
2. A service worker — to receive and display push messages
3. A subscription management system — to store subscriber endpoints
4. A push-sending mechanism — to send messages to subscriber endpoints

Generating VAPID Keys

npx web-push generate-vapid-keys

This generates a public and private key pair. The public key is included in your client-side JavaScript. The private key stays on your server and is used to sign push messages.

The Service Worker Push Handler

Add a push event listener to your service worker:

self.addEventListener('push', (event) => {
  const data = event.data.json();
  const options = {
    body: data.body,
    icon: '/images/icon-192.png',
    badge: '/images/badge-72.png',
    data: { url: data.url },
    actions: [
      { action: 'read', title: 'Read Now' }
    ]
  };
  event.waitUntil(
    self.registration.showNotification(data.title, options)
  );
});

self.addEventListener('notificationclick', (event) => {
  event.notification.close();
  event.waitUntil(
    clients.openWindow(event.notification.data.url)
  );
});

The Subscription Flow

On your website, prompt users to subscribe with a clear, non-intrusive call to action. Avoid the immediate permission popup on page load — this has low conversion rates and annoys visitors. Instead, show a banner or button that explains the value proposition before triggering the permission request.

async function subscribePush() {
  const registration = await navigator.serviceWorker.ready;
  const subscription = await registration.pushManager.subscribe({
    userVisibleOnly: true,
    applicationServerKey: urlBase64ToUint8Array(VAPID_PUBLIC_KEY)
  });
  // Send subscription to your server for storage
  await fetch('/api/subscribe', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(subscription)
  });
}

Storing Subscriptions

Subscriptions need to be stored somewhere. For static sites without a backend, options include:

• Netlify Functions or Cloudflare Workers — serverless functions that store subscriptions in a KV store or database
• A simple JSON file on a server — for small subscriber lists, a flat file is sufficient
• Firebase Cloud Messaging — Google's free push notification infrastructure that handles subscription storage and delivery

For our network, I use Cloudflare Workers with KV storage. Each site has a worker that handles subscription management and push sending. The free tier of Cloudflare Workers handles our volume with room to spare.

Sending Notifications

When you publish new content, send a push notification to all stored subscriptions:

const webpush = require('web-push');

webpush.setVapidDetails(
  'mailto:you@example.com',
  VAPID_PUBLIC_KEY,
  VAPID_PRIVATE_KEY
);

const payload = JSON.stringify({
  title: 'New Post: Budget Tools for Freelancers',
  body: 'The 5 free tools that replaced my $200/month accounting software.',
  url: 'https://thew2trap.com/blog/budget-tools-freelancers/'
});

// Send to each subscriber
subscriptions.forEach((subscription) => {
  webpush.sendNotification(subscription, payload)
    .catch((err) => {
      if (err.statusCode === 410) {
        // Subscription has expired — remove from list
        removeSubscription(subscription);
      }
    });
});

Why Self-Hosted Beats Third-Party Services

Third-party push notification services like OneSignal, PushEngage, and Webpushr charge based on subscriber count. Pricing typically starts at $9-29/month for basic plans and scales to $99-499/month as your subscriber list grows.

Self-hosted VAPID push costs $0 regardless of subscriber count. The push messages are delivered through the browser vendors' push services (Google's FCM for Chrome, Mozilla's push service for Firefox, Apple's push service for Safari), which are free and built into the browser infrastructure.

The only cost is the compute time for sending messages, which is negligible. A Cloudflare Worker on the free tier can send thousands of push notifications per day.

The trade-off is setup complexity. Third-party services provide dashboards, analytics, segmentation, and A/B testing. Self-hosted push provides the core functionality — send notifications to subscribers — without the extras. For content publishers who just need to notify subscribers of new posts, the core functionality is all that matters.

Notification Strategy

Timing

Send notifications within 30 minutes of publishing new content. Push notification engagement drops rapidly with delay — notifications sent within the first hour of publication get 2-3x higher click-through rates than notifications sent hours later.

Frequency

Do not over-notify. One notification per new blog post is appropriate. Multiple notifications per day will drive unsubscribes. If you publish daily, consider a weekly digest notification instead of per-post notifications.

For our network, most sites publish 1-2 posts per week. Each post triggers one notification. The unsubscribe rate at this frequency is under 2% per month.

Content

The notification title should be the blog post title or a shortened version. The body text should be a one-sentence summary that creates enough curiosity to drive a click without being clickbait.

Effective: "New Post: Turn Financial Data Into 200 Passive Backlinks" / "How stock photo platforms can generate backlinks from your charts and visualizations."

Ineffective: "New Blog Post!" / "Click here to read our latest article."

Permission Prompt Strategy

The browser permission prompt ("Allow notifications from [domain]?") is a one-time opportunity. If the user clicks "Block," you cannot ask again. Optimize the timing and context:

• Do not trigger the prompt immediately on page load
• Wait until the user has demonstrated engagement (scrolled 50%+ of an article, visited 2+ pages, or spent 60+ seconds on site)
• Show a custom banner first that explains what they will receive ("Get notified when we publish new financial analysis — about once a week")
• Only trigger the browser prompt after the user clicks your custom banner

This two-step approach converts at 8-15%, compared to 2-3% for immediate permission prompts.

Results From Our Network

After implementing self-hosted push notifications across all 52 sites:

• Combined push subscribers reached approximately 1,200 within 90 days
• Average notification delivery rate: 87%
• Average click-through rate: 9.3%
• Push-referred visitors had 40% higher pages per session than organic search visitors
• Monthly cost: $0

The highest-performing notifications were those that promised specific, actionable content: "5 Free Tools That Replace $200/Month Software" outperformed "New Post About Business Tools" by 3x in click-through rate.

Push notifications will not replace email marketing or SEO as a primary traffic channel. But for a channel that costs nothing to operate and delivers engagement rates that email and social media cannot match, it is one of the highest-ROI marketing implementations available.

For the complete zero-cost marketing technology stack, see The W-2 Trap and the infrastructure guide in The $100 Dollar Network.