Safari Web Push on Mobile (iOS/iPadOS)
iOS and iPadOS Web Push Notifications for Websites
Apple has just released the public beta for iOS and iPadOS 16.4+, which includes mobile web push notifications from web apps added to a user's home screen. Support for web push on iOS and iPadOS is coming soon. Here's how you can prepare your website to send and get users to opt-in to web push notifications when the feature is publicly available.
Mobile Web Push Requirements:
- Must be on iOS or iPadOS 16.4+ (Follow this guide to download 16.4 beta)
- Web app must be served alongside a web application manifest file with the correct
- The web app is added to the user's Home Screen
- Users have to initiate an action before being prompted for push permission
If your website is already a Progressive Web App (PWA), no further site updates are needed to prepare for mobile Safari Web Push.
To see if your website is a PWA, you can use Lighthouse in Chrome DevTools to audit your site.
We recommend that your website also has:
- HTTPS support
- Responsive design
Below is a guide to preparing your web app to send mobile web push notifications.
Sending Mobile Web Push Notifications:
There are five high-level steps to send push notifications to Safari:
- Create a Web App Manifest JSON file and serve it alongside your website or web app
- Add and register OneSignal Service Worker (recommended, mandatory for sending push notifications)
- Test and deploy your Web App Manifest
- Set up and test notification permission prompting
- Promote and encourage your customers to add your web app from the browser to their home screen
- Send a test Safari web push notification
1. Creating a Web App Manifest
A web application manifest file is a JSON file that determines how your app looks and behaves once installed on a user’s desktop or mobile device. It contains metadata such as your web app's name, description, icons, and color scheme.
You can use a tool like SimiCart to generate a manifest file quickly. Refer to our manifest file guide for an example, fill in the required fields, and ensure the file is named "manifest.json" when added to the root directory of your app.
- Your file includes a
displayproperty that's set to
- Your website’s HTML references the manifest file via
<link>tag (see below).
<link rel="manifest" href="manifest.json"/>
2. Adding a OneSignal Service Worker
If you have not set up web push with OneSignal already, follow our Web Quickstart Guide to get started.
To enable web push for iOS and iPadOS, ensure that you've imported the OneSignal Service Worker. (You can learn more about integrating OneSignal's Service Worker in our Service Worker Guide.)
It is also recommended to have a service worker for offline access and caching. Refer to the recommended guides at the bottom of the page for more information.
3. Testing and Deploying Your Website
Test your website to ensure that your web app manifest was implemented correctly.
You can test your website on various devices and browsers by adding it to your home screen. This can be done by going to the website in Safari, clicking on "Share", and "Add to Home Screen". Ensure you are on iOS or iPadOS 16.4+ so permission prompts can be enabled.
If you've successfully set your website for web push, your app will open as a standalone app instead of opening in a Safari browser and simply acting as a shortcut. A standalone app will show up independently from Safari in App Switcher and not show the toolbar that the browser does.
If you've recently made changes and they are not showing on your mobile device, try going to Settings > Safari > and clearing the caches.
4. Setting Up and Testing Permission Prompting
Web apps that have been added to the Home Screen require direct user interaction to request permission to send notifications -- such as tapping on a 'subscribe' button. This should then launch the native permission prompt.
Ensure your website has an obvious notification subscription button users can easily find.
You can also utilize a OneSignal permission prompt, slide prompt, or subscription bell prompt to encourage the user to allow notifications. If they choose to subscribe, the native permission prompt will show up.
Note: These prompts will only appear after the app has been added and opened from the home screen.
We also recommend that you enable users to subscribe to specific types of notifications by utilizing our Category Prompt feature.
If permission are denied, the home screen app needs to be removed and re-added for the native permission prompt to show again.
Test that permission prompting is working:
- Visit your website on your Safari browser on a mobile Apple device on 16.4+.
- Click on the Share button of their Safari browser on a mobile device.
- Click on the Add to home screen option.
- Save the app on your device.
- Open it the app from the home screen.
- Subscribe to notifications (you must click a subscribe button before a native permission prompt can be displayed).
- The native permission prompt should be triggered when the subscribe button is clicked.
5. Promoting and Encouraging Users to Add Your Website to Their Home Screen
Once your website is ready to go, let your users know how to add your website to their home screen and subscribe to web push notifications.
Banners can be added to your website to inform your audience of the value of mobile web push notifications and how they can subscribe.
Check out our Add to Home Screen Banner Guide.
6. Sending a Web Push Notification
Now you're ready to send a notification! Notifications can be sent via OneSignal in two ways:
- In the dashboard's push notification editor, ensure “Send to Safari” is selected once you've designed your notification. Our Web Push Notification Guide covers available configuration options and details.
isSafariwith the REST API. Learn more about creating a notification via our API here.
Our team is working on updating our notification previewer in the dashboard to display your notifications before you send them -- stay tuned!
Updated 3 days ago