Apple's release of iOS and iPadOS 16.4+ includes mobile web push notifications from web apps added to a user's home screen. Support for web push on iOS and iPadOS is now available on Safari, Chrome, and Edge browsers. Here's how you can configure your website to send and get users to opt-in to web push notifications.

Mobile Web Push Requirements:

• Must be on iOS or iPadOS 16.4+
• Web app must be served alongside a web application manifest file with the correct display setting
• 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 iOS/iPadOS 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 mobile push notifications:

1. Create a Web App Manifest JSON file and serve it alongside your website or web app
2. Add and register OneSignal Service Worker (recommended, mandatory for sending push notifications)
3. Test and deploy your Web App Manifest
4. Set up and test notification permission prompting
5. Promote and encourage your customers to add your web app from the browser to their home screen
6. Send a test mobile 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.

Ensure that:

• Your file includes a display property that's set to standalone or fullscreen
• 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.

Note: Ensure your website is HTTPS certified (mobile web push prompting and notifications will not work if the "My site is not fully HTTPS" option is selected.)

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 the browser, 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 browser and simply acting as a shortcut. A standalone app will show up independently from the browser 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 / Chrome / Edge > 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 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 is 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:

1. Visit your website on your browser on a mobile Apple device on 16.4+.
2. Click on the Share button of their browser on a mobile device.
3. Click on the Add to home screen option.
4. Save the app on your device.
5. Open the app from the home screen.
6. Subscribe to notifications (you must click a subscribe button before a native permission prompt can be displayed).
7. 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 Getting Your Audience to "Add to Home Screen".

6. Sending a Web Push Notification

Now you're ready to send a notification! Notifications can be sent via OneSignal in two ways:

1. OneSignal Dashboard: See Sending Messages and our Web Push Notification Guide covers available configuration options and details.
2. REST API: Create notification

Our notification previewer in the dashboard displays your notifications before you send them.

Frequently Asked Questions

How much does it cost to send web push notifications?

Free plans can target 10,000 Web Push subscribers at a time for free. If you have more than 10,000 web push subscribers, you may be sending to older devices. You can Delete Users to target new users or upgrade to a paid plan.

Which Safari Web Push Features are Supported?

See our Safari Web Push FAQs to see what features are supported by device. Note: The iOS/iPadOS 16.4+ applies to all browsers on a mobile Apple device.