# Mobile Web Push for iOS

Web Push notifications are a powerful tool for engaging users and driving traffic to a website or platform. With the introduction of iOS and iPadOS 16.4+, marketers can now leverage web push notifications on these devices. This allows for a wider reach and enhanced user engagement through web apps added to a user's home screen.

{% hint style="success" %}
Before implementing Mobile Web Push for iOS, ensure that the **Web SDK Setup** is completed.
{% endhint %}

<figure><img src="https://2578508252-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0bOAscrXzPSujyzq8DEz%2Fuploads%2FQPVc84xOmEwQpJU5tLDM%2Fwhat-is-new-07%20(2).png?alt=media&#x26;token=d6f3c486-c465-4e08-96b2-3605ca34c42c" alt=""><figcaption></figcaption></figure>

### Step 1: Web Application Manifest File

To make your website installable with its own icon and full-screen immersive experience, you must include a **Web Application Manifest** file. This JSON file defines how the website appears when added to a user’s home screen.

#### Requirements for `manifest.json`:

* The file must be included in your project.
* The `display` property should be set to `standalone`.
* In some projects, `manifest.json` is automatically generated; if not, it must be manually added.
* If a different value is set for `display`, update it to `standalone`.

**Example `manifest.json`**

```json
{
  "short_name": "Netmera App",
  "name": "Create Netmera App Sample",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    },
    {
      "src": "logo192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "logo512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}
```

<figure><img src="https://2578508252-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0bOAscrXzPSujyzq8DEz%2Fuploads%2FY11ot9hzNvK03hfELzMA%2Fimage.png?alt=media&#x26;token=f06634a2-849d-49f7-9bb1-a6adf025a91d" alt=""><figcaption></figcaption></figure>

### Testing Configuration

To test your website’s web push capabilities:

1. Open your website in Safari on an iOS/iPadOS 16.4+ device.
2. Click the **Share** button.
3. Select **Add to Home Screen**.
4. Once added, open the app from the home screen to verify that the permission prompt is enabled.

### Step 2: Users Add Your Website to Their Home Screens

For users to receive web push notifications, they must first add your website to their home screens.

#### User Steps:

1. Open the website on an iOS/iPadOS 16.4+ device.
2. Click the **Share** button.
3. Select **Add to Home Screen**.
4. Save the app on the device home screen.
5. Open the app from the home screen.
6. Subscribe to notifications via the **Fancy Box**.
7. The native permission prompt should appear when the subscribe button is clicked.

<figure><img src="https://2578508252-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0bOAscrXzPSujyzq8DEz%2Fuploads%2FG5PBhIqU9vStM7LeJt0V%2FFrame%2091432%20(1).png?alt=media&#x26;token=e9092c14-c5de-46bc-a464-51ba0a9e4be5" alt="" width="375"><figcaption></figcaption></figure>

### Step 3: Granting Push Permission

Once the website is added to the home screen:

1. Users open the app from the home screen.
2. The website triggers a **Fancy Box** requesting push notification permissions.
3. Users must grant permission to receive web push notifications.

<figure><img src="https://2578508252-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0bOAscrXzPSujyzq8DEz%2Fuploads%2FnBiw2UHkBh7AhSjFRKf6%2FScreenshot%202025-03-05%20at%2014.51.23.png?alt=media&#x26;token=2fbe262a-b75d-4e6d-815b-7a749efcf90f" alt="" width="375"><figcaption></figcaption></figure>

### Step 4: Sending a Web Push Notification for iOS

Once users have granted push permissions, notifications can be sent using the **Netmera Panel**.

#### Steps to Send a Notification:

1. Navigate to the **Netmera Panel**.
2. Select **Create New Campaign > Web > Safari** to configure and send notifications to iOS users.

<figure><img src="https://2578508252-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0bOAscrXzPSujyzq8DEz%2Fuploads%2F1jjI44dihrhNC5govaP9%2FScreenshot%202025-03-05%20at%2014.52.31.png?alt=media&#x26;token=b89b70f3-2de3-44ba-ad5a-a214beaad55b" alt=""><figcaption></figcaption></figure>

## How to Segment Mobile Web Push Opt-in Users?

You can target users who have opted in for **Mobile Web Push** on iOS by following these steps:

1. **Go to Targeting:** Navigate to **Targeting > People** in your dashboard.
2. **Filter by Platform:** Under **Platform**, select **Safari**.
3. **Select Device Type:** Choose **Device Type > Mobile** to filter mobile users.

<figure><img src="https://2578508252-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0bOAscrXzPSujyzq8DEz%2Fuploads%2F17Ub2UR02GBzymggNN31%2Fimage.png?alt=media&#x26;token=b42292c2-fdc6-4f9b-8d28-fe86a081f2f4" alt="" width="563"><figcaption></figcaption></figure>

4. **Target Users Found:** Once the list is generated, save it as a segment to use in your future campaigns.

<figure><img src="https://2578508252-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F0bOAscrXzPSujyzq8DEz%2Fuploads%2FOSWxVbydQzoHYjE1dXB3%2FScreenshot%202025-03-12%20at%2017.02.24.png?alt=media&#x26;token=eef889e5-ee00-4859-9a8f-c09d7b5d6f02" alt="" width="563"><figcaption></figcaption></figure>