Starting with iOS/iPadOS 16.4, Apple supports web push notifications for websites that meet specific requirements. To enable this functionality, your website must include a properly configured Web Application Manifest file.

This guide explains how to create and implement a compliant manifest.json to support iOS/iPadOS web push functionality and ensure your users can receive notifications on their Apple devices.

​
What is a Web Application Manifest?

A Web Application Manifest is a JSON file that defines how your web application appears and behaves when installed on a user’s device. It serves as the bridge between your website and native app-like functionality, providing essential metadata that browsers use to create an app-like experience.

The manifest includes critical information such as:

  • Application name and short name for display purposes
  • Icon sets in multiple sizes for various device contexts
  • Display mode preferences (fullscreen, standalone, minimal-ui, browser)
  • Start URL defining the application’s entry point
  • Unique identifier to distinguish multiple app instances
  • Theme colors and orientation settings

For iOS/iPadOS web push notifications, a valid manifest file is mandatory—Apple’s implementation requires it to enable push notification functionality.

Quickly generate a manifest using tools like SimiCart Manifest Generator or validate existing manifests with online tools.

​
Required Manifest Fields for iOS Web Push

Your manifest.json must include the following fields to satisfy Apple’s requirements for web push notifications:

​
Essential Fields

  • $schema (required) - The JSON schema URL that validates the manifest structure and provides IDE support
  • display (required) - Must be set to standalone or fullscreen for iOS compatibility
  • name (required) - The full name of your application as displayed to users
  • icons (required) - Array of icon objects with multiple sizes recommended for optimal display
  • start_url (required) - The entry point URL when the application launches
  • id (optional but recommended) - Assigns a unique identity to the app and allows users to install multiple instances with different preferences

​
Icon Requirements

Each icon object must contain:

  • src - Path to the icon file
  • sizes - Dimensions in “WIDTHxHEIGHT” format
  • type - MIME type (typically “image/png”)

Recommended icon sizes include 192x192, 256x256, 384x384, and 512x512 pixels for comprehensive device support.

For a complete list of available manifest properties, reference the MDN Web Docs.

​
Example Manifest File

{
  "$schema": "https://json.schemastore.org/web-manifest-combined.json",
  "name": "OneSignal Manifest Example",
  "short_name": "OS Manifest",
  "display": "standalone",
  "start_url": "/",
  "theme_color": "#E54B4D",
  "background_color": "#ffffff",
  "icons": [
    { "src": "/icon-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-256x256.png", "sizes": "256x256", "type": "image/png" },
    { "src": "/icon-384x384.png", "sizes": "384x384", "type": "image/png" },
    { "src": "/icon-512x512.png", "sizes": "512x512", "type": "image/png" }
  ],
  "id": "?homescreen=1"
}

​
How to Add a Manifest File to Your Website

Many websites already have a manifest.json file. Verify it includes the required fields listed above and follows the proper implementation steps.

​
Implementation Steps

​
1. File Placement

Place the manifest.json file in the root directory of your website (accessible at https://yoursite.com/manifest.json).

​
2. HTML Integration

Add the following <link> tag to the <head> section of every HTML page on your website:

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

​
3. Icon Preparation

Ensure all icon files referenced in your manifest are accessible at their specified paths. Create high-quality PNG icons in multiple sizes for optimal display across different devices and contexts.

For WordPress users, try the Insert Headers and Footers by WPBeginner Plugin to easily inject the manifest link tag across all pages.

​
Test the Manifest File

​
Accessibility Verification

Open your browser and navigate to https://yoursite.com/manifest.json (replace “yoursite.com” with your actual domain). You should see the manifest.json file publicly accessible with all required fields properly formatted.

​
Validation Methods

Use these approaches to validate your manifest implementation:

​
Browser Developer Tools

  1. Open Chrome DevTools (F12)
  2. Navigate to the Application tab
  3. Select “Manifest” from the left sidebar
  4. Review any detected errors or warnings

​
Online Validation Tools

​
Common Issues to Check

  • Ensure the display field is set to standalone or fullscreen
  • Verify all icon paths are correct and files are accessible
  • Confirm the manifest is served with the correct MIME type (application/manifest+json)
  • Test that the file loads without CORS errors

After successfully implementing your manifest file, proceed to the Mobile Web Push for iOS/iPadOS documentation and review Getting Your Audience to “Add to Home Screen” to begin collecting iOS web push subscriptions.

Starting with iOS/iPadOS 16.4, Apple supports web push notifications for websites that meet specific requirements. To enable this functionality, your website must include a properly configured Web Application Manifest file.

This guide explains how to create and implement a compliant manifest.json to support iOS/iPadOS web push functionality and ensure your users can receive notifications on their Apple devices.

​
What is a Web Application Manifest?

A Web Application Manifest is a JSON file that defines how your web application appears and behaves when installed on a user’s device. It serves as the bridge between your website and native app-like functionality, providing essential metadata that browsers use to create an app-like experience.

The manifest includes critical information such as:

  • Application name and short name for display purposes
  • Icon sets in multiple sizes for various device contexts
  • Display mode preferences (fullscreen, standalone, minimal-ui, browser)
  • Start URL defining the application’s entry point
  • Unique identifier to distinguish multiple app instances
  • Theme colors and orientation settings

For iOS/iPadOS web push notifications, a valid manifest file is mandatory—Apple’s implementation requires it to enable push notification functionality.

Quickly generate a manifest using tools like SimiCart Manifest Generator or validate existing manifests with online tools.

​
Required Manifest Fields for iOS Web Push

Your manifest.json must include the following fields to satisfy Apple’s requirements for web push notifications:

​
Essential Fields

  • $schema (required) - The JSON schema URL that validates the manifest structure and provides IDE support
  • display (required) - Must be set to standalone or fullscreen for iOS compatibility
  • name (required) - The full name of your application as displayed to users
  • icons (required) - Array of icon objects with multiple sizes recommended for optimal display
  • start_url (required) - The entry point URL when the application launches
  • id (optional but recommended) - Assigns a unique identity to the app and allows users to install multiple instances with different preferences

​
Icon Requirements

Each icon object must contain:

  • src - Path to the icon file
  • sizes - Dimensions in “WIDTHxHEIGHT” format
  • type - MIME type (typically “image/png”)

Recommended icon sizes include 192x192, 256x256, 384x384, and 512x512 pixels for comprehensive device support.

For a complete list of available manifest properties, reference the MDN Web Docs.

​
Example Manifest File

{
  "$schema": "https://json.schemastore.org/web-manifest-combined.json",
  "name": "OneSignal Manifest Example",
  "short_name": "OS Manifest",
  "display": "standalone",
  "start_url": "/",
  "theme_color": "#E54B4D",
  "background_color": "#ffffff",
  "icons": [
    { "src": "/icon-192x192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-256x256.png", "sizes": "256x256", "type": "image/png" },
    { "src": "/icon-384x384.png", "sizes": "384x384", "type": "image/png" },
    { "src": "/icon-512x512.png", "sizes": "512x512", "type": "image/png" }
  ],
  "id": "?homescreen=1"
}

​
How to Add a Manifest File to Your Website

Many websites already have a manifest.json file. Verify it includes the required fields listed above and follows the proper implementation steps.

​
Implementation Steps

​
1. File Placement

Place the manifest.json file in the root directory of your website (accessible at https://yoursite.com/manifest.json).

​
2. HTML Integration

Add the following <link> tag to the <head> section of every HTML page on your website:

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

​
3. Icon Preparation

Ensure all icon files referenced in your manifest are accessible at their specified paths. Create high-quality PNG icons in multiple sizes for optimal display across different devices and contexts.

For WordPress users, try the Insert Headers and Footers by WPBeginner Plugin to easily inject the manifest link tag across all pages.

​
Test the Manifest File

​
Accessibility Verification

Open your browser and navigate to https://yoursite.com/manifest.json (replace “yoursite.com” with your actual domain). You should see the manifest.json file publicly accessible with all required fields properly formatted.

​
Validation Methods

Use these approaches to validate your manifest implementation:

​
Browser Developer Tools

  1. Open Chrome DevTools (F12)
  2. Navigate to the Application tab
  3. Select “Manifest” from the left sidebar
  4. Review any detected errors or warnings

​
Online Validation Tools

​
Common Issues to Check

  • Ensure the display field is set to standalone or fullscreen
  • Verify all icon paths are correct and files are accessible
  • Confirm the manifest is served with the correct MIME type (application/manifest+json)
  • Test that the file loads without CORS errors

After successfully implementing your manifest file, proceed to the Mobile Web Push for iOS/iPadOS documentation and review Getting Your Audience to “Add to Home Screen” to begin collecting iOS web push subscriptions.