Guide for the requirements and best practices for sending to a mobile iOS device
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.)
{ "$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.
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:
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:
It is recommended that you test this workflow on an iOS/iPadOS device with Safari 16.4+.