Skip to content

Mobile web push (iOS and iPadOS)

This article guides you through the steps required to set up mobile push, which allows you to re-engage mobile users with push notifications on iOS and iPadOS.

Integration steps

First, read and follow our standard web push integration guide. The following steps are only required to support web push for iOS and iPadOS support.

Step 1: Create a manifest file

A Web Application Manifest is a JSON file that controls how your website is presented when installed to a user’s home screen.

For example, you can set the background theme color and icon that the App Switcher uses, whether it renders as full screen to resemble a native app, or whether the app should open in landscape or portrait mode.

Create a new manifest.json file in your website’s root directory, with the following mandatory fields.

1
2
3
4
5
6
7
8
9

{
  "name": "your app name",
  "short_name": "your app name",
  "display": "fullscreen",
  "icons": [{
    "src": "favicon.ico",
    "sizes": "128x128",
  }]
}

The full list of supported fields can be found here.

Add the following <link> tag to your website’s <head> element pointing to where your manifest file is hosted.

1

<link rel="manifest" href="/manifest.json" />

Step 3: Add a service worker

Your website must have a service worker file that imports the Braze service-worker library, as described in our web push integration guide.

Step 4: Add to home screen

Popular browsers (such as Safari, Chrome, FireFox, and Edge) all support web push notifications in their later versions. To request push permission on iOS or iPadOS, your website must be added to the user’s home screen by selecting Share To > Add to Home Screen. Add to Homescreen lets users bookmark your website, adding your icon to their valuable home screen real estate.

An iPhone showing options to bookmark a website and save to the home screen

Step 5: Show the native push prompt

After the app has been added to your home screen you can now request push permission when the user takes an action (such as clicking a button). This can be done using the requestPushPermission method, or with a no-code push primer in-app message.

A push prompt asking to "allow" or "don't allow" Notifications

For example:

1
2
3
4
5
6
7
8
9

import { requestPushPermission } from "@braze/web-sdk";

button.onclick = function(){
    requestPushPermission(() => {
        console.log(`User accepted push prompt`);
    }, (temporary) => {
        console.log(`User ${temporary ? "temporarily dismissed" : "permanently denied"} push prompt`);
    });
};

Next steps

Next, send yourself a test message to validate the integration. After your integration is complete, you can use our no-code push primer messages to optimize your push opt-in rates.

Github   Edit this page on GitHub
HOW HELPFUL WAS THIS PAGE?
New Stuff!