Skip to main content

Progressify PWA: Push Notifications for Better Messages

· 3 min read
Andrij Tkachenko
Creator of Better Messages

Progressify turns a WordPress site into a Progressive Web App — installable to the home screen, capable of offline-aware browsing, and able to send web push notifications even on iOS Safari (where standard web push has long been limited). Better Messages auto-detects Progressify and routes private-message push notifications through it, so members who installed your PWA see new-message notifications the same way they see any other PWA notification.

Progressify settings inside Better Messages Notifications

What the Progressify integration does​

When Progressify is detected and configured:

  • Better Messages auto-enables Progressify push notifications — visible under Better Messages → Settings → Notifications.
  • Per-message pushes are dispatched to PWA-installed users when a new private message arrives in a thread they participate in.
  • Subscription routing uses Progressify's own subscription store — no separate setup, no separate database.
  • iOS PWA push works — Progressify uses the modern Web Push protocol that iOS Safari now supports (when the site is installed as a PWA).

Progressify-powered PWA on WordPress

Requires the WebSocket version​

The Progressify integration runs on the WebSocket version of Better Messages. The reason: the WebSocket relay is what dispatches per-thread events, and Progressify pushes are fired off that fan-out.

Installation​

  1. Install Progressify and configure your PWA settings (manifest, icons, theme color, install prompt, push notifications).
  2. Install Better Messages from WordPress.org (with the WebSocket license) and activate it.
  3. Open Better Messages → Settings → Notifications — the Progressify section appears automatically.

That is the entire setup. There is no separate config in Progressify.

Bottom-menu overlap fix​

If you use Progressify's bottom navigation menu, it can overlap the Better Messages reply area on mobile. Add this CSS in WP Admin → Appearance → Customize → Additional CSS (or via the better_messages_css_customizations filter):

.bp-messages-chat-wrap.bp-messages-mobile,
.bp-messages-single-thread-wrap.bp-messages-mobile,
.bp-messages-wrap-group.bp-messages-mobile,
.bp-messages-wrap-main.bp-messages-mobile {
    bottom: 58px !important;
}

Frequently asked questions​

Does this work on iOS?​

Yes — Progressify uses Apple's modern Web Push protocol (iOS 16.4+). When a user installs the PWA to their home screen and grants push permission, they receive Better Messages notifications natively.

What about users who have not installed the PWA?​

They do not receive Progressify push notifications — push is opt-in via PWA install. Better Messages falls back to email notifications and the in-site unread badge for non-installed users. For broader web push coverage, combine with OneSignal (the two coexist).

Will the integration conflict with Progressify's own post-notification pushes?​

No — Progressify's standard new-post notifications and Better Messages' new-message notifications are dispatched separately to the same subscriber list. A user who subscribed via Progressify gets both kinds of notifications.

Does this work alongside OneSignal?​

Yes — Better Messages supports multiple push backends simultaneously. Run Progressify for PWA / iOS coverage, OneSignal for standard desktop web push.

Can I customise the push notification body?​

Better Messages dispatches a default body of "New message from [sender]" with a deep link back to the thread. The body is filterable in PHP for custom branding or content.

See also​

Install Better Messages from WordPress.org →