Overcoming Challenges with Web Push Notifications in Next.js: Ensuring Your Alerts Don’t End Up in Spam

Implementing effective push notifications is a crucial aspect of engaging users on your social media platform. Recently, a developer shared their journey of building a push notification system using Next.js and Ably, a popular real-time messaging service. While the setup was successful and initial tests showed promise, an unexpected issue arose: notifications were being treated as spam and not displaying as intended.

The Context

Since Next.js is a server-side rendering framework, traditional WebSocket solutions are not always feasible. To navigate this, the developer opted for Ably’s push notification API. The implementation largely went smoothly, with most notifications triggering correctly and the system functioning as expected during testing.

The Challenge

Despite correctly configuring the notification payload with parameters like icon, badge, time-to-live (TTL), tags, collapse keys, and specifying options such as renotify:true and silent:false, the notifications still appeared as spam on devices. Additionally, the notifications failed to wake the device, show the app logo instead of the default Chrome icon, or group together based on tags.

Goals for a Better Notification Experience

• Device Wake-up: Ensure notifications prompt the device to wake up for user attention.
• Visibility & Branding: Display notifications prominently with the app’s logo rather than generic icons.
• Grouping & Deduplication: Use tags or collapse keys to prevent multiple notifications from cluttering the notification tray.
• Interactive Actions: Incorporate actionable options such as “Like” or “Reply” to enhance user interaction directly from the notification.

Addressing Spam Filtering & Enhancing Notification Delivery

Weak or misconfigured notifications can often be flagged as spam by browsers or operating systems. To improve deliverability:

• Use a Recognizable Sender: Always include consistent and recognizable icons and sender information.
• Follow Proven Payload Structures: Use recommended parameters and payload formats specified in Web Push API documentation.
• Engage with Users: Encourage users to interact with notifications, which signals that your notifications are legitimate.
• Respect User Preferences: Provide options to opt-out or customize notifications to reduce spam suspicion.

Enhancing Notification Functionality

To embed actions like “Like” or “Reply,” implement the actions property within your push payload. This allows notifications to feature buttons that users can tap directly, streamlining engagement.

Final Thoughts

Building a robust push notification system requires careful attention