How to Set Up Push Notifications in PWA: Step-by-Step Guide

Push notifications are one of the most effective tools for boosting conversion in traffic arbitrage. In PWAs, they work just as powerfully as in native apps, but are much easier to set up.

In this step-by-step guide, we'll walk you through how to set up push notifications in PWA, which tools to use, how to create effective campaigns, and how to analyze results.

Step 1: Understanding Push Notification Technology in PWA

Push notifications in PWAs work based on three key technologies:

• Push API — protocol for receiving push messages from the server
• Service Worker — background script that handles notifications even when the app is closed
• Notification API — displaying notifications on the user's device

When you send a push notification, it passes through a Push Service (e.g., Firebase Cloud Messaging), which delivers it to the user's device. The Service Worker receives the event and shows the notification via the Notification API.

Step 2: Choosing a Push Notification Tool

There are several popular services for PWA push notifications:

Service	Cost	Features
PWA-X (built-in)	Free	1-minute setup, automatic segmentation
Firebase Cloud Messaging	Free (up to 10M messages)	Powerful analytics, A/B testing
OneSignal	Free (up to 10K subscribers)	Ready templates, automation
Pusher Beams	From $49/month	Enterprise solution, guaranteed delivery

For beginners, we recommend PWA-X (built-in push support) or OneSignal (simple interface).

Step 3: Setting Up Push Notifications on PWA-X

If you created a PWA on PWA-X, setting up push notifications takes less than a minute:

1. Log in to the PWA-X admin panel at https://app.pwa-x.com
2. Select your PWA from the app list
3. Go to the "Push Notifications" section in settings
4. Activate the "Enable Push Notifications" option
5. Customize the notification appearance (icon, color, text)
6. Save changes — the Service Worker will update automatically

After this, your PWA will start requesting permission to send notifications on first visit.

Step 4: Manual Setup (Without PWA-X)

If you're creating a PWA manually, here's the basic structure for push notifications:

1. Create VAPID Keys

VAPID (Voluntary Application Server Identification) is required to identify your server. Generate a key pair (public and private) via:

npx web-push generate-vapid-keys

2. Add a Service Worker (sw.js)

The Service Worker handles push events. Minimum code:

self.addEventListener('push', event => { const data = event.data.json(); self.registration.showNotification(data.title, { body: data.body, icon: '/icon.png' }); });

3. Request Permission from Client

Use the Push API to subscribe the user. After receiving the PushSubscription object, save it to the server.

4. Send Notifications from Server

Use the web-push library for Node.js or equivalent for your programming language.

A full technical guide is beyond the scope of this article, but all necessary code examples are available in MDN documentation.

Step 5: Creating Effective Push Campaigns

Just setting up push isn't enough — you need to create the right campaigns. Here are 5 types of push notifications that work best for media buying:

1. Welcome Notifications

Send 30-60 minutes after the first visit. "Hi! We've prepared a special offer for you..." — 15-25% conversion.

2. Abandoned Action Notifications

If a user didn't complete the target action, remind them after 2-4 hours. "You didn't complete registration. Get a bonus for finishing!" — up to 50% open rate.

3. Promotional Offers

Time-limited offers. "Today only — double bonus! Hurry!" — creates urgency.

4. Personalized Recommendations

Based on user behavior. "You might like..." — increases relevance and conversion.

5. Reactivation Campaigns

For users who haven't visited in 7+ days. "We missed you! Here's an exclusive offer..." — brings back up to 15% of inactive users.

Step 6: Optimal Timing and Frequency

The right time to send push notifications critically impacts effectiveness:

Time	Open Rate	Recommendation
08:00 - 10:00 (morning)	50-60%	Best time for push
12:00 - 14:00 (lunch)	40-50%	Good for promotions
18:00 - 21:00 (evening)	35-45%	Suitable for entertainment content
23:00 - 07:00 (night)	15-25%	Avoid — low open rate, high unsubscribe

Golden rule: Don't send more than 2-3 notifications per day per user. Too many notifications lead to unsubscribes (unsubscribe rate increases by 40% with 5+ notifications per day).

Step 7: Analyzing Effectiveness

To make your push campaigns effective, track these key metrics:

• Open Rate (OR) — % of users who opened the notification. Target: 40%+
• Click-Through Rate (CTR) — % of users who clicked the notification. Target: 10%+
• Conversion Rate (CR) — % of users who completed the target action after clicking. Target: 5%+
• Unsubscribe Rate — % of users who unsubscribed. Normal: under 2% per month
• Opt-in Rate — % of new visitors who agreed to push. Target: 30%+

On PWA-X, you can track all these metrics in the built-in analytics. Integration with GA4 is also available for more detailed analysis.

Step 8: A/B Testing Push Notifications

Never send the same notifications to all users. Use A/B testing to find the most effective variants:

• Text: try different headline and description variants
• CTA: "Get Bonus" vs "Learn More"
• Time: morning vs evening
• Emoji: with emoji and without
• Images: different icons and large images in notifications

Run A/B tests on 10-20% of your audience, determine the winner, and scale to the full base.

Conclusion

Push notifications are a must-have tool for any media buyer using PWA. They allow you to:

• Bring back up to 60% of users who would otherwise leave forever
• Increase user LTV by 2-3x
• Automate marketing campaigns
• Get a steady stream of repeat conversions

Set up push notifications on PWA-X in 1 minute and start earning more today. If you're just starting out, read our guide to creating a PWA in 5 minutes.