Complete guide to creating and implementing a Web Application Manifest file required for iOS/iPadOS web push notifications, including setup instructions and testing methods.
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.
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:
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.
Your manifest.json
must include the following fields to satisfy Apple’s requirements for web push notifications:
$schema
(required) - The JSON schema URL that validates the manifest structure and provides IDE supportdisplay
(required) - Must be set to standalone
or fullscreen
for iOS compatibilityname
(required) - The full name of your application as displayed to usersicons
(required) - Array of icon objects with multiple sizes recommended for optimal displaystart_url
(required) - The entry point URL when the application launchesid
(optional but recommended) - Assigns a unique identity to the app and allows users to install multiple instances with different preferencesEach icon object must contain:
src
- Path to the icon filesizes
- Dimensions in “WIDTHxHEIGHT” formattype
- 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.
Many websites already have a manifest.json
file. Verify it includes the required fields listed above and follows the proper implementation steps.
Place the manifest.json
file in the root directory of your website (accessible at https://yoursite.com/manifest.json
).
Add the following <link>
tag to the <head>
section of every HTML page on your website:
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.
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.
Use these approaches to validate your manifest implementation:
display
field is set to standalone
or fullscreen
application/manifest+json
)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.
Complete guide to creating and implementing a Web Application Manifest file required for iOS/iPadOS web push notifications, including setup instructions and testing methods.
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.
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:
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.
Your manifest.json
must include the following fields to satisfy Apple’s requirements for web push notifications:
$schema
(required) - The JSON schema URL that validates the manifest structure and provides IDE supportdisplay
(required) - Must be set to standalone
or fullscreen
for iOS compatibilityname
(required) - The full name of your application as displayed to usersicons
(required) - Array of icon objects with multiple sizes recommended for optimal displaystart_url
(required) - The entry point URL when the application launchesid
(optional but recommended) - Assigns a unique identity to the app and allows users to install multiple instances with different preferencesEach icon object must contain:
src
- Path to the icon filesizes
- Dimensions in “WIDTHxHEIGHT” formattype
- 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.
Many websites already have a manifest.json
file. Verify it includes the required fields listed above and follows the proper implementation steps.
Place the manifest.json
file in the root directory of your website (accessible at https://yoursite.com/manifest.json
).
Add the following <link>
tag to the <head>
section of every HTML page on your website:
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.
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.
Use these approaches to validate your manifest implementation:
display
field is set to standalone
or fullscreen
application/manifest+json
)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.