Web Push in iOS Safari

Joel Oliveira
Joel Oliveira
Mar 27 2023
Posted in Best Practices

iOS 16.4 is almost here and packs web push notifications

Web Push in iOS Safari

In a recent post, we've cheered Apple's announcement of support for Web Push in iOS and iPadOS. It has been something we were waiting for quite some time, as mobile Safari remained the last big browser with no support for remote notifications.

Users rank web push notifications as one of the most important features of progressive web apps, among offline access, installation, and access to other native APIs. It's no surprise that this announcement brings some joy to all of us.

Until now, the adoption of web push notifications has been underwhelming, and the implementations we've seen so far suffer with the fact that a good chunk of a brand's audience couldn't still be reached. With an estimated 50% mobile market share, Safari will now make brands rethink their investment in web apps. Unlike native apps, web apps do not need to be distributed to app stores. They are universally available, therefore, easier to develop and maintain.

With Notificare, support for web push notifications in mobile Safari is already available and highly optimized, thanks to our Web SDK.

One small caveat tho!

Unlike other browsers, where push notifications are available right away, Apple requires websites to be added to the home screen for push notifications to work. Only then, opt-in for web push is possible.

You should, therefore, expect lower opt-in rates on iOS than on other mobile browsers. We will probably see a considerable amount of development resources go into educating users about this constraint.

Although this hurdle might affect opt-in rates, on the other hand, it will make browsing in mobile Safari a more distraction-free experience than other browsers. Only web apps with a valuable proposition and a clear benefit for users will be added to the home screen. This will help limit the amount of notifications websites could generate, while providing push notifications only to highly engaged users.

We hope we'll see Apple adopting installation prompts tho. Other browsers like Chrome, Opera and Edge allow users to add apps to the home screen with one single click, via a built-in solution baked in the browser's fabric.

Preparing for Web Push in iOS

There is only one other requirement needed (if you already use Notificare and our Web SDK) for your website to be able to receive web push notifications. It should have a web manifest file. This is a JSON file that contains information about your website and how it should be treated by the browser when added to the home screen.

To be able to be treated as an eligible web app in iOS and support push notifications, it should define the display property as fullscreen or standalone. In practice, it will look more or less like this:

{
  "short_name": "Website",
  "name": "My Amazing Website",
  "start_url": "/",
  "display": "standalone",
  "icons": [
    {
      "src": "assets/images/icon-36x36.png",
      "sizes": "36x36",
      "type": "image/png",
      "density": "0.75"
    }
  ]
}

A manifest is included in your web pages, inside the <head>, like this:

<link rel="manifest" href="manifest.json">

For more information about web manifests, please read this article.

The Web Push Experience

As soon as you can add your web app to the home screen, you've configured Notificare for Web Push, and you've implemented our Web SDK, you are ready to opt-in users for push notifications.

In Safari, enabling push notifications can only be prompted in result to a user gesture. This makes our built-in onboarding dialogue the ideal solution to request the push notification permission:

This will also prevent users from blocking push notifications because they do not yet understand the benefits of this feature. Rather than invoking the native prompt, using a pre-permission strategy will make sure that even if users first deny it, you can still request it again later. To know more about pre-permissions, please read this article.

If they so choose to proceed, then our Web SDK will prompt the native permission:

At this point, the experience of web push is pretty much the same as you would have with a native mobile app.

Push notifications will arrive even when the app is not running and displayed as follows on the lock screen:

Just like a native app, if configured to do so, it will display a badge on the app's icon with the number of unread messages:

Although web push in mobile Safari still does not support other features of push notifications, available on native apps, like lock screen media and actions, it still offers a pretty similar experience.

Conclusion

iOS 16.4 is currently out as a release candidate and although is not yet available for everyone, its release is imminent. One thing is certain, it will change web push forever, and many brands will question if a native mobile app is really needed.

If you have any questions about how to get started with web push, feel free to reach out or create a demo app and test it yourself today!

Keep up-to-date with the latest news