The Ultimate Guide To Push Notifications For Developers — Smashing Magazine

Quick abstract ↬
What are the advantages of utilizing push notifications and what can you employ them for? In this text, Lee Munroe explains implement them and which practices are greatest to observe.

I’ve spent the previous a number of years constructing messaging instruments — for greater than three years now I’ve been main the design crew at OneSignal, a buyer engagement platform that permits builders and entrepreneurs to ship transactional and promotional messages by way of push, in-app, e-mail and SMS. I’ve discovered so much about how messaging works together with the professionals and cons of utilizing push to speak along with your viewers. In this submit, I’ll mind dump all of my data on the subject.

Introduction To Push

Push notifications are clickable messages that pop up in your telephone or desktop with some content material. Typical varieties of push notifications embody:

  • Promotional
    New weblog submit, new launch, a Black Friday sale, and so forth.
  • Transactional
    New message obtained, a good friend favored your remark, your driver is on their manner, appointment reminders, and so forth.

Push notifications had been initially launched in 2009 by Apple with APNs (Apple Push Notification service). Google rapidly adopted for Android (which later turned FCM) and in 2013 web push was launched for Chrome.

Personalized promotional notification from Yelp on iOS. (Large preview)A screenshot of Flatlife listed from Product Hunt on Firefox macOSNew standard product listed from Product Hunt on Firefox macOS. (Large preview)Breaking news alert from CNN on AndroidBreaking information alert from CNN on Android. (Large preview)

Push continues to be a comparatively new communication know-how in comparison with its siblings. The first e-mail was despatched in 1971 (50 years in the past!) and the primary SMS was despatched in 1992 (30 years in the past!). Marketers and builders are nonetheless discovering the place push matches into their communication stack, so whereas most firms have an e-mail technique for buyer engagement, most don’t have a push technique but.

A picture of the first SMSFirst SMS in December 1992. (Image credit score: Wion) (Large preview)

Push is similar to these different communication channels like e-mail. You use them to have interaction along with your clients. You can ship promotional or transactional content material. You want a manner for individuals to opt-in and opt-out. You must phase your audiences. You must personalize your messages. You must compose your message, ship your message, view reporting in your message, and so forth.

Why Use Push Notifications?

There are several benefits of push over other messaging channels:

  • Push typically sees higher engagement than email — 20% open rate vs 2%;
  • Push doesn’t require users to hand over any personal information like an email address or phone number;
  • Push is cheap to send (unlike SMS which is upwards of 2c per message);
  • Push is quick to send;
  • Push has a high opt-in rate (see more below).

What can you use push notifications for?

  • Abandoned cart
    Get users back to complete the checkout process.
  • Onboarding
    Welcome users to your app and get them up and running.
  • Announcements
    New features, updates, and upcoming events.
  • Offers
    Discounts and rewards.
  • Rewards & delight
    Make users feel good with rewarding progress in a game.
  • Live updates
    News, scores, order status.

More after soar! Continue studying under ↓Feature Panel

How To Implement Push Notifications

You can construct your individual push service on prime of the totally different APIs and working system platforms obtainable. iOS has APNs. Google has FCM. Web browsers use Service Workers, Notification API and the Push API. When constructing your individual it’s essential to think about the push service, managing subscribers, permission prompts, message composition, supply and reporting.

Beginners guide to web push notifications using service workersBeginners information to web push notifications utilizing service employees. (Large preview)

Unless you’re an enormous firm with a full crew of engineers you possibly can dedicate to sustaining such a service, it is best to simply use a push service that exists. Just such as you’re unlikely to construct your individual inside e-mail service, the identical applies to push.

As push APIs are up to date with every new iOS or Android launch, it is sensible to let a service supplier do the heavy lifting right here so that you’re not left sustaining that system. There are companies that supply easy-to-use UIs, SDKs and APIs. Some of the perfect push notification suppliers for builders and entrepreneurs embody:

Aren’t Push Notifications Annoying?

They completely might be, sure. Just like sending irrelevant emails or too many textual content messages is annoying and spam. This isn’t a fault of the know-how itself, however we as website house owners and app builders abusing their energy.

For instance, a whole lot of web sites or apps instantly immediate customers to subscribe to push. This is simply as irritating as a weblog you land on instantly surfacing a pop-up asking you to subscribe to their e-mail publication. At this level, you haven’t any concept what they do or if there’s worth in subscribing.

An example of a website which immediately prompts users to subscribe to push and to their email newsletterMost web sites in 2022. (Large preview)An example of native prompt on macOS ChromeAn instance of native immediate on macOS Chrome. (Large preview)

Don’t do that. Treat your app customers and website guests with respect. In reality, browsers have began clamping down on web sites that do that, and as an alternative disguise the immediate till the consumer notices it and clicks on it.

Example of prompt blocked on macOS ChromeExample of immediate blocked on macOS Chrome. (Large preview)

Prompting Best Practices

Permission opt-ins differ throughout working programs:

  • iOS
    Users should explicitly opt-in for push once they obtain your app, the common opt-in charge is 36%.
  • Android
    Users are robotically opted in to obtain push notifications, the common opt-in charge is 42%.
  • Web push
    Users should explicitly opt-in for push once they go to your website, the common opt-in charge is 17%.

Only immediate customers to subscribe after they’ve had a possibility to seek out worth e.g. after at the very least 1 pageview, or after they’ve taken an motion the place it might be helpful for them to know when there’s an replace.

Soft prompts for Washington Post, Amazon Kindle, TwitterSoft prompts for Washington Post, Amazon Kindle, Twitter. (Large preview)

Use gentle prompts. You solely have one alternative to ask customers with the native immediate, after which it’s painful to ask them to enter settings and let you ship them messages. Use your one alternative correctly.

Example of soft prompt from Slack that triggers the browser native promptExample of sentimental immediate from Slack that triggers the browser native immediate. (Large preview)

Prompting Mistakes

“Push notifications became yet another way to artificially re-engage users and force content down their throat. That’s why so many of them hate it. But there are some interesting use cases for it.”

— The Ultimate Guide to Not F#!@ing Up Push Notifications, Stéphanie Walter

Asking For Permission Immediately

A screenshot where ‘app’ asks to send notificationsAsking to ship notifications instantly. No, thanks. (Large preview)

Don’t do that. Allow customers to expertise your app or website first and the worth you present. Delay your immediate at the very least a pageview or by a while so customers have a possibility to go searching. Or wait till the consumer is taking motion after which current them with an choice to subscribe.

Not Telling Users What Notifications Will Contain

Make users aware of the value of your push notifications. Will they notify me of new sales and promotions? When someone sends me a message? When there’s a new blog post? Make it clear so users can decide if these are the types of messages they want to receive.

Don’t Make It Hard To Opt-out

Allow users to edit their notification preferences within the app. Just like an email preference center, users may want to unsubscribe from all notifications or a certain category of notification e.g. stop sending me every blog update but do send me new feature announcements.

Don’t Send Too Many Notifications

Set expectations upfront on how usually you count on to ship notifications. Then keep on with that. Depending on what trade you’re on this could possibly be many per day e.g. breaking information alerts, or as soon as per week e.g. meditation app.

NYTimes allows users to customize their notification preferencesNYTimes permits customers to customise their notification preferences. (Large preview)

Where Are Push Notifications Supported?

Supported

  • ✅ iOS native apps,
  • ✅ Android native apps,
  • ✅ macOS Chrome/Firefox/Safari,
  • ✅ Windows Chrome/Firefox/Edge,
  • ✅ Android Chrome/web browsers,
  • ✅ macOS native apps,
  • ✅ Windows native apps.

Not supported

  • 🚫 Safari on iOS does not support notifications.
  • 🚫 All other iOS browsers like Chrome and Firefox for iOS do not support notifications.
  • 🚫 Push notifications do not work in incognito or private browser mode.

See the state of push notification support for a more detailed and up-to-date look at all devices like watchOS, Amazon Echo, TVs and others.

Anatomy Of A Web Push Notification

The anatomy and design of push notifications change across operating systems and browsers. For the most part, the key elements are:

  • title,
  • message,
  • icon,
  • image.

Here are examples for the main operating systems and browsers:

Web Push, Chrome For macOS Monterey

A screenshot of web push, Chrome for macOS Monterey(Large preview)

  1. Browser Icon
    Chrome icon. This can’t be modified.
  2. Title
    Restricted to 60-80 characters.
  3. Domain
    Website consumer is subscribed to. Can’t be modified.
  4. Icon
    192×192 or bigger. PNG, JPG, GIF (not animated). Enlarges when expanded.
  5. Content
    Restricted to 120-150 characters.
  6. Action Buttons
    Supports as much as 2 buttons.

Web Push, Chrome For Windows 11

A screenshot of web push, Chrome for Windows 11(Large preview)

  1. Banner Image
    360×180 or 2:1 facet ratio. PNG, JPG, GIF (not animated).
  2. Browser + Browser Icon
    Can’t be modified.
  3. Icon
    192×192 or bigger. PNG, JPG, GIF (not animated).
  4. Action Buttons
    Supports as much as 2 buttons.
  5. More Options
    Includes notification settings and focus help.
  6. Dismiss
    Closes the notification.
  7. Title
    Restricted to 60 characters.
  8. Content
    Restricted to 120 characters.
  9. Domain
    Website consumer is subscribed to. Can’t be modified.

Mobile Push For Android 12

A screenshot of mobile push for Android 12(Large preview)

  1. Small Icon
    24×24 – 96×96 to suit all machine sizes. Must be white with a clear background. PNG.
  2. Title
    Restricted to 50 characters.
  3. Body
    Restricted to 150 characters.
  4. Large Picture
    1440×720 or 2:1 facet ratio. PNG, JPG, GIF (not animated).
  5. App Name
    Can’t be modified.
  6. Time Stamp
    Time message obtained.
  7. Icon
    192×192 or bigger. PNG, JPG, GIF (not animated).
  8. Action Buttons
    Supports as much as 3 buttons.

Mobile Push For iOS 15

A screenshot of mobile push for iOS 15(Large preview)

  1. App Icon
    Uses the app’s default icon and may’t be modified.
  2. Rich Media
    1024×1024 or 1:1 facet ratio. PNG, JPG, GIF, MP4, MP3, WAV.
  3. Title
    Restricted to 25-50 characters.
  4. Time Stamp
    When the message was obtained.
  5. Message
    Restricted to 150 characters.
  6. Action Buttons
    Supports as much as 4 buttons.

Note: For extra examples throughout every machine and working system, see push notification anatomy.

Sending Best Practices

Don’t simply carelessly blast push notifications to all of your subscribers. Consider who your customers are, their context, and the worth they are going to get out of your content material and service.

A screenshot of a promotional notification with emoji and photo from Joe CoffeePromotional notification with emoji and picture from Joe Coffee. (Large preview)Concise transactional notification from PayPalConcise transactional notification from PayPal. (Large preview)

  • Messages needs to be well timed, related, and exact.
  • Use emojis, they have a tendency to assist CTR.
  • Make certain your content material is beneficial.
  • Personalize, use the subscriber’s title or one thing related to them.
  • Use urgency and fomo to assist improve CTRs on issues like gross sales.
  • A/B take a look at to see what content material and pictures carry out higher.
  • Segment primarily based on consumer habits or preferences e.g. geographic location, degree of engagement.
  • Schedule per consumer’s timezone, be certain they don’t obtain messages in the midst of the evening.
  • Keep the content material brief and concise, and get to the purpose.

Analytics and ROI

Numbers you want to keep an eye on:

  • Opt-in rate
    Percentage of users or visitors that are opting in to push, adjust your message, or when you are promoting to improve this.
  • Deliverability
    How many messages actually got delivered to user devices.
  • Open rate
    The number of messages that were clicked divided by the messages sent.
  • Outcome/goal/conversion
    What was the end goal, e.g. a purchase or plan upgrade? Opt-in rates and open rates are often considered vanity metrics, what you really care about is did they produce an outcome.

For web push, use UTMs to help track attribution. For mobile push, services like AppsFlyer and Branch can help with attribution tracking.

Why Am I or My Users Not Receiving Push Notifications?

Here are some of the most common reasons I’ve seen.

Users Haven’t Subscribed To Your App

Ask them to subscribe. Check that they are subscribed. Look up their user’s ID you’ve defined or push token.

Users Have Turned Off Notifications For Your App Or Website

Ask customers to verify their app settings or browser settings and guarantee they haven’t blocked you.

A screenshot where notifications from AliExpress are on(Large preview)A screenshot of Chrome settings where notifications are on(Large preview)

Users Have Turned Off Notifications For The Browser They Are Using

Or they by no means gave it (the browser) permission within the first place. Operating programs will ask customers permission to ship notifications by way of their browsers, and infrequently customers will ignore these. Ask them to verify their app degree notification settings of their OS.

A screenshot where notifications for Firefox are turned on(Large preview)

Users Have Turned Off Notifications For The OS They Are Using

Some customers will flip off all notifications for his or her OS, deliberately or by accident. Check their OS settings for notifications. For instance, Settings > Notifications > Show Previews > Never will flip off all iOS notifications.

A screenshot with settings 'show previews when unlocked'(Large preview)

Check settings at your OS degree, browser degree, and app degree to make sure notifications are turned on and also you or they’ve opted in.

The Future of Push Notifications

iOS Support For Web Push

Web push for iOS Safari has been in excessive demand for years and just lately it appears like they is likely to be prepared to offer in with a current replace to WebEquipment. This will probably be large if Apple has determined to lastly allow this.

A screenshot with Experimental WebKit Features(Large preview)

Android Opt-In

Starting with Android 13, customers must opt-in to obtain notifications. This will probably affect these opt-in charges I shared beforehand as Android begins to maneuver in the direction of the iOS numbers.

Android opt-in(Large preview)

Omnichannel Messaging

Omnichannel and extra integration alongside different messaging channels. Every consumer has a desire for a way they obtain messages, and it is very important think about this when personalizing that buyer journey with push, e-mail, SMS.

A graph of omnichannel messaging(Large preview)

In 2022 it’s much more necessary to contemplate your consumer’s habits throughout all these channels, making certain you automate your messaging and lengthen your attain throughout all channels.

Preventing Abuse

Browsers and operating systems are working hard to prevent abuse e.g. making sure websites don’t show prompts immediately to visitors. As mentioned previously, some updates have already been shipped here recently with Chrome, Firefox and Edge to hide prompts on websites that are immediately prompting on page load, and there is sure to be more to follow.

Firefox hides the native prompt behind a wiggling speech bubble.

Conclusion

If you run a website or app today and you’re not sending push notifications, you should add it. If you’re already sending email, SMS or in-app, you should add push to your stack. As long as you make sure the content is valuable and follow the best practices above, it’s an opportunity for you to re-engage and your users will be grateful.

Useful Resources

Smashing Editorial
(vf, yk, il)

Leave a Reply

Your email address will not be published. Required fields are marked *