With iOS/iPadOS 16.4+, web push notifications are available. However, a website must have a proper manifest file with the right properties set for notifications to work. This is a guide to understanding and implementing a web application manifest for your website.

What is a Web Application Manifest?

A web application manifest file is a JSON file that determines how your app looks and behaves once installed on a user’s desktop or mobile device. It contains metadata such as your web app's name, description, icons, and color scheme.

You can use a tool like SimiCart to generate a manifest file quickly. Follow the guidelines below to fill in the required fields and ensure the file is named "manifest.json" when added to the root directory of your app.

A manifest file, for the purpose of sending mobile iOS/iPadOS web push notifications, should include:

• JSON Schema (required)
• Display mode when the website is opened set to standalone or fullscreen for mobile iOS/iPadOS web push (required)
• Icons to reference icons of several sizes (recommended)
• ID property (optional)

Note: The ID property allows your customers to install multiple instances of your web application with different preferences.

Refer to this guide from MDN for a full list of keys and more details.

Example manifest file:

{   "$schema": "https://json.schemastore.org/web-manifest-combined.json",
    "display": "standalone",
    "start_url": "/",
    "name": "OneSignal Manifest Example",
    "short_name": "OS Manifest",
    "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"
        }
    ]
}

How do I add a Manifest File to My Website?

A manifest file needs to be served from the root, or top-level directory) of a website and named manifest.json.

Once you’ve added the manifest file, be sure to also add a link tag to all the pages of your web app.

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

How do I add a Manifest File to My Website?

Depending on your current plugins, you may already have a manifest.json file. You will need to check that it has the above properties for it to work. Once you have the manifest.json file with the correct properties as shown above and it is uploaded to your server it should work.

If you need help adding code to your site, try the Insert Headers and Footers by WPBeginner Plugin.

Test iOS/iPadOS Web Push with the Manifest File

For mobile web push purposes, to test if you have successfully added a web application manifest, follow the following steps your website audience would need to take to enable it.

However, be sure you've set up web push properly by following [this web push guide].

1. Open your website on a mobile device (iOS or iPadOS) that is updated to 16.4+
2. Click "Share" in the browser toolbar and select "Add to Home Screen". (For Safari and Edge, this is at the bottom of the screen, For Chrome, this is at the top of the screen, next to the address bar.)
3. Open the app that was just added to the home screen
4. Look for a subscription option and subscribe to notifications
5. A native push permission prompt will show up
6. Send a test web push notification through the dashboard by sending a push to Safari, or by using isSafari through the REST API, and ensure you received it on your mobile device.

Add a Manifest ID (optional)

The ID property of a manifest file is a string (in the form of a URL), which acts as a unique identifier for the web app.

Having this property enables users to grant unique identities to each instance of the app on their devices. This is useful for Focus settings so that users may further customize their notifications and sync these settings across devices.

"id": "?homescreen=1"