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

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).

To add support for Web Push on iOS 16.4+:

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>
```

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.

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