Safari support

Safari > 16.4

Safari supports iOS push notifications from the version 16.4, however it requires the implementation of manifest.json file. 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 the website is pinned 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.

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

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

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.

Safari < 16

For old Safari versions authorization takes place via certificates. In order to integrate your project with APNs, you will need to request a certificate in a p.12 file format from a Certificate Authority in your Certificate Assistant first. Check instruction here.

Last updated 1 month ago

Was this helpful?

{ "$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" } ] }