Manifest

Add support to iOS Safari in Add to Home Screen option

Information

Safari supports iOS push notifications from the version 16.4, however, it requires manifest.json file implementation. You can setup your manifest.json yourself or generate it via any online service like: Manifest Generator

Your manifest attributes should contain:

$schema (required)
display standalone or fullscreen (required)
icons to reference icons of several sizes (recommended)
id (optional)

Example manifest file:

{
  "$schema": "https://json.schemastore.org/web-manifest-combined.json",
  "display": "standalone",
  "start_url": "/",
  "name": "PPG Demo",
  "icons": [
    {
      "src": "/images/ca.png",
      "sizes": "40x40",
      "type": "image/png"
    }
  ]
}

Implementation

Once you have your manifest, add manifest.json to your root path of website. It must be accessible via https://example.com/manifest.json.
Place index.html file in <head> section reference to manifest:

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

Testing

The implementation will work only if you pin your website to home screen in iOS Safari.

Navigate to your website
Tap "share" button
Tap "Add to Home Screen" option

Run the app pinned to the home screen.

All Safari browser versions requires user gesture (click on desktop, tap on mobile device) to display subscription prompt.

If you have completed all steps correctly, the web push subscription prompt will appear.

Invite users to pin your website to iOS home screen

If you wish to promote this feature in iOS Safari, you can use any open-source solution or create your own prompt to engage users. An example of such an implementation can be found in this repository: https://github.com/rajatsehgal/add-to-home-screen.

Last updated 9 months ago