Skip to content

Safari Mobile Web Push (iOS and iPadOS)

Safari v16.4 supports mobile web push, which means you can now re-engage mobile users with push notifications on iOS and iPadOS.

This article will guide you through the steps required to set up mobile push for safari.

Integration steps

First, read and follow our standard web push integration guide. The following steps are only required to support web push on Safari 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

Unlike major browsers like Chrome and Firefox, you are not allowed to request push permission on Safari iOS/iPadOS unless your website has been added to the user’s home screen.

The Add to Homescreen feature 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

Once 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.

HOW HELPFUL WAS THIS PAGE?
New Stuff!