Push Notifications

Push Notifications

Overview

Web push notifications deliver timely messages to subscribers even when they are not on your site — for back-in-stock alerts, price drops, and cart reminders. Push requires explicit browser permission, making the opt-in prompt timing critical. For Shopify, WooCommerce, and BigCommerce, dedicated push notification apps (PushOwl, OneSignal) handle all the subscriber management, triggering logic, and delivery without custom service worker code.

When to Use This Skill

• When adding back-in-stock notifications to replace static "notify me" email forms
• When recovering abandoned carts via a browser push channel alongside email
• When building a price-watch feature for wishlisted items
• When email deliverability is poor and a supplemental channel is needed
• When targeting mobile-first markets where push opt-in rates exceed email opt-in

Core Instructions

Step 1: Choose the right push notification platform

Shopify recommendation: Use PushOwl — it's the most integrated Shopify push app with built-in back-in-stock, cart abandonment, and shipping alerts.

WooCommerce recommendation: Use PushEngage or OneSignal — both have WordPress plugins and handle subscriber management automatically.

Step 2: Set up push notifications

---

Shopify with PushOwl

1. Install PushOwl from the Shopify App Store 2. Go to PushOwl → Settings → Opt-in Prompt and configure:

• Delay the prompt: set it to trigger after a customer views 2+ pages or adds an item to cart
• Opt-in message: "Get notified when items are back in stock and for price drops"

3. Go to PushOwl → Automations → Back in Stock and enable it — PushOwl automatically adds a "Notify Me" button to out-of-stock products and fires the push when inventory is replenished 4. Go to PushOwl → Automations → Cart Abandonment and enable it:

• Set timing: 1 hour after abandonment, then 24 hours
• Customize the notification message and the cart recovery URL

5. Go to PushOwl → Campaigns to send broadcast push notifications for sales, new arrivals, or flash discounts

---

WooCommerce with PushEngage

1. Install PushEngage from the WordPress plugin directory (free tier available) 2. Go to PushEngage → Settings → Subscription Prompt and configure the opt-in dialog 3. Enable automated campaigns:

• Go to PushEngage → Automation → Cart Abandonment and set the timing and message
• Go to PushEngage → Automation → Back in Stock and enable it (requires WooCommerce stock event integration)

4. For price drop alerts: go to PushEngage → Automation → Price Drop Alert and enable subscriber opt-in per product 5. Use PushEngage → Broadcast to send manual push campaigns to all subscribers

---

BigCommerce with OneSignal

1. Sign up for OneSignal at onesignal.com and create a Web Push app 2. Go to OneSignal → Settings → Web Push → Setup and follow the HTTPS domain verification 3. Add the OneSignal JavaScript snippet to your BigCommerce store via Storefront → Script Manager:

   <script src="https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.page.js" defer></script>
   <script>
     window.OneSignalDeferred = window.OneSignalDeferred || [];
     OneSignalDeferred.push(async function(OneSignal) {
       await OneSignal.init({ appId: "YOUR_APP_ID" });
     });
   </script>

4. For back-in-stock: use BigCommerce webhooks to trigger a OneSignal API call when product stock transitions from 0 to available 5. For cart abandonment: use BigCommerce's Abandoned Cart webhook + OneSignal REST API to send cart recovery pushes

---

Custom / Headless

For headless stores, implement push using the Web Push API directly:

// Service worker — save as /sw.js in your public directory
self.addEventListener('push', (event) => {
  const data = event.data?.json() ?? {};
  event.waitUntil(
    self.registration.showNotification(data.title, {
      body: data.body,
      icon: data.icon ?? '/icons/icon-192.png',
      image: data.image,
      data: { url: data.url },
      actions: data.actions ?? [],
    })
  );
});

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

// Server-side push sending using the web-push library
import webpush from 'web-push';

webpush.setVapidDetails(
  'mailto:admin@yourstore.com',
  process.env.VAPID_PUBLIC_KEY!,
  process.env.VAPID_PRIVATE_KEY!
);

// Generate VAPID keys once: npx web-push generate-vapid-keys

async function sendPushNotification(subscription: PushSubscription, payload: {
  title: string;
  body: string;
  url: string;
  icon?: string;
}) {
  try {
    await webpush.sendNotification(subscription, JSON.stringify(payload));
  } catch (err: any) {
    if (err.statusCode === 410) {
      // Subscription expired — remove from database
      await db.pushSubscriptions.deleteByEndpoint(subscription.endpoint);
    }
  }
}

// Triggered when inventory transitions from 0 to > 0
async function notifyBackInStock(productId: string) {
  const product = await db.products.findById(productId);
  const waitlist = await db.pushWaitlist.findByProduct(productId);

  for (const entry of waitlist) {
    const sub = await db.pushSubscriptions.findByUserId(entry.userId);
    if (!sub) continue;
    await sendPushNotification(sub, {
      title: 'Back in stock!',
      body: `${product.name} is available again`,
      url: `${process.env.STORE_URL}/products/${product.slug}`,
      icon: product.images[0]?.url,
    });
  }
}

Step 3: Optimize opt-in timing

The most critical factor for push notification effectiveness is when you show the permission prompt. Never ask on the first page load.

Best triggers for the opt-in prompt:

• After the visitor has viewed 3+ products
• Immediately after a customer adds an item to cart
• When a customer views an out-of-stock product (context: "Get notified when it's back")
• On the order confirmation page ("Get shipping updates and deals via browser push")

In PushOwl: go to Settings → Opt-in Prompt → Advanced and set the trigger condition. In PushEngage: go to Subscription Prompt → Display Rules and set page view count or cart event triggers.

Step 4: Set up the highest-converting push campaigns

Priority order by conversion rate:

1. Back-in-stock alerts — highest CTR (15–25%); customers opted in specifically for this product 2. Cart abandonment — set for 1 hour and 24 hours after abandonment; use urgency in the second push ("Your cart expires soon") 3. Price drop alerts — customers watching a specific product convert at 10–20% when notified of their target price 4. Shipping updates — low-friction way to grow push subscribers (capture at order confirmation); keeps brand top-of-mind

In PushOwl: all four are available as pre-built automations under Automations — enable them and customize the message.

Step 5: Measure push performance

If unsubscribe rate is above 2%, reduce push frequency or improve message relevance.

Best Practices

• Never request permission on first page load — acceptance rates jump from ~5% to ~25% when shown after a user action like adding to cart
• Limit to 2 push notifications per day per user maximum — excessive frequency is the top driver of opt-out
• Set a TTL on time-sensitive notifications — flash sale pushes should expire when the sale ends; PushOwl and PushEngage both support notification expiry
• Keep notification body under 100 characters — longer bodies are truncated on Android; test on mobile before deploying
• Use "Notify me" at the product level for out-of-stock — this captures high-intent subscribers with context; generic sitewide opt-ins perform worse

Common Pitfalls

Related Skills

• @email-marketing-automation
• @cart-abandonment-recovery
• @sms-marketing
• @exit-intent-popups
• @customer-retention-engine

Push Notification Opt-In Flow and Flash Sale Broadcast

Problem/Feature Description

NorthShore Goods has the core push infrastructure running but is seeing very low opt-in rates from visitors. The product team believes the permission dialog is being shown too aggressively. Additionally, the marketing team wants to send a flash sale notification to all subscribers during a one-day sale event — but needs the delivery window to respect the sale's end time so customers don't receive a stale "sale is on" notification after it has ended.

Your task is to write two pieces of JavaScript/TypeScript:

1. A smart opt-in manager that decides when to show the browser push permission dialog. The team wants to avoid asking cold visitors and instead wait until customers have shown real engagement with the store. User preferences (whether they've subscribed or dismissed the prompt) must survive page refreshes.

2. A server-side broadcast function that sends a flash sale notification to all subscribers, cleans up any expired subscriptions discovered during the send, and ensures the notification is not delivered after the sale has ended.

Output Specification

Produce the following files:

1. client/push-optin.ts — Client-side TypeScript implementing the smart opt-in prompt. The function should track engagement state and only ask the user for permission at the right moment. It should also avoid showing the dialog again to users who have already subscribed or dismissed it.

2. server/broadcast-flash-sale.ts — Server-side TypeScript function broadcastFlashSale(saleDetails) that sends a flash sale push to all subscribers, with appropriate expiry handling. The function should accept at minimum: title, discountPct, endsAt (Date), and url.

3. DESIGN.md — A brief document explaining the opt-in strategy chosen and any important constraints or best practices that guided the implementation decisions (e.g., sending frequency limits, notification body length, etc.).

Server-Side Push Notification Handlers

Problem/Feature Description

NorthShore Goods has the push subscription infrastructure in place and now needs the server-side logic to complete two critical notification flows. First, the team needs an endpoint to receive and persistently store browser push subscriptions from customers. Second, they need the back-end logic that fires notifications to subscribed customers when a product they are waiting on comes back into stock.

The store runs a PostgreSQL-backed database with tables for pushSubscriptions, pushWaitlist, and products. The back-end is a TypeScript/Node.js API using Express. A webpush instance has already been configured with VAPID keys elsewhere and is available as an import. Your code should be production-quality and handle real-world edge cases gracefully.

Output Specification

Produce the following files:

1. api/push-subscribe.ts — The POST handler for /api/push/subscribe that saves a push subscription to the database. The handler should handle the case where a browser re-subscribes or the same user subscribes from multiple devices gracefully.

2. api/notify-back-in-stock.ts — The function notifyBackInStock(productId: string) that is triggered when a product's inventory transitions from 0 to greater than 0. It should look up the waitlisted subscribers and send each a push notification.

3. api/notify-price-drop.ts — The function checkPriceWatches(productId: string, newPriceCents: number) that fires notifications when a product's new price meets a customer's target price.

The files should use TypeScript and assume the db and webpush objects are available as imports. Include realistic pseudo-implementations of any db helper calls.

Push Notification Infrastructure Setup

Problem/Feature Description

You are a developer at a mid-sized e-commerce company called NorthShore Goods. The marketing team has just approved a new initiative to add browser push notifications to the store. Customers should be able to opt in and receive timely alerts. The engineering team has decided to implement this using the standard Web Push API with a Node.js/TypeScript backend.

Your job is to lay the foundational infrastructure: the server-side push configuration, the browser-side service worker that receives and displays notifications, and the client-side subscription code that registers users. The code should be production-ready — handling edge cases and browser compatibility checks appropriately.

Output Specification

Produce the following files:

1. server/push-config.ts — Server-side configuration code that initializes the push notification library using credentials from environment variables. Include a comment showing the CLI command used to generate the credentials.

2. public/sw.js — The service worker file that handles incoming push events and notification click interactions.

3. client/subscribe.ts — Client-side TypeScript that registers the service worker, requests notification permission, subscribes the browser to push, and sends the subscription to the server. Include any required helper functions.

4. README.md — A brief setup guide explaining the steps to initialize the system (key generation, environment variables, deployment notes), including any important platform limitations developers should be aware of.