Web Application Manifest

With Safari 16, web push notifications are available on mobile Safari browsers. However, a website must have a 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 Safari web push notifications, should include:

• JSON Schema (required)
• Display mode when the website is opened set to standalone or fullscreen for mobile Safari 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"/>

Test Safari 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 Safari toolbar and select "Add to Home Screen"
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"