ios safari web push notifications

How to enable Safari push notifications on iPhone or iPad

Your changes have been saved

Email is sent

Email has already been sent

Please verify your email address.

You’ve reached your account maximum for followed topics.

iPhone users can add websites to their iOS 17 home screens as progressive web apps, and essentially turn sites into standalone apps. However, there are a few features typically reserved for iOS apps, and one of those is push notifications. If you do want to receive push notifications from a website, there is a workaround in the Settings app that involves flipping a WebKit flag. This gives web apps the ability to send push notifications through Safari, as long as the website natively supports browser notifications. Although Apple announced this functionality in 2022 and shipped it in 2023, it's still considered an experimental feature, so you'll have to follow the steps below to use them.

iOS 17 review: The bubble is now greener on the other side

Apple is embracing its tight ecosystem with this release, further alienating Android users in the process.

How to enable push notifications in Safari

If you have a recent iPhone , or an iPad running version 16.4 or later, you can follow the steps below to enable Safari push notifications for specific websites. By doing so, you will receive alerts similar to those of native iOS apps, helping you know when your favorite websites publish timely content.

1. Open the Settings app on iOS 17.

2. Scroll down to the Safari tab, and tap on it.

3. Find the Advanced tab at the bottom of the screen and press it.

4. Tap the Feature Flags tab.

5. You will see a long list of WebKit flags organized in alphabetical order. Look for Notifications and flip the toggle them on.

How to add a website to your iOS Home Screen

After that, you'll need to manually add each website you'd like to receive notifications from to your Home Screen. Here's how:

1. Launch the Safari app and visit the website you'd like to receive push notifications from.

2. Tap on the Share button in the middle of the bottom bar

3. Choose Add to Home Screen .

4. Optionally rename the web app, then tap Add in the top right corner.

5. It will now appear on your Home Screen as a native app. Launch the newly-added web app.

6. Find the website's notifications settings and enable push notifications.

7. iOS will ask for your permission to enable them. Tap Allow to finish.

Now, the web app will be able to notify you as long as you keep it on your Home Screen. If you delete it, then the permission is revoked automatically, and you won't be able to receive alerts from it until you add it again.

Should you use push notifications from websites on iPhone?

As you can see, the process to enable Safari push notifications on iOS and iPadOS is more complex when compared to macOS because you need to add the web app to the Home Screen for it to work. On new Macs , you can just allow or deny website permissions without needing to bookmark them in any way. Regardless, it can be done now on newer versions of iOS 16 or later. It's useful, but be sure to choose wisely which websites you give access to notifications in Safari. If you give permission to the wrong website, your iPhone could quickly be cluttered with spam.

iPhone 15 Pro Max review: Apple is slowly winning over this Android diehard

The iPhone 15 Pro Max may not look much different from the iPhone 14 Pro Max, but it brings much improved cameras and ergonomics

iPhone 15 review: A major yet sneaky upgrade from its predecessor

Apple's iPhone 15 might look like last year's iPhone 14, and the iPhone 13 before that. But it's an upgrade that impresses nonetheless.

Web Push for Web Apps on iOS and iPadOS

Feb 16, 2023

by Brady Eidson and Jen Simmons

Today marks the release of iOS and iPadOS 16.4 beta 1, and with it comes support for Web Push and other features for Home Screen web apps.

Today also brings the first beta of Safari 16.4. It’s a huge release, packed with over 135 features in WebKit — including RegExp lookbehind assertions, Import Maps, OffscreenCanvas, Media Queries Range Syntax, @property , font-size-adjust , Declarative Shadow DOM, and much more. We’ll write all about these new WebKit features when Safari 16.4 is released. Meanwhile, you can read a comprehensive list of new features and fixes in the Safari 16.4 release notes .

But let’s set Safari aside and talk about Home Screen web apps on iOS and iPadOS.

Since the first iPhone, users could add any website to their Home Screen — whether it’s a brochure site, a blog, a newspaper, an online store, a social media platform, a streaming video site, productivity software, an application for creating artwork, or any other type of website. For the last ten years, users of Safari on iOS and iPadOS could do this by tapping the Share button to open the Share menu, and then tapping “Add to Home Screen”. The icon for that website then appears on their Home Screen, where a quick tap gets them back to the site.

Web developers have the option to create a manifest file (with its display member set to standalone or fullscreen ) and serve it along with their website. If they do, that site becomes a Home Screen web app. Then, when you tap on its icon, the web app opens like any other app on iOS or iPadOS instead of opening in a browser. You can see its app preview in the App Switcher , separate from Safari or any other browser.

Web Push for Web Apps added to the Home Screen

Now with iOS and iPadOS 16.4, we are adding support for Web Push to Home Screen web apps. Web Push makes it possible for web developers to send push notifications to their users through the use of Push API , Notifications API , and Service Workers all working together.

A web app that has been added to the Home Screen can request permission to receive push notifications as long as that request is in response to direct user interaction — such as tapping on a ‘subscribe’ button provided by the web app. iOS or iPadOS will then prompt the user to give the web app permission to send notifications. Once allowed, the user can manage those permissions per web app in Notifications Settings — just like any other app on iPhone and iPad.

The notifications from web apps work exactly like notifications from other apps. They show on the Lock Screen, in Notification Center, and on a paired Apple Watch.

This is the same W3C standards-based Web Push that was added in Safari 16.1 for macOS Ventura last fall. If you’ve implemented standards-based Web Push for your web app with industry best practices — such as using feature detection instead of browser detection — it will automatically work on iPhone and iPad.

Web Push on iOS and iPadOS uses the same Apple Push Notification service that powers native push on all Apple devices. You do not need to be a member of the Apple Developer Program to use it. Just be sure to allow URLs from *.push.apple.com if you are in control of your server push endpoints.

To learn more about how to setup Web Push, read the article Meet Web Push on webkit.org, or watch the WWDC22 session video Meet Web Push .

Focus support

Notifications are a powerful tool, but it’s easy for people to get into situations where they are overwhelmed by too many of them. Notifications for Home Screen web apps on iPhone and iPad integrate with Focus , allowing users to precisely configure when or where to receive them. For users who add the same web app to their Home Screen on more than one iOS or iPadOS device, Focus modes automatically apply to all of them.

Badging API

Home Screen web apps on iOS and iPadOS 16.4 now support the Badging API . Just like any app on iOS and iPadOS, web apps are now able to set their badge count. Both setAppBadge and clearAppBadge change the count while the user has the web app open in the foreground or while the web app is handling push events in the background — even before permission to display the count has been granted.

Permission to display the badge on the app icon is granted in exactly the same way as other apps on iOS and iPadOS. Once a user gives permission to allow notifications, the icon on the Home Screen will immediately display the current badge count. Users can then configure permissions for Badging in Notifications Settings, just like any other app on iOS or iPadOS.

Manifest ID

WebKit for iOS and iPadOS 16.4 adds support for the id member from the Web Application Manifest standard. It’s a string (in the form of a URL) that acts as the unique identifier for the web application, intended to be used by an OS in whatever way desired. iOS and iPadOS use the Manifest ID for the purpose of syncing Focus settings across multiple devices.

iOS has supported multiple installs of the same web app since the very beginning. We believe the ability for people to install any web app more than once on their device can be useful — providing additional flexibility to support multiple accounts, separate work vs personal usage, and more.

When adding a web app to the Home Screen, users are given the opportunity to change the app’s name. iOS and iPadOS 16.4 combine this name with the Manifest ID to uniquely identify the web app. That way, a user can install multiple copies of the web app on one device and give them different identities. For example, notifications from “Shiny (personal)” can be silenced by Focus while notifications from “Shiny (work)” can be allowed. If the user gives their favorite website the same name on multiple devices, Focus settings on one device will sync and apply to the others as well.

Third-party browser support for Add to Home Screen

In iOS and iPadOS 16.4, third-party browsers can now offer their users the ability to add websites and web apps to the Home Screen from the Share menu.

Applications on iOS and iPadOS present the Share menu by creating a UIActivityViewController with an array of activityItems . For “Add to Home Screen” to be included in the Share menu the following must be true:

• The application has the com.apple.developer.web-browser managed entitlement
• A WKWebView is included in the array of activityItems
• The WKWebView is displaying a document with an HTTP or HTTPS URL
• If the device is an iPad, it must not be configured as a Shared iPad

As described above, after a user adds to Home Screen, any website with a Manifest file that sets the display member to standalone or fullscreen will open as a web app when a user taps its icon. This is true no matter which browser added the website to the Home Screen.

If there is no manifest file configured to request web app behavior (and no meta tag marking the site as web app capable), then that website will be saved as a Home Screen bookmark. Starting in iOS and iPadOS 16.4, Home Screen bookmarks will now open in the user’s current default browser.

New Fallback Icon

Web developers usually provide icons to represent their website throughout the interface of a browser. If icons for the Home Screen are not provided, previously iOS and iPadOS would create an icon from a screenshot of the site. Now, iOS and iPadOS 16.4 will create and display a monogram icon using the first letter of the site’s name along with a color from the site instead.

To provide the icon to be used for your website or web app, list the icons in the Manifest file — a capability that’s been supported since iOS and iPadOS 15.4 . Or you can use the long-supported technique of listing apple-touch-icons in the HTML document head . (If you do both, apple-touch-icon will take precedence over the Manifest-declared icons.)

New Web API for Web Apps

Besides Web Push, Badging API, and Manifest ID, many of the other new features in Webkit for iOS and iPadOS 16.4 are of particular interest to web app developers focusing on Home Screen web apps. These include:

• Screen Wake Lock API
• Screen Orientation API
• User Activation API
• Web Codecs API video support

See the release notes for Safari 16.4 for the full list of features.

Are you seeing a bug? That’s to be expected in a beta. Please help us such squash bugs before iOS and iPadOS 16.4 are released to the public by providing feedback from your iPhone or iPad. Feedback Assistant will collect all the information needed to help us understand what’s happening.

Also, we love hearing from you. You can find us on Mastodon at @[email protected] , @[email protected] and @[email protected] . Or send a tweet to @webkit to share your thoughts on these new features.

iOS 16.4 will let web apps on your homescreen send push notifications

I’ll probably be turning them off, but at least they’ll be an option..

By Jay Peters , a news editor who writes about technology, video games, and virtual worlds. He’s submitted several accepted emoji proposals to the Unicode Consortium.

Share this story

Apple’s new iOS and iPadOS 16.4 betas will let Safari web apps on your homescreen send you push notifications, according to a new post on the WebKit blog .

As far back as the first iPhone, you’ve been able to add a shortcut to websites to your homescreen represented as app-like icons, but the web apps haven’t been able to send you notifications or show notification badges. With iOS and iPadOS 16.4, however, that will change.

Here’s how the push notifications will work, according to the blog post by Brady Eidson and Jen Simmons — though it sounds a lot like how they work with native apps already:

A web app that has been added to the Home Screen can request permission to receive push notifications as long as that request is in response to direct user interaction — such as tapping on a ‘subscribe’ button provided by the web app. iOS or iPadOS will prompt the user to give the web app permission to send notifications. The user can then manage those permissions per web app in Notifications Settings — just like any other app on iPhone and iPad. The notifications from web apps work exactly like notifications from other apps. They show on the Lock Screen, in Notification Center, and on a paired Apple Watch.

Web apps will also be able to set a notification badge count, according to the blog, and the notifications will support Focus modes, too. And if you have multiple versions of a web app on your homescreen, they can have different settings, which might be useful to help separate personal and work use, for example. I’m personally glad we can manage the notifications on a per-web-app basis; that should make it a lot easier to keep them under control.

These web push notification changes were actually promised quite a long time ago, as Apple first announced web push notifications were on the way back at WWDC 2022 in June . That said, like on desktop, I don’t think I’ll be turning on any web push notifications — I already have turned most of my notifications for native apps off.

It’s not just Safari that’s getting some web app improvements: starting with iOS and iPadOS 16.4, you can save websites and apps from third-party browsers to your homescreen, too.

The US finally takes aim at truck bloat

No, kamala harris wasn’t wearing these audio earrings, these are real earrings — and also real earbuds, sony’s ps5 pro is a pricey test of next-gen consoles, steam’s improved family sharing is out now for everyone.

More from Apple

The best Presidents Day deals you can already get

The shine comes off the Vision Pro

Apple unbanned Epic so it can make an iOS games store in the EU

Why does Apple make it so hard to share the Vision Pro?

iOS 16.4 adds Web App Push Notifications: here’s how you can use and manage them

Your changes have been saved

Email is sent

Email has already been sent

Please verify your email address.

You’ve reached your account maximum for followed topics.

HONOR Magic 6 RSR Porsche Design Debuts with Industry-First Dual-Layer OLED Display

Best samsung galaxy s23 ultra cases in 2024, iphone 16: latest rumors, features, and everything we know so far.

Progressive Web Apps (or PWAs) provide a quick and unique way to access websites and their services without installing a dedicated application. Now, this means they come without occupying a large chunk of storage on your phone and are an easy solution to quickly visit your favorite sites that don't have an app.

Despite iOS letting users create and use web apps for a long time, they have some limitations. And one popular missing feature was support for Push Notifications. But users running iOS 16.4 (and iPadOS 16.4) can now enable these for PWAs, and here we will look into how to set up and manage such notifications.

How to set up and manage Push Notifications for Progressive Web Apps on iOS

When it comes to receiving alerts from Progressive Web Apps, the setup procedure can range from being as simple as a single tap or involve more steps.

For this guide, we are using the web app for Twitter, which has a few steps to enable push notifications.

Once you've created the Twitter Web App and logged into your account, head into its Settings and Support section and follow the steps listed below:

• Choose the Notifications options.
• On the next screen, tap on Preferences.
• After enabling the feature within the web app, head into Settings on your iPhone and tap on the Notifications submenu.
• If you already had the Twitter app on your phone – as I did – you will now see another option for Twitter.

Deleting the PWA from your phone will also remove the configured settings.

Progressive Web Apps are now more useful on iPhone and iPad

Notifications for PWAs were a feature Apple announced last year at WWDC 2022, alongside a release date set for sometime in 2023. With iOS 16.4, Apple has finally delivered its promise, making web apps more useful and user-friendly. You may find this feature extremely convenient if you use communication apps like WhatsApp, which has a PWA but no dedicated application on iPad.

iOS 16 enables web push notifications and extension syncing with Safari update

iOS 16 was announced today at WWDC 2022 with several new features, including a completely redesigned lock screen with widgets and enhancements to several system apps. Specifically speaking about Safari, Apple’s web browser will now support web push notifications, extension syncing, and more with the update.

One of the biggest complaints about the iOS version of Safari is that it lacks push notifications for web apps, so websites are unable to notify a user if they’re running Safari in the background – although this is already possible on the Mac.

Now with iOS 16, this will become a reality. The first signs of push notifications for web apps appeared in iOS 15.4 , but the feature never worked since it was labeled as “experimental.” Now, according to Apple’s website , iOS 16 and iPadOS 16 will finally enable web push notifications – but there’s a catch.

Apple says the feature will come in 2023 with a future update of iOS 16, so it won’t be available at launch. At least the company has now finally confirmed that it is working on web push notifications.

Apple’s web browser is also getting extension syncing support, so that you can have the same extensions enabled on your iPhone, iPad, and Mac. It also supports image translation using Live Text, new password settings for websites, and shared Tab Groups. iOS 16 also adds FIDO support to Safari , so users can sign-in with Touch ID or Face ID instead of an alphanumeric password.

Developers can now download the first beta of iOS 16 via the  Apple Developer website . A public beta version will be available next month with the official release expected this fall.

More about iOS 16

• Apple debuts iOS 16 with customizable lock screen, Messages updates, more
• Get iOS 16: Here’s how to install the beta
• iOS 16 brings haptic feedback to the iPhone’s keyboard for the first time
• You can finally lock your hidden photos album with Touch ID or Face ID in iOS 16

FTC: We use income earning auto affiliate links. More.

Check out 9to5Mac on YouTube for more Apple news:

Filipe Espósito is a Brazilian tech Journalist who started covering Apple news on iHelp BR with some exclusive scoops — including the reveal of the new Apple Watch Series 5 models in titanium and ceramic. He joined 9to5Mac to share even more tech news around the world.

Manage push notifications

How To Get Push Notifications From Web Apps in iOS 16.4

Safari’s latest update lets websites give you alerts without needing to download an app.

The release of iOS 16.4 also brings with it the release of Safari 16.4’s first beta test , which introduces multiple features to Apple’s default browser. One of the most interesting is the introduction of web app notifications , which allow for websites to send users alerts just like any other app would.

How do web app notifications work?

Essentially, web app notifications work the same as any other notification would, appearing on your Lock Screen, in Notification Center, and on a paired Apple Watch.

These notifications will display information about whichever website you’ve created a web app for, providing updates on content and uploads just like any dedicated app downloaded from the App Store would.

By default, web apps won’t send any notifications. Instead, you’ll need to opt into them, usually through a “subscribe” button provided by the web app. Once you’ve subscribed to these notifications, the website will be able to send notifications, and a badge will appear on the app’s home screen icon indicating unread notifications.

Web app notifications will also be compatible with Focus modes , meaning you can tailor which apps you want to receive notifications from at any given time.

How do you create a web app in iOS?

Web Apps can only be made through Safari on iPhones and iPads. They are essentially shortcuts to certain sites that appear on your home screen, and creating them is pretty simple:

• Navigate to a website in Safari.
• Tap the “share” button at the bottom of the screen.
• Scroll to the bottom of the menu.
• Tap the “Add to Home Screen” button.
• Enter a title for the website.
• Ensure the URL is correct (usually, you’ll want it to lead to the site’s homepage).
• Press “Add,” and a new icon should appear on your home screen.

For some websites, this will simply open the website in a browser, while others will create a full app-like experience that really feels like a separate app, though it still runs in-browser.

How do you enable web app notifications in iOS?

Once you’ve created a web app, enabling notifications will vary from site to site, although Apple notes that the notifications will usually be enabled through some form of “subscribe” button presented on the site. After tapping this button, an iOS notification will confirm your selection, asking if you want to enable notifications for the web app.

Once these notifications have been enabled, they can be adjusted or disabled in the Notifications section of your settings, just like any other app.

How-To Geek

Safari on mac, iphone, and ipad will allow web notifications.

Your changes have been saved

Email is sent

Email has already been sent

Please verify your email address.

You’ve reached your account maximum for followed topics.

Apple's Safari web browser has lagged behind some features in recent years, especially with background services. After years of waiting, it seems like Safari will finally support web push notifications on all platforms.

Following today's WWDC event , Apple published a post on the WebKit Blog explaining what's new in the Safari 16 Beta. Perhaps the most surprising addition is Web Push support, which is already functional on the macOS Ventura beta release. The feature will allow web sites and web apps to send push notifications, even when they are not open.

"Web Push is coming to Safari 16 on macOS Ventura," Apple said in the blog post. "This lets you remotely send notifications to users of your websites and web apps --- and deliver those notifications even when Safari isn't running. It uses the same combination of web standards you may be familiar with from other browsers: Push API and Notifications API, along with Service Worker."

Similar to Firefox , Safari will only allow a website to show a prompt to enable notifications after you've interacted with the page --- for example, you won't see the popup message right after a page loads, but you might see one after you click a link or button. That won't stop the pages from showing buttons in the page for enabling notifications, but it will prevent Safari itself from spamming you.

Safari on macOS has technically supported push notifications since Mac OS X 10.9, but Safari's notifications worked differently than push notifications other browsers --- sites had to register for a paid Apple developer license, and the technology for sending alerts wasn't similar at all. This new implementation uses the same push standard that every other browser uses, and sites don't have to pay for Apple developer accounts to provide visitors with notifications.

Importantly, Apple says Web Push will arrive on the iPhone and iPad sometime in 2023. That's a massive win for web apps on mobile Apple devices --- you could always use alternative browsers on Mac if you needed push notifications, but Apple doesn't allow third-party browser engines on iPhone and iPad. Web Push will make Progressive Web Apps better than ever on iPhone and iPad, as long as Apple doesn't introduce any strange limitations or missing features.

Source: WebKit Blog

• Do Not Sell My Personal Info

•  ⋅ 

Web Push Notifications Coming to iOS: What This Means

Web Push, a multi-standard notification service for time-sensitive and high-priority events will be available for Safari 16 on macOS Ventura in October.

WebKit’s message alert service Web Push will soon be supported by WebKit for users of Apple devices, according to a tweet from Jen Simmons , a member of the Safari and Webkit web developer experience team.

Web Push is an opt-in notification service, which will require it to ask users for permission before sending notifications. No exact date was given for the release on macOS Ventura. It will be available for all users, with no Apple Developer Program membership required.

This addition comes ahead of the previous release date Apple announced , which had Web Push becoming available on its devices sometime next year. The announcement comes on the same day Safari 16.0 shipped for iOS, macOS Monterey, and Big Sur.

Web Push Allows Multiple Standards to Safari Notifications

Developers have been able to send push notifications on Safari for some time, but previously these followed a different standard.

The inclusion of Web Push support means Safari applications will now be able to send notifications with the same combination of web standards as other browsers. In other words, if a developer has coded notifications to web standards, they will no longer have to add additional lines of code or make any changes for their application to work in Safari.

Some standards that work with Web Push include Push API, Notifications API, and Service Workers. Web Push for Safari will use the same Apple notification service that powers Native Push on all iOS devices.

New end-point URLs will send notifications from subdomains of push.apple.com.

Web Push One Of A Number of WebKit Additions to Safari

WebKit is an open-source web browser engine used by many macOS, iOS, and Linux applications. In a blog post released on September 12, Simmons highlighted all the engine’s new features that will be available in Safari 16.0.

These include passkeys to provide an easy and secure way to log in, container queries, which will allow developers to adjust the layout and styling of items on a website based on size, rather than viewport, and accessibility improvements.

A feature of particular interest for ecommerce companies is the addition of Merchant Token support in Apple Pay. This provides a “more efficient way to support recurring payments, support for multi-merchant payments, and a way to pay multiple merchants of record in one transaction,” according to the blog post.

  Safari 16 also supports Order Tracking, enabling online merchants to provide customers with detailed order and shipping information via Apple Wallet.

Featured image: DANIEL CONSTANTE/Shutterstock

An expert in all things digital marketing-related, Brian has been writing about SEO, social media, integrated campaigns and PPC for ...

New Safari features will make iPhone web apps feel more like native apps

Apple’s Safari browser in iOS and iPadOS 16.4 is gaining support for features like web push notifications, making iPhone web apps work more like native apps.

The browser now supports new technologies like web push notifications to improve the experience of using Progressive Web Apps (aka web apps) on the iPhone.

Apple also has relaxed some of the restrictions related to third-party browsers, which are now permitted to add web apps to the Home Screen.

Safari is adopting several new web features

• Safari will support push notifications from web apps such as Google Maps, Uber and Instagram. Once approved, web notifications will show up in the Notification Center and on the Lock Screen, just like notifications from native apps.
• Third-party web browsers like Google Chrome can now add web apps to the Home Screen. Before iOS 16.4, only Safari could do that.
• Extension syncing will ensure you use the same Safari extensions on your iPhone, iPad and Mac, making the user experience more consistent.

Web push notifications

Web apps won’t be permitted to send you notifications without permission. Web notifications will only work for web apps you’ve added to your Home Screen. Furthermore, web developers must explicitly enable support for this feature.

Additionally, you’ll need to turn on notifications in the web app’s settings and respond positively to a prompt asking whether you’d like to allow notifications.

Brady Eidson and Jen Simmons, WebKit blog :

A web app that has been added to the Home Screen can request permission to receive push notifications as long as that request is in response to direct user interaction—such as tapping on a Subscribe button provided by the web app. iOS or iPadOS will prompt the user to give the web app permission to send notifications.

From that moment, notifications from said web app will appear in the Notification Center, Daily Summaries, on the Lock Screen and your paired Apple Watch alongside notifications from native apps (this is already supported on macOS).

Web apps will display the number of unread notifications on icon badge, just like native apps. You’ll be able to manage web notifications and how they appear in your notification settings, just like you would notifications for native apps.

You will also be able to filter web notifications using Focus modes.

Adding web apps to the Home Screen

With iOS 16.4, you can add a web app to the Home Screen using a third-party browser like Chrome. Before iOS 16.4, only Safari could add a web app to the Home Screen. You’ll choose Add to Home Screen from the share sheet, which will bring up an interface to add a web app to your Home Screen.

Saving a web app to the Home Screen ensures it launches in fullscreen, with no browser interface visible. Another significant change: Such web apps will launch in the third-party browser that added them to the Home Screen.

Previously, these things opened exclusively in Safari.

Developers can even provide an iOS-sized icon for their web app to appear on the Home Screen. Yet another exciting change: you can add multiple instances of the same app to the Home Screen.

iPhone web apps are about to become much more powerful

Summing up, Safari in iOS 16.4 and iPadOS 16.4 has adopted several web technologies, including the Push API, Notifications API, Badging API, WebCodecs API, Screen Wake Lock API, Import Maps, Media Queries, Service Workers, additional codecs for video processing (AV1), device orientation APIs and more.

The move will make web apps on the iPhone behave much more like their native counterparts. Web apps will be able to automatically adapt their interface between portrait and landscape modes, prevent your device from going to sleep when using a web app, and more. All told, there are 135 new features for Safari in iOS 16.4.

Useful Safari tutorials

• How to fix Safari tabs disappearing on iPad and iPhone
• How to show the full URL in the Safari address bar
• How to pin tabs in Safari on iPhone, iPad and Mac
• How to download videos from Safari on iPhone
• How to customize Safari on iPhone and iPad

[Full Guide] iOS Web Push Notifications: Overview, Set Up, and Optimization Practices in 2024

• EngageLab /
• [Full Guide] iOS Web Push Notifications: Overview, Set Up, and Optimization Practices in 2024 /

Jacob Morrow

2024-04-30 14:47:37

With the release of iOS 16.4, Apple empowered businesses to start engaging with customers with iOS web push notifications. This was a much-awaited feature that Apple announced during WWDC 2022 . Now, web push notifications are available for Safari, Edge, and Google Chrome browsers on iPhone/iPad with iOS/iPadOS 16.4 or later.

Web push notifications have proven to offer higher engagement and click-through rates than other notifications. So, if you also want to leverage iOS web app push notifications , then you are reading the right article. In this guide, we will uncover all about web push notifications, including the working principle , set-up instructions , and optimization practices . So, let's head right to it!

Part 1. All You Need to Know about Web Push Notifications

iOS 16 was announced by Apple on June 6, 2022, at the Worldwide Developers Conference (WWDC) and released on September 12, 2022. It brought the biggest update to the Lock Screen, the option to edit in Messages, introduced iCloud Shared Photo Library, updated notifications, and much more. Later on, it also introduced iOS web push notifications with the release of iOS 16.4 in March 2023.

1. Web Push Notifications: Definition and Functionality

Web push notifications are messages/notifications received by users who have opted to receive such updates from a website or web application. The notifications are small alerts that appear in the same way as the notifications of other apps directly on the user's device.

For example, a website can send a brief web push iOS notification to update users about the new feature update or inform them about the limited-time offer.

In simple words, the main functionality of web push notifications is to serve as an instant communication channel between the website and the user. It provides a way for websites to alert users about offers, convey messages, or give other useful information.

2. Web Push Notifications vs Other Types of Notifications: Key Differences

Web push notifications are similar to app push notifications but a lot different than email and SMS notifications. Let's shed light on the key differences between web push notifications and other types of notifications:

Web push notifications can appear on the notification bar of users' devices even when they are not using the website. On the other hand, email notifications land in email inboxes, while SMS notifications are sent to phone numbers.

Web push notifications remain visible on the user's device until they are removed. Email and SMS notifications can go down in the list if the user receives more emails or SMS.

Web push notifications are instantly delivered to the user's device. In contrast, email and SMS notifications can experience some delays.

Web push notifications are only sent to those users who have opted-in for receiving such notifications. However, email and SMS notifications are often sent without prior consent in many countries. There are now tighter regulations regarding sending unsolicited notifications, but some parts of the world still have relaxed regulations.

3. New Updates in iOS 16 & The Impact on Web Push Notifications

As mentioned earlier, the release of iOS 16.4 brought web push notifications into the iOS ecosystem. Safari, Google Chrome, and Edge became able to support web push notifications for web apps on the home screen.

This feature was short-lived for EU users, as Apple removed the support for web-push notifications with the iOS 17.4 release to comply with the EU's Digital Markets Act (DMA). The rest of the world can still enjoy iOS 16 web push notifications. The next parts discuss the working principle of mobile web push notifications on iOS devices and how to set them up.

Part 2. How Does Web Push Notifications Work On iOS 16 and later?

Since Apple prioritizes user privacy and experience, the working principle of iOS web push notifications is a bit different. To protect users from receiving frequent opt-in pop-ups, iOS requires users to add websites to the home screen to show intent. This can be easily done by users using the "Add to Home Screen" button on the share screen.

After this, the user can then receive a prompt asking to subscribe for push notifications. Once the user opts in, the web push notifications will start showing up in the notification center and lock screen.

Limitations of iOS about Web Push Notifications

The major limitation with iOS 16 web push notifications is the creation of the web app. Users have to first create web apps for the websites on the home screen. Only then, they can receive the prompt to subscribe for push notifications. Although this approach is best to protect the interests of iOS users, it lowers the number of users actually opting for mobile web push notifications on iOS.

Part 3. How to Easily Set Up Web Push Notifications on iOS [No-code]

Now that we have cleared the basics of iOS web app push notifications, the next thing to focus on is how to easily set up web push notifications on iOS without coding. This is where EngageLab comes into action.

EngageLab is a leading customer engagement platform. It empowers businesses to send real-time and accurate web push notifications for a wide range of scenarios, such as promotion notifications, service change notifications, content update reminders, etc. Besides that, it offers a seamless way to create and send web push notifications with a wide range of customization options.

Here's how to use EngageLab to set up iOS web push notifications:

• Step 3. When you enter the subsite for the first time, you have to fill in the application name and click Confirm . Afterward, click Enter to access the application and use the subsite.
• Step 6. If everything is clear, click Confirm to create the push task successfully. Alternatively, you can also create a custom message by selecting it from the left sidebar.

That's it! This way, EngageLab provides a powerful yet click-based interface to set up and create mobile web push notifications for iOS.

So, why think more? Set up your EngageLab account and follow the above steps to create your first iOS web push notification.

Tips: How to Optimize Web Push Notifications for Mobile Web on iOS

iOS web push notifications are an excellent way to engage and convert website visitors to loyal customers. However, it requires a strategic mindset and engaging content to make notifications worth it to users. From this perspective, below are a few best practices for optimizing mobile web push notifications on iOS:

Segment Your Audience

Different types of users have different preferences. Some users prefer once-monthly alerts, while others are comfortable with frequent push notifications. Secondly, the notification content should also match the interests and needs of each user. For that, the best approach is to segment your audience.

You should segment your audience based on their demographics, behavior, and preferences. Attribute the tags and keep them updated in real-time. Once the audience is segmented, tailor notifications for every audience segment with personalized content.

Strategize Sending Frequency

One of the top reasons why users unsubscribe from iOS web push notifications is excessive notifications. You have to be strategic about your sending frequency which maximizes engagement with users without disturbing them. For example, if you want to send a sales alert, don't send it multiple times a day. Therefore, see what sending frequency works best for your users and plan web push iOS notifications accordingly.

Always Add Value

Keep the iOS web app push notification clear, short, and to the point, but don't miss out on adding value. The notification should be able to grab the user's attention at a glimpse, and it can happen with the right action elements in the notification. For example, "20% off on your favorite sneakers!", "Try out the new product/feature before anyone else", and similar others are meant to make notifications valuable and special for users.

Personalize

Today's users like personalization in all interactions they have with a business. When it comes to web push notifications in iOS, personalized notifications can make an impact. For personalized notifications, you have to look into different factors, like geolocation, contextual timing, user preferences, user behavior, and similar others. Therefore, opt for personalized push notifications to have a 4x higher open rate.

Timing your iOS 16 web push notifications is also very critical. You have to find the ideal moment when it is very likely that the user will engage with the push notification. For that, you have to analyze when the users are most engaged with your web app and when they don't visit at all. If you are unsure about it, you can test out different timings and then find the optimal ones.

Integrate Rich Message Formats

You need web push notifications to be such that users are compelled to open them. Other than all the above best practices, make your messages incorporate rich media elements, like emojis, URLs, GIFs, images, etc. They help to cast an immediate impact and urge users to open them.

Marketers now have plenty of ways to engage with users. Web push notification is one such effective marketing strategy that marketers can now leverage for iOS users, particularly since the release of iOS 16.4. All it requires is to be strategic with the push notifications to maximize the outcomes. Therefore, it's time that you also implement and optimize your web push notifications on iOS. So, set up your iOS web push notifications with EngageLab all-in-one web push service and uplift your marketing dynamics.

Related Articles

Master iOS 18 Priority Notifications and Summaries: All You Need to Know

Are you looking to learn more about iOS priority notifications? Here is a detailed guide that will hep you understand how they work and benefits in detail.

How to Build a Customer Engagement Strategy for Success

An effective customer engagement strategy can make a difference for your business. Discover successful examples of how to engage your customers and gain a competitive advantage that will help your company grow.

What are BIMI Emails & How to Set Them Up?

BIMI email authentication helps businesses and brands to make their emails stand out and increase open rates. Explore how to set up BMI emails in EngageLab.

Live Activities iPhone: Enhance Your App with Real-Time Updates

Live activities iPhone can transform your app’s user experience. In this iOS live activities guide, you will learn more about this tool and how you can incorporate it into your own iOS application.

[Latest] The 10 Best Email Marketing Apps For Shopify

Are you looking for the best email marketing app for Shopify? Here is a detailed guide that will help you find the right email marketing tool for Shopify that will help you grow your business.

How to Implement Progressive Web App Push Notifications?

PWA push notifications are vital in reaching a web app's target audience and increasing engagement. Read the article to learn about PWA push notifications.

World-leading Customer Engagement Platform

• WhatsApp Business API
• Developer Documentation
• Privacy Policy
• Service Agreement
• Company Profile

Copyright © 2024 Metaverse Cloud. All rights reserved.

Your browser version is too old

In order to get the best browsing experience on the website, we recommend that you upgrade the latest browser

Tutorial: How to Send Web Push Notifications in iOS Safari

A live demo can be found at ios-push-notifications-main-adamjberg.engram.sh . If you need a quick and easy way to deploy a website, check out engram .

The final code for this tutorial can be found here .

The day is finally here. Web push for web apps on iOS and iPadOS will be made available in iOS 16.4. If you are impatient like me, you can get access to the iOS 16.4 Beta by signing up for the Apple Beta Software Program . iOS 16.4 is expected to be released in March 2023, so you shouldn’t have to wait much longer to get access to this newly added functionality.

Apple didn’t provide a whole lot of information as to how to actually get this working, so I’ve gone through the effort of figuring it out put together the smallest example possible to get going. The first part covers creating a notification using the Notification API exclusively from the client side. The next section will build off of that and show how to trigger a notification from a backend nodejs server.

Client Side Notifications

We start with a very basic html page to load up our script and manifest files and a button that will trigger the notification permission request. Safari requires user interaction in order to request this permission.

site.webmanifest

The notifications only work when your website is added to a user’s home screen. This webmanifest file is a basic start that you can fill in with the required details for your application. If you have an icon you’d like to use, you can use this favicon generator to create the required icon sizes and web manifest file.

First we register a service worker (this is required by iOS Safari to send notifications). Then we set up a click listener on the subscribe button. On click, we request permission to send the user notifications. If the user grants access, we can immediately test the notification by calling registration.showNotification .

Create serviceworker.js File

It can be completely empty for now. Just needs to exist in order to meet the service worker requirements.

Testing This on Your Device

Enabling the notifications feature in ios 16.4 safari beta.

I struggled for a while to figure out why these notifications weren’t working. While this is in beta, it seems like Notifications are turned off in Safari by default. You can enable them by going to Settings > Safari > Advanced > Experimental Features. Scroll down to “Notifications” and turn the toggle to on if it is not already on. I suspect this will be defaulted to on when iOS 16.4 is officially released, but if you are trying this out with the beta, it is likely you will need to perform this step.

HTTPS Connection

Testing this on a real device requires an https connection. You will need to deploy your code in some way that allows it to be accessed from your phone with an https connection.

You can find a live example running here . Pressing the subscribe button won’t do anything if you just have the page opened from your browser. You will first need to click the share button and then “Add to Home Screen”. Open the app that now shows on your home screen and press the subscribe button. The app will ask for permission to send notifications and once granted immediately send the test notification.

Server Side Push Notifications

Create express application, install required dependencies, generate vapid keys.

This will generate something like:

Create .env File

Copy the public and private keys and paste them in a .env file. The web-push also requires an email address, so add this as well.

I’ve boiled this down to the bare minimum, but it is likely you will have some concept of a database and need to store subscriptions specific to users, etc. This basic API allows the client side to subscribe to notifications by POSTing to /save-subscription and then a notification can be triggered by making a GET request to /send-notification .

Update index.js

Update serviceworker.js.

Finally we add an event listener in the service worker to detect when a message has been pushed. We pull off the title and body and call the same showNotification function used above.

This announcement is a big step for Progressive Web Apps (PWAs) on iOS. Notifications were probably the number one cited reason companies reached for a native application. Despite the plethora of news articles about this announcement, I couldn’t find a single up to date resource on how to actually implement this. So hopefully the time I spent putting this together saves you some time on the topic.

https://web.dev/push-notifications-subscribing-a-user

Subscribe to Monthly Newsletter

3 lines of code shouldn't take all day.

Reflections on my time at Electronic Arts and techniques used to improve iteration times in video game development

Hey Siri, We're Breaking Up

Motivations behind switching from a smart phone to a feature phone

Taking Flight Without a Smart Phone

Reflections after one month with a feature phone

How to Replace Webpack in Create React App With esbuild

• Become a Contributor

Enable Safari Push Notifications on iOS: Step-by-Step Guide

• Last updated on April 18, 2024

Push notifications are the most efficient and fastest way for publishers to reach out to their readers. These notifications have been pretty straightforward to enable and access on the desktop and on Android smartphones. However, iOS didn’t offer this ability. Things have changed now and Apple has introduced  Safari push notifications in iOS 16.4 .

So, why should you care you ask? A significant chunk of website visitors use an Apple iPhone, and can now be reached via  push notifications . According to StatCounter, iPhones account for 28% market share globally, now that’s a healthy chunk of the audience you can reach out to. If you are a US-based news publisher, the metrics are completely different. In the US, iOS accounts for over a whopping 56% market share followed by Android at 42%. If iPhone users are a sizeable chunk of your audience, here is how you can help them receive push notifications on their smartphones.

Enabling Safari Push Notifications on iOS

If you want to reach out to your audience on iOS devices such as the iPhone and the iPad, you will need them to enable Push API in Safari settings and then add your website to their home screen. I’ll break this down into two steps.

Enable Push API on Safari

For readers to receive push notifications they need to enable the Push API toggle in Safari settings. This is a one-time step and isn’t required to be done for every website.

• Go to  Settings  and then scroll down to  Safari .
• Click  Advanced  and then  Experimental Features
• The reader has to switch on the  Push API  toggle.

The user is now ready to receive push notifications on Safari. They now have to add your website to get notifications.

Follow these steps to get users to get your readers to add your website to their home screen.

• The reader must use the Safari browser on an Apple iPhone running iOS 16.4 or above.
• In Safari, get them to click the  Share  button and scroll down to the  Add to home screen  option.
• Users can then save the app to their home screen.
• Once the app is on their home screen they can now click it to access your website.
• They need to click subscribe, followed by accepting the default iOS prompt for notifications.
• All done, your subscriber can now receive notifications on their iPhone.

This is a complex process and will need you to handhold your reader through this process. For starters, you can add a banner on the website prompting iPhone users to enable push notifications. You can reach out to your repeat users using an iPhone first since they are more likely to be willing to go through this entire process. They are your loyal users after all.

Getting your readers to add your website to the home screen is a big win in itself and is likely to increase repeat visits to your website.

You can try a bottom banner for Safari on iOS like the one we see here. Check it out on  GitHub

We expect Apple to enable Push API by default on Safari opening up a new audience for news and media publishers to target. It’s time to start reaching out to your audience on iOS devices right away.

Aditya Shenoy

Best poll plugins for news and media publishers, essential mobile optimisation strategies for news and media publishers, internal linking best practices for news websites.

• How to Unsubscribe from Browser Push Notifications Easily?
• Top 25 Google AdSense Alternatives For Your Site in 2023
• Easy Understanding of Web Protocols – HTTP and HTTPS
• Firebase Cloud Messaging (FCM) – Everything You Need To Know
• What Are Silent Notifications?
• 111 Top Ad Networks For Media And Content Publishers
• Best Time of Day To Send Push Notifications {2023}
• 8 Best CPM Ad Networks for Publishers in 2024
• iOS Push Notifications on Web Is Now Live With iOS 16.4
• Safari Push Notifications- Everything You Need To Know
• Ad Tech (3)
• Android push notifications (4)
• App push notifications (5)
• audience engagement (6)
• audience growth (1)
• best seo plugins (1)
• best wordpress seo plugins (1)
• Browser Push Notification (77)
• iOS push notifications (5)
• iZooto Updates (35)
• Messenger Push Notifications (5)
• mobile ad network (1)
• Opinion (5)
• Publisher Guide (46)
• Publisher Monetization (9)
• Publisher Strategies (47)
• seo plugins (1)
• Spotlight (1)
• startup culture (1)
• startups (1)
• Uncategorized (36)
• Website Improvement (3)
• wordpress (1)
• wordpress plugins (20)

Get More Stuff Like This In Your Inbox

Stay up-to-date on topics of your interest. Subscribe now to join 10,000+ marketers who receive high-quality articles every fortnight.

Join The List!

Subscribe to join our list of 10,000+ marketers and receive high-quality articles on topics of your interest in your inbox every fortnight

Related Posts

If you are a news and media publisher, nothing beats having access to a solid poll plugin to boost audience engagement. After all, an engaged

With the growing popularity of smartphones, optimizing websites for mobile use for News and Media Publishers is no longer an option, but a necessity.  There

News websites are constantly updated with fresh content- ranging from breaking news to in-depth analysis and thought-provoking commentary. Multiple articles on varied topics are frequently

• Steller Subscription Experience
• Audience Engagement Guide
• Content Engagement
• Website Engagement Tools
• Web Push Notifications Guide
• Messenger Push Notifications Guide
• App Push Notifications Guide
• Push Notification Marketing
• Push Notifications Examples
• Best Time To Send Push Notifications
• Understanding Your Audeince
• Engaging Your Audience
• Push Notifications Advertising Guide
• Overcoming Monetization Challenges
• Checklist For Push Monetization
• Monetization Strategies
• Dynamic Paywall
• Best Paywall Solutions
• Exit-Intent Recommendations
• Show Latest
• Magic Notifications
• Segmentation
• Personalization
• RSS Automation
• Web Push Notifications
• Messenger Push Notifcations
• App Push Notifications
• Email Newsletter
• On-Site Interactions
• What’s New
• iZooto vs OneSignal
• iZooto vs Feedify
• iZooto vs Push Engage
• iZooto vs SendPulse
• iZooto vs Aimtell
• iZooto vs Pushnami
• iZooto vs Pushly
• Switch To iZooto
• Success Stories

• Testimonials
• Copyright Terms
• Privacy Policy

Discover more from iZooto

Subscribe now to keep reading and get access to the full archive.

Type your email…

Continue reading

How To Set Up Web Push Notifications

Last updated on September 5, 2024

Web push notifications make it possible to reach your audience without designing a labor-intensive app. It’s never been more critical to reach your audience at the right moment, and web push notifications give you a direct way to do just that.

Web push notifications are great for all kinds of customer communications, whether that’s promoting eCommerce sales, pushing out the latest news, or alerting customers about potential outages.

It’s much easier to set up web push notifications than to build a native app, but it still requires some technical know-how. Check out this guide to understand the basics of web push notifications and how to set them up on your own website.

In this article:

Understanding Web Push Notifications

Step-by-step guide to setting up web push notifications.

• Powering Up Your Engagement with Web Push Notifications

Frequently Asked Questions

Web push notifications allow websites to send real-time updates to users, even when they aren’t on your website . This technology leverages the push notification system commonly associated with mobile apps, bringing it to the web for a more seamless user experience. Best of all, there’s no need to create a mobile app to enjoy the benefits of web push notifications , giving you the best of both worlds.

Web push notifications use a combination of browser APIs and server-side scripts to push notifications to users’ mobile devices. They rely on three components to push notifications to users’ devices:

• Service worker: These are JavaScript files that run in the background and respond to push events from the server.
• Push API: The push API delivers the message from the server to the service worker. This is what makes real-time communication with your users possible.
• Notification API: When the service worker gets a push message, it uses the notification API to create a visual alert. With this API, you’re free to customize the look and text of the notification , including the title, body, icon, and action buttons.

Once you have these components set up, you’re ready to go. Your website will ask the user for permission to send notifications.

If they grant permission, your site registers a service worker, a background script that operates independently of your website. When your server sends a message, the service worker takes it and displays it on the user’s device.

Setting up web push notifications may seem complex at first, but you’ll have them up and running on your website in no time with the right tools and process.

1. Pick a Push Notification Service

First, choose a service like MagicBell to start sending notifications. It’s as easy as signing up for an account, installing the SDK on your website, and configuring notification settings within the MagicBell dashboard. With MagicBell, you can send notifications to all major browsers , including Chrome, Firefox, and Safari.

2. Set up the Service Worker

Service workers are a must when sending and displaying notifications. You first need to register a service worker on your site by adding a JavaScript file to your website’s root directory and registering it within your site's code.

It should look something like this:

Define how the worker should behave once it’s installed. You’ll likely need to set up a cache for offline support and tell the service worker how to handle incoming push events.

3. Ask for Permission

Always ask for explicit permission before sending push notifications. Instead of bombarding users with a “Do you want notifications?” message right when they land on your site, wait until they engage with your content first.

Instead of relying solely on the browser’s default permission prompt, consider using a custom prompt that explains the value of subscribing to notifications. This can be a small banner or pop-up that appears on the page. Once the user interacts with your custom prompt, trigger the browser’s permission request. That should look something like this:

4. Personalize and Test

At this point, you’ve created the infrastructure for sending notifications. Here’s the fun part! Create the content for your notification , including the title, message, icon, and any actions you want users to take.

As always, check your notifications before going live. Send test notifications to ensure they display correctly across different browsers and devices or use a tool like webpushtest.com to demo standards-based web push notifications on all platforms — even iOS. 

Powering Up Engagement with Web Push Notifications

Take control of your embedded inbox with our new dashboard feature. Customize it in under 5 minutes and elevate your website's functionality. Try it now! pic.twitter.com/Jn7xGnlLbt — MagicBell (@magicbell_io) February 14, 2024

Web push notifications give users the immediacy of a native app without downloading yet another app. Businesses also benefit from web push notifications because there’s no need to create a pricey native app. They’re incredibly beneficial , but setting up these notifications requires technical skill.

Whether you’re a total newbie or a notification pro, MagicBell simplifies the notification experience . Lean on our platform to build an all-in-one notification inbox across all channels — including email, Slack, and more. Create a MagicBell account now to start sending push notifications today.

What happens if a user clears their browser cache or deletes cookies?

Clearing a browser cache or cookies can affect a user’s subscription to web push notifications, especially if they remove the service worker. However, this depends on how your website handles push notifications. Every solution is different, so check to see if your push notification service requires prompting users to resubscribe.

Can users unsubscribe from web push notifications?

Absolutely. Not only is this a best practice for user experience, but it’s also the law. Like email and SMS messages, users must have complete control over their web push notification subscriptions. They can unsubscribe anytime by adjusting their browser settings or interacting with the notification, which might include an "unsubscribe" option.

Are there any limitations on the size or content of a web push notification?

Yes. Most browsers limit the title to 50 to 100 characters and the message body to up to 250 characters. Generally, you can only attach a single image to notifications and can’t include interactive features, like videos, in the message directly.

Keep Reading

If you enjoyed the post you just read, we have more to say!

Notification Programming Guide for Websites

• Table of Contents
• Jump To…
• Download Sample Code

Configuring Safari Push Notifications

In OS X v10.9 and later, you can dispatch Safari Push Notifications from your web server directly to OS X users by using the Apple Push Notification service (APNs). Not to be confused with local notifications, push notifications can reach your users regardless of whether your website or Safari is open.

To integrate push notifications in your website, you first present an interface that allows the user to opt in to receive notifications. If the user consents, Safari contacts your website requesting its credentials in the form of a file called a push package . The push package also contains notification assets used throughout OS X and data used to communicate to a web service you configure. If the push package is valid, you receive a unique identifier for the user on the device known as a device token . The user receives the notification when you send the combination of this device token and your message, or payload , to APNs.

Upon receiving the notification, the user can click on it to open a webpage of your choosing in Safari.

Registering with Apple

You are required to register in the Certificates, Identifiers & Profiles section of your developer account to send push notifications. Registration requires an Apple developer license . For more details on registering with Apple, see Developer Account Help .

When registering, include the following information:

Identifier . This is your unique reverse-domain string, such as web.com.example.domain (the string must start with web. ). This is also known as the Website Push ID.

Website Push ID Description . This is the name used throughout the Provisioning Portal to refer to your website. Use it for your own benefit to label your Website Push IDs into a more human-readable format.

The registration process looks like the form in Figure 2-1 .

After you have successfully entered this information, the certificate you use to sign your credentials and to push notifications becomes available to download.

Certificate Revocation

To protect OS X users, Apple reserves the right to revoke your certificate if you abuse the push notification service or fail to adhere to Apple’s guidelines . Certificate revocation results in the inability to issue new push notifications.

If your push certificate has been compromised, you can manually revoke it from Apple’s servers in the Certificates, Identifiers & Profiles section of your developer account, located at https://developer.apple.com/account .

Building the Push Package

When a user is asked for permission to receive push notifications, Safari asks your web server for a package. The package contains data that is used by the notification UI, such as your website name and icon, as well as a cryptographic signature. The signature verifies that your notification hasn’t been intercepted by a man-in-the-middle attack and that it is indeed coming from a trusted source: you.

You create the push package by first populating a folder with a specific set of files. The push package contains a website JSON dictionary, a set of icons (referred to as an iconset ), a manifest, and a signature. Listing 2-1 exemplifies the complete push package file structure.

Listing 2-1   File structure of a push package

After the required files are in place, compress the folder into a ZIP archive to create the finalized push package. The push package is a static file that should live on your server. Return the push package from your web server in the location you specify in Downloading Your Website Package .

The Website JSON Dictionary

The website JSON dictionary named website.json contains metadata used by Safari and Notification Center to present UI to the user and to communicate with your web service.

The keys of the website JSON dictionary shown in Listing 2-2 are described in Table 2-1 .

Listing 2-2   A sample valid website.json file

The Iconset

The iconset is a directory called icon.iconset that contains PNG images in varying sizes. The images in your iconset populate the icons displayed to the user in the permission prompt, Notification Center, and the notification itself. Because your icon is static, it is unnecessary to include it in every push notification. Instead, your icons are downloaded once from your server and stored on the user’s computer. Icons in the icon set are named with the convention shown in Listing 2-1 with the dimensions each name implies.

The Manifest

The manifest is a JSON dictionary named manifest.json that contains an entry for each file, where the local file path is the entry’s key, and a dictionary object is the entry’s value. This dictionary contains the hashType and hashValue , which is the file’s SHA512 checksum; for example:

Every file in the package must appear in the manifest, except for the manifest itself and the signature. Each key and value must be a string and a dictionary, respectively.

To manually generate a SHA512 checksum, type shasum -a 512 <filepath> in a Terminal prompt. The create_manifest function in the attached createPushPackage.php companion file (the link is near the top of the page) iterates through each file and generates a checksum for you.

The Signature

The signature is a PKCS #7 detached signature of the manifest file. Sign the manifest file with the private key associated with your web push certificate that you obtained while registering with Apple. In PHP, you can do this with the openssl_pkcs7_sign function. The create_signature function in the attached createPushPackage.php companion file (the link is near the top of the page) shows how you can do this.

If the contents of your push package ever change, you’ll need to recompute your signature.

Requesting Permission

There are two important JavaScript functions to keep in mind when dealing with push notifications. The first is a lightweight function that checks the user’s permission level without talking to the server. The second contacts with the server and displays the permission dialog to the user, as shown in Figure 2-2 .

To check the permission level a user has set for your website, call window.safari.pushNotification.permission() with your Website Push ID as an argument. This synchronous call returns a permission object for the given identifier by looking in the user’s preferences. This function does not contact your server.

The permission object contains the keys as described in Table 2-2 .

To request permission to send the user push notifications, call window.safari.pushNotification.requestPermission() . Requesting permission is an asynchronous call.

A description of each argument is as follows:

url —The URL of the web service, which must start with https . The web server does not need to be the same domain as the website requesting permission.

websitePushID —The Website Push ID, which must start with web. .

userInfo —An object to pass to the server. Include any data in this object that helps you identify the user requesting permission.

callback —A callback function, which is invoked upon completion. The callback must accept a permission object with the same structure as described in Table 2-2 .

Listing 2-3   Handling permissions for website push notifications

Configuring Your Web Service Endpoints

When a webpage requests permission to display push notifications, an HTTP request for your credentials is sent to your web server. Similarly, when a user changes their website push notification settings in Safari or System Preferences, an HTTP request is sent to your web server. You need to configure a RESTful web service on your server to respond to these requests accordingly. The web service does not need to be hosted on the same server(s) or domain(s) that serve your webpages.

To properly implement the web service, craft your endpoints as specified in the following sections using the URL fragments listed in Table 2-3 .

Downloading Your Website Package

When a user allows permission to receive push notifications, a POST request is sent to the following URL:

This POST request contains the following information:

In the HTTP body . The same user info JSON object that is passed as the third argument of the requestPermission() call. Use the user info dictionary to identify the user.

When serving the push package, return application/zip for the Content-type header.

Registering or Updating Device Permission Policy

When users first grant permission, or later change their permission levels for your website, a POST request is sent to the following URL:

In the HTTP header . An Authorization header. Its value is the word ApplePushNotifications and the authentication token, separated by a single space. The authentication token is the same token that’s specified in your package’s website.json file. Your web service can use this token to determine which user is registering or updating their permission policy.

Respond to this request by saving the device token in a database that you can later reference when you send push notifications. Also, change the user’s settings in your database to the values indicated by the parameterized dictionary for the device.

If you have an iOS app that sends push notifications, and users log in to your app with the same credentials they use to log in to your website, set their website push notification settings to match their existing iOS push notification settings.

Forgetting Device Permission Policy

If a user removes permission of a website in Safari preferences, a DELETE request is sent to the following URL:

This DELETE request contains the following information:

In the HTTP header . An Authorization header. Its value is the word ApplePushNotifications and the authentication token, separated by a single space. The authentication token is the same token that’s specified in your package’s website.json file. Your web service can use this authentication token to determine which user is removing their permission policy.

Use this authentication token to remove the device token from your database, as if the device had never registered to your service.

Logging Errors

If an error occurs, a POST request is sent to the following URL:

In the HTTP body . A JSON dictionary containing a single key, named logs , which holds an array of strings describing the errors that occurred.

Use this endpoint to help you debug your web service implementation. The logs contain a description of the error in a human-readable format. See Troubleshooting for a list of possible errors.

Pushing Notifications

You send push notifications to clients in the same way that iOS and OS X apps push notifications to APNs. As a push notification provider, you communicate with APNs over a binary interface. This a high-speed, high-capacity interface uses a streaming TCP socket design with binary content. The binary interface is asynchronous.

The binary interface of the production environment is available through gateway.push.apple.com , port 2195. Do not connect to the development environment to send Safari Push Notifications. You may establish multiple parallel connections to the same gateway or to multiple gateway instances.

For each interface, use TLS (or SSL) to establish a secured communications channel. The SSL certificate required for these connections is the same one that’s provisioned when you registered your Website Push ID in your developer account. To establish a trusted provider identity, present this certificate to APNs at connection time.

A JSON dictionary like the one in Listing 2-4 produces a notification that looks like the one in Figure 2-3 . The JSON object must strictly conform to RFC 4627 .

Listing 2-4   A JSON dictionary showing a sample notification payload

The outermost dictionary, which is identified by the aps key, should contain another dictionary named alert . The alert dictionary may contain only the keys listed in Table 2-4 . Custom keys are not supported.

The url-args key specifies an array of values that are paired with the placeholders inside the urlFormatString value of your website.json file. The url-args key must be included. The number of elements in the array must match the number of placeholders in the urlFormatString value and the order of the placeholders in the URL format string determines the order of the values supplied by the url-args array. The number of placeholders may be zero, in which case the array should be empty. However, it is common practice to always include at least one argument so that the user is directed to a web page specific to the notification received.

For a low-level breakdown of notification packets, as well as a code listing of how to send a notification over a binary interface, read Provider Communication with Apple Push Notification Service in Local and Remote Notification Programming Guide .

Troubleshooting

If something goes wrong in downloading your push package or delivery of your push notifications, the logging endpoint on your web service as described in Logging Errors will be contacted with an error message describing the error. Table 2-5 lists the possible errors and steps you can take to fix them.

Also check Web Inspector for errors that might occur in your JavaScript. To learn how to use Web Inspector, read Safari Web Inspector Guide .

Copyright © 2018 Apple Inc. All Rights Reserved. Terms of Use | Privacy Policy | Updated: 2018-04-09

Sending feedback…

We’re sorry, an error has occurred..

Please try submitting your feedback later.

Thank you for providing feedback!

Your input helps improve our developer documentation.

How helpful is this document?

How can we improve this document.

* Required information

To submit a product bug or enhancement request, please visit the Bug Reporter page.

Please read Apple's Unsolicited Idea Submission Policy before you send us your feedback.