Push Notifications for the Web: The Direct Line to the Customer

Email marketing is great, but emails land in spam or are ignored for days. Social Media is great, but the algorithm decides if your customer sees your post.

Push Notifications are the only channel that offers (almost) guaranteed attention. They appear directly on the lock screen – the most sacred place in the digital world. Previously, this privilege was reserved for native apps. Today, websites can do it too.

But with great power comes great responsibility. Whoever uses push incorrectly gets blocked immediately. This article shows how to implement Web Push technically cleanly and use it psychologically wisely.

Featured Snippet: Web Push Notifications are messages sent from a website via a Service Worker to the user's browser – even if the website is currently closed. They use the standard Push API and work on Android, Windows, macOS, and (since iOS 16.4) also on iPhones if the web app is installed on the homescreen.

---

The Cost of Inaction: Dependence on Algorithms

If you don't build "Owned Channels" (channels that belong to you), you are a tenant on foreign land (Facebook, Google). If Facebook throttles organic reach tomorrow (which they constantly do), you no longer reach your fans.

Web Push is an Owned Channel. You have a list of "Subscribers" (device tokens). No one can take this connection away from you. Websites with push strategy often see:

• Returning Visitors: +40%.
• Click-Through Rates (CTR): 5-15% (Comparison Email: often only 2-3%).
• Time-to-Action: Minutes instead of hours.

---

Technical Architecture: How It Works

Push is an interaction between three actors:

1. Client (Browser): The user grants permission (Notification.requestPermission()).
2. Push Service (Browser Vendor): A server from Google (FCM), Mozilla, or Apple (APNS) that delivers the message.
3. Your Server: Sends the payload to the Push Service.

The core piece is the Service Worker. It is a script that runs in the background. When a push message arrives, the browser "wakes up" the service worker. This then decides: "Display this message."

// Service Worker (sw.js)
self.addEventListener('push', function(event) {
  const data = event.data.json();
  const options = {
    body: data.body,
    icon: '/icon.png',
    badge: '/badge.png'
  };
  event.waitUntil(
    self.registration.showNotification(data.title, options)
  );
});

---

UX Psychology: The "Permission Prompt" of Death

The biggest mistake 90% of all websites make: The user lands on the page, and BAM – a popup: "We want to send you messages! Allow/Block".

What does the user do? They instinctively click on "Block". And the worst part: Once blocked, it is almost impossible to undo (deep in settings).

The Solution: The "Double Opt-In" Pattern.

1. Create Context: Build an HTML button into your page: "Notify me about price changes".
2. Explanation: When the user clicks, explain briefly: "We send updates max. 1x per week."
3. The Real Prompt: Only THEN call the browser prompt. Since the user just clicked intimately ("User Intent"), they will almost certainly click "Allow".

---

iOS Particularity (The Elephant in the Room)

For a long time, Apple blocked Web Push on the iPhone. Since iOS 16.4, it is possible, BUT with one restriction: The Web App must be installed on the homescreen ("Add to Homescreen"). Simply requesting push in Safari (like in Chrome Android) does not work.

Strategy: Detect iOS users. Show them instructions ("Install our app for updates"). Once installed, push works exactly like a native app (incl. badge count on the icon).

---

Content Strategy: Don't Annoy, Be Useful

Push is intimate. Abuse is punished. Good Use-Cases:

• Transactional: "Your package will be delivered today." (The Gold Standard).
• Time-Sensitive: "Flash Sale ends in 2 hours."
• Personalized: "Someone replied to your comment."

Bad Use-Cases:

• "Read our new blog article." (Too generic. Email is better for that.)
• "We missed you." (Seems desperate.)

Rule: Always ask yourself: "Is this info so important that my phone should vibrate?" If no, send no push.

---

Myth-Busting: "I Need a SaaS for This"

Many use expensive tools like OneSignal or Braze. These are good tools (for segmentation and analytics), but technically they are not necessary. Web Push is an open W3C standard ("VAPID Keys"). You can host this completely free yourself (with libraries like web-push for Node.js). For the start, a DIY solution is often enough. SaaS is only worth it if you want to build complex marketing funnels.

---

FAQ: Web Push Implementation

---

Internal Linking

Related Articles:

• PWA vs Native Apps
• Service Workers Magic
• Touch-Friendly Design