ios safari notification api

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.

How to enable Safari push notifications on iPhone or iPad

iOS 16.4 lets you optionally receive Safari push notifications, but the process isn't straightforward.

Back in 2022, Apple promised to introduce a long-overdue feature in 2023: Safari push notification support on newer versions of iOS 16 and iPadOS 16 . And the day has finally come.

If you have a recent iPhone , such as the iPhone 14 Pro Max , 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.

• Launch the Settings app on your iPhone or iPad running iOS/iPadOS 16.4 or later.
• Scroll down and navigate to Safari.
• You will find a Push API toggle at the bottom of the list. Make sure it's enabled.
• Now launch the Safari app and visit the website you'd like to receive push notifications from. Note that the website has to support push notifications for this feature to work. For demonstration purposes, we will be choosing Twitter.
• Tap on the Share button in the middle of the bottom bar
• Optionally rename the web app, then tap Add in the top right corner.
• It will now appear on your Home Screen as a native app. Launch the newly-added web app.
• Find the website's notifications settings and enable push notifications.

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.

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 it in any way. Regardless, it can be done now on newer versions of iOS 16.

• 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 ...

Subscribe To Our Newsletter.

Conquer your day with daily search marketing news.

• Using array.splice

How to send PWA Push Notifications in Safari IOS 16

Keep an eye out for web push on ios and ipados in 2023..

After long delays IOS 16 is finally adding push notifications for PWA's. But how do you actually implement it and make it work with JavaScript?

Starting September 2022 you can add native Push Notifications to your PWA. Until then...

First...you need to turn on Push API in experimental mode on your IOS 15

The Push Notification API is already available in IOS 15, but only in "experimental mode".

While Push API already exists by default it is turned off. So you need to turn it under Settings.

How to enable Push API While waiting for IOS 16 you can turn on Push API on your iPhone by going to Settings , typing Safari in search, click on Safari , scroll all the way down and go to Advanced and tap on Experimental Features . Now scroll down to where it says "Push API", and enable it by tapping on green switch button to turn it on.

Some preliminary setup is required. Here's step-by-step JavaScript tutorial.

Step 1: How To Create and Register a Service Worker (serviceworker.js)

First, create your service worker JavaScript file and place it in root directory of your PWA. I named my service worker serviceworker.js but the name can be anything.

Then, we will need to register this JavaScript file as your service worker.

The serviceWorker object and its method register() reside on the built-in navigator object.

In the next example, let's use JavaScript to check if a service worker is already registered. If not this code will register a service worker . Additionally, you might want to run this code from your DOMContentLoaded event.

More coming soon...

Why was this tutorial written?

When team here at Ghost Messenger heard of this news we got excited and decided to implement it on our PWA. In this tutorial we will explain how we got it to work in our app and hopefully others can follow in our footsteps to install Push API in their own PWA.

The rest of this article is coming soon.

HTML comments above are special tags, they will be replaced with H1 title and your author info. If you don't want to include that in your article delete or modify comment.

Place additional scripts or CSS above tag.

You can create bold text and lists as follows:

Example of an UL list

Example of an OL list

You can create source code tags by wrapping text in back-tick quotes.

You don't have to use p tags to create paragraphs, but you still can.

It's recommended to keep author tag so that readers who come from search engine traffic can also discover your social network links and bio.

Note: You can use regular HTML in this article but be careful not to break anything.

Comments (2) New! (You can now post comments on articles!)

• Apple Watch
• Accessories
• Digital Magazine – Subscribe
• Digital Magazine – Log In
• Smart Answers
• New iPad Air
• iPad mini 7
• Next Mac Pro
• Best Mac antivirus
• Best Mac VPN

When you purchase through links in our articles, we may earn a small commission. This doesn't affect our editorial independence .

iOS 15.4 may finally bring Safari push notifications, for better or worse

The iPhone may have begun as a web app-only device when it launched in 2007, but in 2022, web apps are treated as second-class citizens when it comes to notifications. That may change in a big way in iOS 15.4.

According to Maximiliano Firtman on his blog firt.dev , Apple has laid the groundwork to finally allow Safari push notifications in iOS and iPadOS. While Apple has allowed push notifications through Safari on the Mac for years, it has thus far resisted bringing them to mobile devices. 

Firtman discovered two experimental WebKit features in the iOS 15.4 beta that point to the arrival of web push and web notifications. The two toggles—Built-in Web Notifications and Push API—are disabled by default and aren’t working yet, but Firtman speculates that work on the API is likely ongoing. They could work similarly to Safari on macOS, with sites asking to allow or deny notifications and a new Settings tab that saves your choice. Notifications will presumably be supported on other browsers as well, such as Chrome and Firefox.

Allowing push notifications in Safari would open up the iPhone to loads of extra alerts, as websites would begin prompting users to allow notifications upon visiting. However, opting out will be easy and in some instances, alerts will be useful, such as when a new Wordle game is available. We expect iOS 15.4 to be released in March as there are several new features so far.

Author: Michael Simon , Executive Editor

Michael Simon has been covering Apple since the iPod was the iWalk. His obsession with technology goes back to his first PC—the IBM Thinkpad with the lift-up keyboard for swapping out the drive. He's still waiting for that to come back in style tbh.

Recent stories by Michael Simon:

• Apple addresses predictive emoji ‘bug’ in latest iOS 17.5 beta after outrage
• iOS 18 leak shows off a new visionOS-inspired facelift for the Camera app
• Shocker! Podcaster claims Apple prioritizes paid shows over free ones

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
• Push Notifications

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

Last updated on apr 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 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

Aditya Shenoy

Lists by Topic

• Browser Push Notification (82)
• Publisher Strategies (43)
• iZooto Updates (42)
• Push Notifications (30)
• audience development (23)
• wordpress (23)
• wordpress plugins (18)
• ad tech (11)
• audience engagement (11)
• App push notifications (8)
• Messenger Push Notifications (5)
• web push notifications (5)
• iOS push notifications (3)
• Android push notifications (2)
• Website Monetization (2)
• content management (2)
• Spotlight (1)
• audience retention (1)
• best seo plugins (1)
• iZooto Updates (1)
• startups, startup culture (1)

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

Internal linking best practices for news websites.

News websites are constantly updated with fresh content- ranging from [...]

• Sanjay Kumar
• Apr 15, 2024

5 Ways Publishers Can Monetize Newsletters

Newsletters are owned channels that allow publishers to reach their au[...]

• Vaishnavi Ramkumar
• Apr 03, 2024

Diversify Revenue Streams: 5 Monetization Alternatives for Media Publishers

There are around nine different monetization options considered as the[...]

• Mar 27, 2024

• 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
• 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
• Comscore Partner

© 2023 Copyright iZooto. All rights reserved. 

• Copyright Terms
• Privacy Policy

This website uses cookies. Learn more

Safari Push Notifications: How to Set Up and Use on iOS Safari

X2 Private Limited

14 min read

Understanding Safari Push Notifications

Working mechanism of safari notifications, setting up safari notifications on mac, safari push notifications on ipados, user experience with safari push notifications, developing safari push notifications, enhancements and updates in safari push notifications, focus mode and safari notifications, troubleshooting safari push notifications.

Safari Push Notifications are a feature that allows websites to send notifications to users even when they are not actively using the website. This feature is available on iOS Safari and Mac Safari and can be enabled by users who wish to receive notifications from their favourite websites. Safari Push Notifications are similar to push notifications for apps and display the website icon and notification text, which users can click to go directly to the website.

Enabling Safari Push Notifications on iOS Safari is a simple process that involves adding the website to the home screen and granting permission for notifications. Once enabled, users can receive notifications from websites even when Safari is not running. This feature is particularly useful for websites that provide real-time updates such as news websites, social media platforms , and e-commerce websites.

iOS Safari Push Notifications have been a highly requested feature for some time, and Apple has been working to improve the functionality of this feature in recent updates. With the release of iOS 16, web push notifications were enabled, allowing websites to send notifications to users even when they are not actively using Safari. This update has made Safari Push Notifications more useful and relevant to users, and it is expected that more websites will adopt this feature in the future.

Safari Push Notifications are a way for websites to send notifications directly to users' Mac desktops, even when Safari isn't running. These notifications work similarly to push notifications for apps, displaying the website icon and notification text that users can click to go right to the website.

Safari Push Notifications are triggered remotely via the Apple Push Notification Service (APNs), an Apple-exclusive technology. They are delivered to customers when Safari is not open. Local notifications, on the other hand, are set by a W3C standard and triggered locally using JavaScript.

To enable Safari Push Notifications on newer versions of iOS 16 and iPadOS 16, users must first give permission to receive notifications from the website. Once permission is granted, the website can send notifications to users even when they are not currently browsing the site.

It is important to note that if a website fails to present push notifications to the user immediately after the service worker receives them, Safari may revoke the push notification permission for the site. Therefore, it is crucial for websites to ensure that push notifications are delivered promptly.

In addition to Safari Push Notifications, there are other types of push notifications available, such as web push notifications. These notifications are available on other browsers and platforms, not just Safari. They work similarly to Safari Push Notifications, allowing websites to send notifications to users' devices even when the website is not open.

Overall, Safari Push Notifications are a powerful tool for websites to engage with their users and keep them up-to-date with the latest content and updates. By using this technology, websites can increase user engagement and drive traffic to their site.

Safari notifications are a type of push notification that allows website owners to send notifications to their users even when Safari is not running. These notifications work in a similar way to push notifications for apps and display the website icon and notification text. Users can click on the notification to go directly to the website.

Safari notifications are made possible by the Push API and Notifications API. The Push API is used to subscribe users to receive notifications from a website. When a user subscribes, a unique endpoint is created for that user. This endpoint is used by the website to send notifications to the user.

The Notifications API is used to display the notification to the user. When a notification is received, it is displayed on the user's device. The notification can include an icon, title, message, and action buttons. The user can click on the notification to perform the action specified by the website.

Safari notifications are delivered using the Apple Push Notification service (APNs). When a website sends a notification, it is first sent to the APNs. The APNs then delivers the notification to the user's device. This ensures that the notification is delivered securely and reliably.

To use Safari notifications, website owners need to have a valid SSL certificate and create a push package. The push package contains the website's icon, website URL, and other information needed to send notifications. Once the push package is created, website owners can use the Push API and Notifications API to subscribe users and send notifications.

In summary, Safari notifications are a powerful tool for website owners to engage with their users. They are made possible by the Push API and Notifications API and delivered using the Apple Push Notification service. Website owners can use Safari notifications to send timely and relevant notifications to their users, even when Safari is not running.

Setting Up Safari Notifications on iOS

Safari push notifications are a great way to keep users informed about new content or updates on a website, even when they are not currently browsing the site. Here's how to set up Safari notifications on iOS devices:

• First, ensure that the device is running iOS 14 or later. To check the version, go to Settings > General > About > Software Version.
• Open the Safari app and navigate to the website that you want to receive notifications from.
• Tap the "AA" icon in the top left corner of the screen, then select "Website Settings" from the drop-down menu.
• Scroll down to the "Notifications" section and ensure that the toggle switch next to "Allow Notifications" is turned on.
• You can also customize the notification settings for this website by tapping on "Notification Settings" and adjusting the options as desired. For example, you can choose to receive notifications silently or with a sound, and you can also choose whether to show notifications on the lock screen or in the notification center.
• Once you have configured the settings to your liking, tap "Done" to save the changes.

It's important to note that Safari push notifications are only available on devices running iOS 16.4 or later. Additionally, some older websites may not support push notifications, so it's always a good idea to check with the site owner or developer to ensure that the feature is available.

Overall, setting up Safari notifications on iOS is a straightforward process that can greatly enhance the user experience for websites that support this feature. By following these simple steps, users can stay up-to-date with their favourite sites and never miss out on important updates or content.

Safari Push Notifications are a great way to stay up-to-date with your favourite websites without constantly checking them. Here's how to set up Safari Notifications on your Mac:

• Open Safari and navigate to the website you want to receive notifications from.
• Click on the "Safari" menu in the top left corner of your screen and select "Preferences."
• Click on the "Websites" tab at the top of the window.
• Scroll down to the "Notifications" section and click on the website you want to receive notifications from.
• Select "Allow" from the drop-down menu next to "When visiting other websites."
• You can also choose to customize the notification settings for each website, including the alert style and sound.

Once you've allowed notifications for a website, you'll start receiving notifications whenever there's new content or updates available. You can manage all of your notification settings by going to the "Notifications" section in your Mac's System Preferences.

It's important to note that not all websites offer Safari Push Notifications, and some may require you to subscribe or sign up to receive them. Additionally, if you ever want to stop receiving notifications from a website, simply go back to the "Websites" tab in Safari Preferences and select "Deny" from the drop-down menu next to the website.

In summary, setting up Safari Notifications on your Mac is a quick and easy process that can help keep you informed and up-to-date with your favorite websites. Just remember to customize your notification settings to your liking and be mindful of which websites you allow notifications from.

Safari Push Notifications are a great way for website owners to keep their users informed about new content or updates. With Safari Push Notifications, users can receive notifications on their iPadOS device, even when Safari is not running.

To enable Safari Push Notifications on iPadOS, users need to first subscribe to the website's notifications. This can be done by visiting the website and clicking on the "Allow" button when prompted to receive notifications. Once subscribed, users can manage their notifications preferences by going to the Safari settings on their iPadOS device.

It is important to note that Safari Push Notifications are only available on iPadOS 16.4 or later. To send web push notifications, website owners need to update their webpage to subscribe users and handle notifications and update their server to send push notifications.

Overall, Safari Push Notifications provide a convenient way for website owners to keep their users informed about new content or updates. With iPadOS 16.4 or later, users can receive notifications on their devices, even when Safari is not running.

Safari Push Notifications provide a seamless user experience that allows website owners to engage with their users even when they are not actively browsing their site. These notifications are delivered directly to the user's desktop or mobile device, allowing them to stay up-to-date with the latest news, promotions, and events.

When a user receives a Safari Push Notification, they will see a banner notification on their screen. The banner will display the website's icon and notification text, which the user can click to go directly to the website. The notification will also be added to the Notification Center, where the user can view it later.

In addition to the banner notification, users can also receive Safari Push Notifications on their Home Screen and Lock Screen. On the Home Screen, users can add a website to their device's home screen, which will display the website's icon and notification text. On the Lock Screen, users can see a preview of the notification, which they can swipe to view or dismiss.

Safari Push Notifications also work with Siri Suggestions, allowing website owners to provide personalized recommendations to their users. Siri can suggest websites based on the user's browsing history, location, and other factors. When a user taps on a Siri suggestion, they will be taken directly to the website.

Overall, Safari Push Notifications provide a convenient and effective way for website owners to engage with their users and keep them informed of the latest news and updates. With their seamless user experience and integration with other iOS features, Safari Push Notifications are a valuable tool for any website owner looking to improve their user engagement.

Developers can enable Safari push notifications on their web pages and web apps using the Push API, Notifications API, and Service Workers. With Safari push notifications, users can receive notifications even when their Safari browser is not running.

To send web push notifications, developers need to update their webpage to subscribe users and handle notifications and update their server to send push notifications. Developers can use the Apple Push Notifications Service to send notifications to their website users, right on their Mac desktop.

Safari push notifications work just like push notifications for apps. They display the website icon and notification text, which users can click to go right to the website. Siri can also provide suggestions to users in search, News, Safari, and other apps using on-device information that the app contributes through the Notifications API.

Developers can add web push to the following:

• Home Screen web apps in iOS 16.4 or later
• Webpages in Safari 16 for macOS 13 or later

Developers can generate remote notifications from a server that they manage using Push API code that works in Safari and other browsers.

To get started with developing Safari push notifications, developers can refer to the Apple Developer Documentation and the WWDC22 video on Web Push for Safari.

In summary, developers can use the Push API, Notifications API, and Service Workers to enable Safari push notifications on their web pages and web apps. By updating their webpage and server, developers can send notifications to their website users, right on their Mac desktop.

Safari Push Notifications have been enhanced and updated in recent years to provide a better user experience. At the WWDC 2022 event, Apple announced several new features, including a completely redesigned lock screen with widgets and enhancements to several system apps, including Safari. These enhancements have made it easier for website owners to send push notifications to their users.

One of the most significant enhancements to Safari Push Notifications is the ability to send web push notifications. This feature was introduced in iOS 16 and allows website owners to send push notifications to their users even when Safari isn't running. Users can click on the notification to go directly to the website.

Another enhancement is the ability to sync Safari extensions across devices. This is particularly useful for users who use Safari on multiple devices. With extension syncing, users can easily access their favorite extensions on any device.

Safari Push Notifications have also been updated to support Wing, Apple's new augmented reality platform. With Wing, users can receive push notifications that are relevant to their location. For example, users can receive push notifications about nearby restaurants or events.

In addition, Safari Push Notifications have been updated to support Maps. With Maps integration, users can receive push notifications about traffic conditions, nearby points of interest, and more. This feature is particularly useful for users who are travelling or exploring a new city.

Overall, the enhancements and updates to Safari Push Notifications have made it easier for website owners to send push notifications to their users and for users to receive relevant notifications. These updates have also made Safari a more powerful and versatile browser.

Focus Mode is a feature introduced in iOS 15 that allows users to customize their notification settings based on their current activity or location. This feature can be accessed through the Settings app and enables users to create custom Focus Modes such as Personal, Work, or Sleep.

When a user enables Focus Mode, notifications from certain apps or people can be silenced or allowed, depending on the user's preferences. Users can also choose to have their Focus Mode turn on automatically at certain times or when they are in a specific location.

​ Safari Notifications can also be customized through the Settings app. Users can choose to receive notifications from specific websites or disable them altogether. Additionally, users can customize the appearance and sound of Safari Notifications to better suit their preferences.

Enabling Safari Push Notifications requires users to visit a website and add it to their Home Screen. Once added, users can receive push notifications from the website even when Safari is closed. This feature can be useful for receiving important updates or notifications from websites without having to constantly check them manually.

Overall, the combination of Focus Mode and Safari Notifications provides users with greater control over their notification settings and can help reduce distractions and interruptions throughout the day.

Sometimes, Safari push notifications may not work as intended. Here are some common issues and solutions to troubleshoot Safari push notifications:

Permissions

If a user accidentally denies permission for a website to send push notifications, they won't receive any notifications from that website. To fix this, the user can go to Safari settings and allow notifications for that website. Alternatively, the website can prompt the user to allow notifications again.

Sometimes, a website may not be configured correctly to send push notifications. The website owner should check their code and make sure they are using the correct APIs and certificates. Apple provides a demo of how to send Safari push notifications on their developer website.

If the website owner is still having trouble, they can post on Apple's developer forums to get help from other developers and Apple engineers. The forums are a great resource for troubleshooting Safari push notifications and other development issues.

It's also possible that the user's device is experiencing issues with notifications in general. In this case, the user can try restarting their device or checking their notification settings to make sure they are correctly configured.

Overall, Safari push notifications can be a powerful tool for engaging with users and providing timely updates. By following best practices and troubleshooting any issues that arise, website owners can ensure that their push notifications are effective and helpful to users.

#pushnotificationservices

#social media marketing

#brandawareness

#brandrecognition

#safari notifications

#SafariPushNotifications

Truepush is a web push notification tool that allows website owners and marketers to send real-time push notifications to their website visitors

You may also want to read

The Impact of iOS 17.3.1 Update on iPhone Users: Truepush

Knowledge Base

Beyond the Glass Ceiling: Empowering Tales of Technology Pioneering in STEM Fields

Beyond Traditional Advertising: Modern Approaches to Boost Business Visibility

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.

View in English

More Videos

Streaming is available in most browsers, and in the WWDC app.

Meet Web Push for Safari

Bring better notifications to your websites and web apps in Safari on macOS with Web Push. We'll show you how you can remotely send notifications to people through the web standards-based combination of Push API, Notifications API, and Service Workers.

• Have a question? Ask with tag wwdc2022-10098
• Learn more about bug reporting
• Notifications API
• Search the forums for tag wwdc2022-10098
• Sending web push notifications in web apps and browsers
• Service Worker API

Related Videos

• What’s new in web apps
• What's new in Safari and WebKit

♪ ♪ Brady Eidson: Hello. My name is Brady Eidson. I'm an engineer on the WebKit Architecture team. I am thrilled to introduce you to Web Push in Safari. Web Push lets you remotely send notifications to your web application's users. Here, a notification displays from webkit.org in the upper-right of the screen. Clicking the notification opens a WebKit blog post in a new window. Before I get into other details on how this works, I want to answer a few questions up front I know many of you will have.

Web Push is supported in Mac Safari beginning with macOS Ventura. And Web Push will be coming to iOS and iPadOS next year.

Apple's Safari Push Notifications have been an option for reaching Mac Safari users for quite a while. While it will continue to work, today I'm happy to announce that we have added support for Web Push, and this really is Web Push! The same combination of various web standards as implemented in other browsers. We'll go over those standards more later, but… the most important takeaway is that if you've coded your application to web standards, you won't need to make any changes for it to work in Safari. Of course, if you exclude Safari through browser detection, then you have some work ahead of you. Now would be a great time to switch from browser detection to feature detection, which has always been the best practice. We're using the same Apple Push Notification service that powers native push on all Macs and iOS devices, but no Apple Developer account is required to reach Safari users. We are using new end point URLs for Web Push, which brings up another thing you might be doing to unintentionally exclude Safari. If you tightly manage push end points on your server, make sure you allow URLs from any subdomain of push.apple.com. Moving beyond answers to those important questions, let's get into more detail. First, we'll look at the Web Push experience in Safari from a user's perspective. Then we'll cover the entire Web Push flow, from asking for permission to handling a click on an entry in Notification Center. Finally, we'll see what it takes to add Web Push to an existing web app. But first, the Mac Safari user experience. And I can think of no better way to cover that than with a demo. Here's Safari on macOS Ventura. I have webkit.org open in this browser tab. I need to keep up-to-date with the WebKit open source project, and Web Push is a great way to do that. webkit.org is not allowed to request permission to push without the user asking with a user gesture. So I'll click this bell-shaped button here to subscribe for notifications. What you see here is the system notifications prompt– the same one you'd see for any other application. In this case, it's on behalf of webkit.org. I will click "allow," and I'm all set. webkit.org is giving me the option to be notified about new blog posts as well as new commits to the source code repository. I know being notified for every commit will distract me from important work, but I absolutely want to be notified about new blog posts. So I'll check that box now. Coincidentally, somebody must've just published the WebKit blog post about Web Push. This notification looks just like any other and is attributed to webkit.org. I can click it to activate, and there is the blog post, open in Safari. Once a user has granted permissions to a website, they maintain control over that permission. As a macOS user, I'm used to managing Notification preferences inside System Settings, and that's where I can go to configure webkit.org's notifications. The same rich configuration as I'd find for any other app or service. As a Safari user, I'm used to managing website settings from inside Safari preferences. I can also go there to turn webkit.org's permissions on or off. And that's how Web Push works for users in Mac Safari. Before we move on, I want to reiterate a few things covered in that demo. First, we don't want users to be spammed by subscription requests they haven't asked for. So a website may only request a push subscription in response to a mouse click or a keystroke. Once a website has permission to show notifications to the user, the user controls that permission. They can choose to manage it in Safari's preferences or System Settings. And the setting will stay in sync if they happen to manage it in both. Finally, if you provide notifications for different types of events, it is a best practice to provide fine-grained controls for notification types within your web app, just like other apps do. Now that you've seen Web Push in action, let's dig in to what's happening at each step. Some of you are already intimately familiar with this. But for those of you new to Web Push, I'll go step by step, referring you to the relevant standards and documentation along the way. The first thing that happens is a user visits your website in a browser tab. Here's webkit.org open in Safari. Since it is open in a tab, it can install a Service Worker. A Service Worker is a unit of JavaScript that operates on behalf of an entire domain, separate from a currently open browser tab. Once the Service Worker script is installed, your web app is eligible to request a push subscription. As already mentioned, this request must be tied to a user gesture. webkit.org requests permission when clicking this bell-shaped button, which fulfills the user gesture requirement. When your site asks for a push subscription, the user sees this system prompt. Here is where they can make the final call on granting your website this powerful ability.

It is possible the user might deny the request. Your JavaScript should be prepared to handle that. But assuming the user grants permission, your JavaScript gets back a PushSubscription object. This includes everything your server needs to send a push message to this user in this browser. Information like the exact URL end point to use. You send this PushSubscription payload back to your server in whatever manner works best for your web app. Many popular server packages have Web Push support to manage subscriptions, or you can roll your own. The same pertains to how and when to actually send a push message to the URL end points your server knows about. I can't tell you when to do so. That's up to you and your website. But once you've decided to send that push message, I can help with what happens next. Remember how push requires an installed Service Worker? Once your server has sent a push message and Safari receives it, Safari wakes up your Service Worker and sends it a JavaScript push event. Showing a notification to the user in Notification Center is a requirement while handling the push event. Receiving the push event and displaying the notification happens if your website is currently open in a browser tab. It also happens if your website is not currently open in a browser tab. In the case of Safari on macOS Ventura, this happens even if Safari is not currently running. The final step: If your user clicks on that notification, a notificationclick event is sent to your Service Worker so it can respond appropriately. For example, by opening a new window to the URL associated with that notification. With that understanding of the Web Push flow under our belt, it's time to get into even more detail by actually adding Web Push support to an existing web app. Besides webkit.org, Browser Pets is the most mission critical internal tool for the Safari and WebKit teams. Keeping everyone in the department up-to-date on their favorite WebKittens and Pups on Safari has always been the mission statement of Browser Pets, and Web Push has made that easier than ever. Our internal BrowserPets domain already had a ServiceWorker script registered to speed up page loads and synchronize between multiple tabs. At a high level, a ServiceWorker script looks a lot like this. When an engineer visits the Browser Pets page in a tab, this JavaScript excerpt either determines if the Service Worker script has already been registered, or registers it if necessary. Notice we're practicing feature detection here, previously mentioned as a best practice. With the Service Worker prerequisite taken care of, we're ready to subscribe for push. Remember, you cannot request a push subscription without an explicit user gesture. Running this script in response to a button's onclick handler is one of many ways to satisfy that requirement. Once the user clicks that button, here's code to request a push subscription. I'll go into each of these points in more detail. First, we need to configure the request for a push subscription. An important bit for that is the public key our server uses to identify themselves to Apple's push servers. Here we use the standard technology called VAPID, the same as other browsers. I won't go over the sometimes complex details of VAPID here, but there are resources on the web to help you with the best solution for your server's setup. With the VAPID key set, we're ready to configure the subscription request. Notice we are explicitly stating that we promise to always make pushes user visible. While the standard for the JavaScript Push API optionally accommodates silent JavaScript runtime in response to a push, most browsers do not support that. Safari does not support that. And like most websites, Browser Pets does not need that. Then we request permission to push. This line of JavaScript results in the permission prompt for the user to either approve or reject. Assuming the user grants permission– which all Safari team members do for Browser Pets– this gives us a PushSubscription object with the details on how to reach this user in their browser. Things like the URL end point and the key used to encrypt the push message for transit. Finally, we need to send all of those details to our server. As mentioned before, the specifics of this will vary based on your exact application. Our BrowserPets server uses WordPress, which already has a few plugins to support standard Web Push. It's likely you'll find the same is true for your backend, and there are resources on the web to help find the right solution for just about any setup. Now we need to go back to our Service Worker JavaScript code. It will need to handle a few new events, starting with the push event. When a push message makes its way from the Browser Pets server to this browser, this Service Worker has a push event sent to it. That event contains a PushMessageData object which has multiple ways of accessing the data sent by your server. We use the JSON accessor here. Remember how when we subscribed for push, our JavaScript promised they would always be user visible? That means we must always show a platform native notification in response to each push. It is best to do this as early as possible in your push event handler. We're pulling everything we need out of that JSON blob to configure the notification, including setting up an action with a URL. That will come in handy in just a moment. After the notification is shown, we need to handle the user clicking on it. One more event for our Service Worker script to handle. In this notificationclick handler, BrowserPets will take the URL from the notification that was clicked to open a new window. Take note: This is a very common pattern. That's all the JavaScript we need to write to support Web Push. Of course, it's best to have some help while developing. As usual, that's where Web Inspector comes in. In addition to helping debug your website open in a browser tab, Web Inspector can also inspect Service Worker instances and set breakpoints on event handlers. All of this together will let you inspect and debug the JavaScript that subscribes for push as well as the service worker code that handles the push event and notification events. Additionally, the Apple Push Notification servers will give you human readable errors if something goes wrong when you attempt to publish a push message. Check out the links associated with this session for further documentation. I'd also like to get into more detail on a few points that came up while writing that code, with direct regards to user privacy and power usage. Importantly–and this is not the first time I've said this– subscribing for push requires a user gesture. As with other privileged features of the web platform, it's the right thing for user trust to require that the user actually asked to enable Web Push. As mentioned when I showed you the code on how to request a push subscription, you must promise that pushes will be user visible. Handling a push event is not an invitation for your JavaScript to get silent background runtime. Doing so would violate both a user's trust and a user's battery life. When handling a push event, you are in fact required to post a notification to Notification Center. Other browsers all have countermeasures against violating the promise to make pushes user visible, and so does Safari. In the beta build of macOS Ventura, after three push events where you fail to post a notification in a timely manner, your site's push subscription will be revoked. You will need to go through the permission workflow again. That's all. We're genuinely proud to support Web Push and excited that any site can use it, no Apple Developer account required. As long as you've coded to the standards and use feature detection, so you don't unwittingly exclude Safari, your users will already get the benefit of Web Push in Safari 16 on macOS Ventura. As usual, we've added tons of other new stuff to Safari and WebKit this year, and I hope you'll check out that session to learn more. Thank you for watching. I hope you have a great rest of WWDC 2022.

8:27 - BrowserPetsWorker.js

8:42 - BrowserPetsMain.js

9:00 - BrowserPetsMain.js subscribeToPush()

9:19 - BrowserPetsMain.js subscribe

9:36 - BrowserPetsMain.js subscriptionOptions

10:21 - BrowserPetsMain.js request permission to push

11:13 - BrowserPetsWorker.js push

12:06 - BrowserPetsWorker.js notification click

Looking for something specific? Enter a topic above and jump straight to the good stuff.

An error occurred when submitting your query. Please check your Internet connection and try again.

Build scalable realtime features

Programmatic push notifications

Read the docs to learn how to use our products

Explore our tutorials to build apps with Pusher products

Reach out to our support team for help and advice

Get familiar with Pusher-specific terminology

• User stories

How we built push notification delivery for Safari users on Beams

Delivering push notifications to Safari is very different to other browsers. Find out how we implemented Safari support for Pusher Beams.

Introduction

In 2020, we added web browser support to Pusher Beams , enabling notification delivery to Chrome, Firefox, Edge and Opera . Safari was missing from this list, but we have recently released beta support so that you can send Safari push notifications to your users with Beams.

Implementing Safari support required significant additional development work compared to the other browsers, and in this blog post we will discuss the differences between sending notifications to browsers using the Web Push API and Safari.

The vast majority of browsers support the Web Push API (including Chrome, Firefox, Edge and Opera). If you implement support for this web standard then you will be able to send notifications to most desktop browsers – and many browsers on Android. You don’t have to add anything to your code to support specific browsers.

Safari on macOS does not support the Push API and instead Apple opted to develop their own push notification implementation which is closer to the notification experience of a macOS app. It uses Apple’s push notification gateway, APNs, which will be familiar to those who develop apps for iOS and macOS. Note: Safari on iOS doesn’t support any kind of browser notification at all, and that’s the same for all third party browsers on iOS.

While there are a lot of similarities when it comes to user experience, there are key technical differences in implementing Safari support, the most significant being the steps you have to take when registering for notifications and the actions you can take upon receiving a notification.

Registering for push notifications

The Push API centers around service workers . First, you must register a service worker for your web app. You can then request notification permission from the user, passing your VAPID public key from your sever (see below). You then get credentials back that you can pass to your server to use when sending notifications.

VAPID keys are essentially a public and private key pair generated on your server and are used as part of the VAPID specification, which allows the push gateway to verify your server’s identity. The public key is passed to the browser in order to tie each subscription to your key, so only you can publish notifications to those users. The keys never expire and are free to generate.

Safari doesn’t use service workers for push notifications. When requesting notification permission in Safari, you pass the URL of your web service. You must implement the web service with a number of specific endpoints which Safari will automatically make requests to during the registration process. Safari uses these endpoints to:

• Request the “push package”
• Notify your server of new subscribers/removed subscribers
• Log errors regarding the push package and registration process

A push package is a zipped directory containing your web app’s icon in several sizes, plus a JSON file containing details about your web app. You must cryptographically sign the files using a certificate obtained from Apple (see below). This zip file is downloaded by Safari every time the permission dialog is shown. We found the implementation of the web service and push package generator to be the most complicated part of adding Safari support to Beams. It is completely different to the Push API and therefore there wasn’t much code to be reused from our Push API (or iOS) implementation.

You must use an Apple-issued certificate to sign push packages and authenticate when publishing notifications to Safari. The certificate proves ownership of an identifier for your web app called a “website push ID”. To register a “website push ID” you must have a paid Apple Developer program membership. The certificate expires after a year and therefore requires yearly renewal.

It is possible to publish Safari notifications using an authentication token signing key rather than a certificate, which is desirable because the key never expires. However it is still necessary to use the certificate when signing push packages and as a result we have to ask customers for their certificate for Safari, rather than their key.

Interacting with/responding to notifications

The Push API notifies the service worker when a new notification is received. This allows you to execute JavaScript in response to the notification, which can utilize any included data. For example, you could update your webpage to show an icon indicating a new message was received. We use this functionality to implement Pusher Beams insights features, such as delivery and open tracking.

Safari doesn’t use service workers and it isn’t possible to execute any code in response to receiving a notification. This means it wasn’t possible for us to implement delivery tracking for Safari browser notifications. However we do have some ideas for future changes to support open tracking.

For Push API notifications, the developer generally has more control over what happens when a notification is clicked. For example, it is possible to just hide the notification. Safari on the other hand is more limited when it comes to notification functionality, and always requires a URL to be opened when a notification is clicked.

Displaying Safari notifications

Visually, notifications displayed by Safari are slightly different compared to other browsers on a Mac.

Notifications delivered via the Push API are displayed as a “sub notification” of the browser.

Whereas notifications delivered to Safari appear like a standalone Mac app and are grouped together in the Notification Center as such.

On a Mac, Safari notifications are delivered when the browser is closed, whereas Push API browsers only appear to deliver notifications when the browser is running (but the page does not have to be open).

There is less customization available for Safari notifications compared to Push API notifications (and iOS notifications). For example, it isn’t possible to include an image in a Safari notification, other than your web app’s icon. This means we aren’t able to offer rich notifications for Safari in the same way we can for mobile apps or other browsers.

Apple have not updated Safari notifications for a long time. We’d love to see richer notification opportunities for Safari users in the future so that we can offer the same notification experience across all browsers we serve. We’ll be sure to stay on top of any new customization functionality should it arise

There are many differences when sending notifications to Safari compared to Push API browsers. Implementing Safari support was a surprisingly complicated process: we found there to be little overlap between the Push API and Safari in terms of our internal implementation.

The good news is that Pusher Beams now has Safari support and we’ve been able to hide most of the complexity for developers by:

• We provide a unified API for triggering notifications to Push API browsers and Safari – you can send to both with a single API call (as well as to iOS/Android)
• We provide a single client SDK that supports Chrome, Firefox, Edge, Opera and Safari.
• We hide all the complexity of generating and serving push packages, including the resizing of icons.
• We store your credentials and manage browser tokens
• We handle the nuances of publishing to APNs at scale

You can read about how to get started with Pusher Beams and give feedback on the beta program here .

• Contact Sales
• Terms & Conditions
• Cookie Policy
• Privacy Policy
• Code of Conduct

© 2024 Pusher Ltd. All rights reserved. Pusher Limited is a company registered in England and Wales (No. 07489873) whose registered office is at MessageBird UK Limited, 3 More London Riverside, 4th Floor, London, United Kingdom, SE1 2AQ.