How can I add support for Web Push on iOS 16.4+?

Pushy Support
  • Updated

For Web Push on iOS 16.4+, your website / web app must be installed as a PWA (your users will first need to click the "Share" button -> "Add to Home Screen" before they can sign up for push notifications).

Note: Web Push on the iOS Simulator is not currently supported by Apple.

To add support for Web Push on iOS 16.4+:

  1. Update the Pushy Web SDK. If you're using JavaScript modules, install version 1.0.10 of the Pushy Web SDK from npm using the following command: 
    npm install pushy-sdk-web --save

    Alternatively, import version 1.0.10 by adding the following line to the <head> tag:

    <script src="https://sdk.pushy.me/web/1.0.10/pushy-sdk.js"></script>
  2. Create a file called manifest.json in the root directory of your website with the following contents: 
    {
    "name": "YourAppName",
    "short_name": "YourAppName",
    "theme_color": "#ff5754",
    "background_color": "#ffffff",
    "display": "standalone",
    "scope": "/",
    "start_url": "https://example.com/",
    "icons": [
        {
            "src": "https://pushy.me/img/pwa/icon-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "https://pushy.me/img/pwa/icon-256x256.png",
            "sizes": "256x256",
            "type": "image/png"
        },
        {
            "src": "https://pushy.me/img/pwa/icon-384x384.png",
            "sizes": "384x384",
            "type": "image/png"
        },
        {
            "src": "https://pushy.me/img/pwa/icon-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ]
}

    Note: Please replace YourAppName with your web app name and https://example.com/ with your web app home page URL. Also, please ensure this file is accessible at https://example.com/manifest.json, where example.com is your website hostname.

  3. Add the following line to the <head> tag of your website / web app to reference the manifest.json in all pages:

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

Related articles