Web Push Notifications with OneSignal

Description

Push notifications are clickable messages that pop up on your phone or desktop with some content. Typical types of push notifications include promotional info such as a new blog post, new release, a Black Friday sale, etc. or tranansactional info such as new message received, a friend liked your comment, your driver is on their way, appointment reminders, etc.

Discussion

Alpha Anywhere includes support for web push notifications through an integration with OneSignal. Web push notifications are supported by most desktop and mobile browsers.

OneSignal is a unified messaging service that supports web push, email and SMS notifications.

Benefits of using OneSignal Push Notifications

  • Enhanced User Engagement and Retention

    OneSignal push notifications significantly improve message visibility, helping apps and websites stay top-of-mind for users. This leads to increased user retention and engagement, as notifications can re-engage inactive users and keep them informed about important updates, offers, or content.

    Case studies show dramatic results, such as a 140% increase in paid user reactivation after implementing OneSignal.

  • Boosted Conversions and Revenue

    Push notifications are proven to drive conversions by prompting users to take desired actions, such as making a purchase or returning to the app. OneSignal is widely adopted for its effectiveness in increasing conversions and fostering user loyalty.

  • Advanced Personalization and Targeting

    OneSignal offers robust segmentation tools, allowing businesses to send highly relevant and personalized notifications based on user behavior, demographics, location, and engagement patterns. Targeted notifications achieve a 21% higher click-through rate (CTR) compared to generic messages.

    Features like Data Tags and A/B testing further enhance campaign performance, with Data Tags boosting CTR by 58% and A/B testing improving CTR by 8%[6].

  • Omnichannel Communication

    OneSignal supports multiple messaging channels, including mobile and web push notifications, in-app messaging, SMS, and email. This comprehensive approach enables business to reach users on their preferred platforms and devices, streamlining communication strategies.

  • Automation and Workflow Efficiency

    The platform provides automation features, enabling businesses to trigger notifications based on user actions, time-based events, or custom workflows. This saves time, reduces manual effort, and ensures timely delivery of relevant messages.

  • User-Friendly and Developer-Friendly

    OneSignal is recognized for its intuitive interface, easy setup, and simple API, making it accessible for both marketers and developers. It integrates seamlessly with popular platforms and supports various tech stacks, allowing for quick implementation and customization.

  • Reliable and Scalable Delivery

    With nearly 100% uptime and the ability to handle billions of messages daily, OneSignal ensures reliable and timely notification delivery, which is critical for time-sensitive content and large-scale operations.

  • Comprehensive Analytics and Insights

    OneSignal provides detailed analytics to track campaign performance, user engagement, and message effectiveness. These insights help businesses continuously optimize their notification strategies for better results.

  • Cost-Effective Solution

    The platform offers reasonable pricing and free account options, delivering great value for businesses of all sizes by combining a wide range of features with affordability.

  • Strong Customer Support

    Users consistently praise OneSignal's responsive and helpful customer support, which assists with onboarding, troubleshooting, and maximizing the platform's capabilities.

In summary, OneSignal push notifications offer a powerful, flexible, and scalable solution for engaging users, driving conversions, and managing omnichannel communication with advanced targeting, automation, and analytics—all in a user-friendly and cost-effective package.

Creating an app in OneSignal

If you prefer to watch a step by step video on this topic see: OneSignal Signal Web Push Integration

Head over to the OneSignal website to setup a free account.

OneSignal Website

Click the Get Started Now button.

Once you have setup your account click on the New App button from your organizations dashboard.

One Signal Dash1

Next, fill in your the name you want to use as your OneSignal app name and select your organization, then select Web for the first messaging channel.

One Signal Dash2

On the Site Setup dialog enter your site name. OneSignal requires the production site url to use the https:// protocol however for testing your app with Alpha's local development server you can enter http://localhost(:port if other than 80). This makes it simple to test your app with OneSignal. Be sure to enable "Treat HTTP localhost as HTTPS for testing" as shown. You can also upload a default icon for the push notifications. The recommended size is 256 x 256px.

One Signal Dash3

Setup your push notification prompt.

Setup One Signal Permission Prompt

From the Advanced Push Settings dialog, you need to enable "Customize service worker paths and filenames" to customize the location of the OneSignal service worker as required by the Alpha OneSignal integration.

Be sure to define the Path to service worker files and Main service worker filename, Updater service worker filename and the Service worker registration scope as depicted below. You can also moidify the behavior when the user clicks on the push notification message.

You do NOT need to download the OneSignal SDK files. The required SDK file will be automatically loaded by the Alpha app builder if the project is configured to use OneSignal.

One Signal Dash4

You do NOT need to add any code to the site but you do need the app id. Copy the app id to the clipboard.

One Signal Dash5

Next, from within the Alpha Anywhere Web Control panel, paste the app id from the clipboard to the Web Project Properties dialog as shown below.

One Signal Dash6

Your app should now be properly configured to test with OneSignal.

Testing with an Alpha Component

You can now test the OneSignal push integration by opening a component in LivePreview and after 10 seconds, you should see the OneSignal notification prompt that you previously configured.

One Signal Notification Prompt

The OneSignal notification prompt will be followed by the browsers native authorization prompt. Once you have allowed notifications, you will see the welcome notification in the lower right corner of your screen.

Browser Prompt
Thanks For Subscribing

Resetting App Permissions

Sending Out Your First Push Notification

For a full playlist of videos covering the Alpha Anywhere / OneSignal integration see: OneSignal Signal Web Push Playlist

Limitations

Web, Mobile Web and Progressive Web Applications Only