Documentation Center

iOS Web Push on Mobile Safari ​

As of iOS and iPadOS 16.4+, Safari now supports mobile web push notifications from web apps that have been added to a user's home screen.

Follow the steps below to configure your site and prompt users to add your website to their home screen and allow notifications.

iOS/iPadOS Web Push Requirements: ​

  • Device must be on iOS or iPadOS 16.4+
  • The web app must include a web application manifest file containing the correct 'display' setting
  • The web app must be added to the website visitor's Home Screen
  • User interaction is required before prompting for permission to send push notifications

If you already have your website set up with a web application manifest, it is ready for mobile Safari Web Push.

Additional recommendations for all mobile sites: ​

  • HTTPS support
  • Responsive design

To send mobile Safari web push notifications with Aimtell: ​

These instructions assume that the Aimtell tracking code and service worker have already been set up on your website

Create a web application manifest file and upload it to the root directory of your website ​

  • Your file must include a 'display' property that is set to 'standalone' or 'fullscreen'
  • The manifest should be referenced in your website's <head> with a <link rel="manifest" href="manifest.json"/> tag - (You should modify the items under name and icons to reflect your own site.)
json
{
  "$schema": "https://json.schemastore.org/web-manifest-combined.json",
  "display": "standalone",
  "start_url": "/",
  "name": "Aimtell Web Push Notifications",
  "short_name": "Aimtell",
  "icons": [
    {
      "src": "/web-icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/web-icons/icon-256x256.png",
      "sizes": "256x256",
      "type": "image/png"
    },
    {
      "src": "/web-icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png"
    },
    {
      "src": "/web-icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}

Invite visitors to your website to add your site to their Home Screen ​

To add a site to the home screen from safari, select the share icon from the bottom menu and then choose "Add to home screen" from the options.

Image

Image

Prompt visitors to allow push notifications from your website ​

Once your site has met the requirements for web push on Mobile Safari, we recommend creating a custom prompt so that it is visible the moment a new visitor lands on your site. Documentation for Creating a Custom Opt In Prompt

When this is set up correctly, it will look something like this:

Image

Image

Once a visitor has added your website to their Home Screen and allowed notifications, you can send them push notifications just as you would to any other subscriber.

The notifications will display like normal notifications on a Mobile iOS device:

Image

It is recommended that you test this workflow on an iOS/iPadOS device with Safari 16.4+.