How To Set Up iOS Web Push Notifications

Web push notifications make it possible to reach your audience without designing a labor-intensive iOS app. It’s never been more critical to reach your audience at the right moment, and web push notifications give you a direct way to do just that.

iOS web push notifications are great for all kinds of customer communications, whether that’s promoting eCommerce sales, pushing out the latest news, or alerting customers about potential outages.

It’s much easier to set up web push notifications than to build a native app, but it still requires some technical know-how. Check out this guide to understand the basics of iOS web push notifications and how to set them up on your own website.

In this article:

• Understanding iOS Web Push Notifications
• Step-by-Step Guide to Setting Up iOS Web Push Notifications
• Powering Up Your Engagement with iOS Web Push Notifications
• Frequently Asked Questions

Understanding iOS Web Push Notifications

Web push notifications allow websites to send real-time updates to users, even when they aren’t on your website. This technology leverages the push notification system commonly associated with mobile apps, bringing it to the web for a more seamless user experience. Best of all, there’s no need to create an iOS mobile app to enjoy the benefits of web push notifications, giving you the best of both worlds.

Non-iOS push notifications rely on service workers, push APIs, and notification APIs to send messages, while iOS web push notifications use Apple Push Notification Services (APNs). An APN handles the delivery of push notifications on iOS through unique iOS device tokens.

Apple allows for some customization of notifications, too. You’re free to customize the look and text of the notification, including the title, body, icon, and action buttons.

Step-by-Step Guide to Setting Up iOS Web Push Notifications

Setting up iOS web push notifications may seem complex at first, but you’ll have them up and running on your website in no time with the right tools and process.

1. Pick a Push Notification Service

First, choose a service like MagicBell to start sending notifications. It’s as easy as signing up for an account, installing the SDK on your website, and configuring notification settings within the MagicBell dashboard. With MagicBell, you can send notifications to all major browsers, including Chrome, Firefox, and Safari.

2. Integrate with the APN

Instead of using a service worker, you need to integrate your website with an Apple Push Notification Service. This requires setting up server communication and getting an authentication token from Apple:

1. Create an Apple Developer Account.
2. Go to the Apple Developer Portal > Certificates, Identifiers & Profiles > Add an Identifier. Be sure to enable Push Notifications while creating the identifier.
3. Generate an authentication key in Certificates, Identifiers & Profiles. Download the key and store it somewhere safe — you won’t be able to download it again.

With the authentication key in hand, it’s time to configure your server to work with the APN. You need the authentication token and device token provided by Apple to set this up. Your server will use this information to create a JSON payload that looks like this:

{
  "aps": {
    "alert": {
      "title": "Hello!",
      "body": "You have a new message."
    },
    "badge": 1,
    "sound": "default"
  }
}

From there, the server sends the payload to the APN with your device token.

3. Ask for Permission

Always ask for explicit permission before sending push notifications. Instead of bombarding users with a “Do you want notifications?” message right when they land on your site, wait until they engage with your content first.

Once the user interacts with your custom prompt, trigger the browser’s permission request. That should look something like this:

Notification.requestPermission().then(function(permission) {
    if (permission === 'granted') {
        console.log('Notification permission granted.');
    } else {
        console.log('Notification permission denied.');
    }
});

4. Personalize and Test

At this point, you’ve created the infrastructure for sending notifications. Here’s the fun part! Create the content for your notification, including the title, message, icon, and any actions you want users to take. Keep in mind that Apple still limits customization and doesn’t support rich media or different notification styles.

As always, check your notifications before going live. You can test iOS web push notifications using Xcode and your Apple developer account. Use webpushtest.com to demo standards-based web push notifications for all Apple devices to avoid issues down the line.

Powering Up Engagement with iOS Web Push Notifications

Web push notifications give users the immediacy of a native app without downloading yet another app. Businesses also benefit from iOS web push notifications because there’s no need to create a pricey native app. They’re incredibly beneficial, but setting up these notifications requires technical skill.

Whether you’re a total newbie or a notification pro, MagicBell simplifies the notification experience. Lean on our platform to build an all-in-one notification inbox across all channels — including email, Slack, and more. Create a MagicBell account now to start sending push notifications today.

Frequently Asked Questions

What happens if a user clears their browser cache or deletes cookies?

Clearing a browser cache or cookies can affect a user’s subscription to web push notifications, especially if they remove the service worker. However, this depends on how your website handles push notifications. Every solution is different, so check to see if your push notification service requires prompting users to resubscribe.

Can users disable iOS push notifications?

Absolutely. Not only is this a best practice for user experience, but it’s also the law. Like email and SMS messages, users must have complete control over their iOS web push notification subscriptions. They can unsubscribe anytime by adjusting their browser settings or interacting with the notification, which might include an "unsubscribe" option.

Are there any limitations on the size or content of a web push notification?

Yes. Most browsers limit the title to 50 to 100 characters and the message body to up to 250 characters. Generally, you can only attach a single image to notifications and can’t include interactive features, like videos, in the message directly.