iOS and iPadOS for Safari

Apple has released iOS and iPadOS 16.4, which now supports web push notifications for web apps, including those on the home screen. This update allows websites to prompt users to opt-in and send notifications to iPhone and iPad users globally.

With iOS and iPadOS 16.4, push notifications are now supported on Safari, Google Chrome, and Edge for iPhone and iPad. This feature allows you to engage and target your customers with personalized notifications, even when they aren’t on your website.

On iOS, web push notifications work differently than on Android and desktop. Users must first add your website to their Home Screen and open the Web App. After doing so, they can grant permission, allowing your web app to function like a native app. It will appear separately in the app switcher, have its own notification settings, and receive notifications just like other apps.

Create a custom manifest (manifest.json)

To make your website compatible with iOS, you need a Web Application Manifest, a JSON file that defines how your site should appear when opened from the Home Screen, including metadata like colors, icons, and the app name. You can easily create a custom manifest (manifest.json) using our built-in manifest generator available in your StackPush Dashboard.

You can generate a custom Web App Manifest using the StackPush Web App Manifest generator, which is located under the “Website > iOS/iPadOS Configuration” section.

To enable iOS web push notifications, you’ll need to set up a Web App Manifest with these key elements:

• Short Name: A brief name (max 12 characters) for your web app, used when space is limited.
• Name: The full name of your web app, typically up to 45 characters.
• Start URL: A unique identifier for your web app, usually set to ‘/’ to determine where the app loads from.
• Background Color: A placeholder color shown before your app’s stylesheet loads, ideally matching your website’s background color.
• Theme Color: The default theme color for your app, influencing how it’s displayed by the OS.
• Icon: A 512×512 PNG image used as the app’s shortcut icon on the home screen.

Fill in these fields using the manifest builder, download the manifest.json file, and upload it to the root of your website. Follow this guide if you haven’t known yet how to upload it to your hosting/server.

Guidance popup for HomeScreen settings

To help your customers get started with push notifications on Safari, we offer a customizable popup that guides users through saving your web app to their Home Screen and enabling notifications.

On iOS and iPadOS, users need to save your website to their Home Screen before they can grant notification permission. Our custom popup helps users with this process by guiding them to save your web app using the share option and then allowing notifications within the app. To ensure a seamless experience, we recommend customizing the popup to match your site’s theme and highlighting the benefits of downloading your Web App.

Integrate StackPush into your website.

Ensure you’ve generated and uploaded the manifest to your website root and enabled web push for iOS. Then, follow our integration guides to add StackPush , enabling Popup for web push permission.

For universal integration across all platforms, add a simple JavaScript snippet to the head section of your website and upload the service worker (sw.js) to your website root.