PixelatedDad

PixelatedDad, 8-bit gaming enthusiast, high-score chaser, and proud owner of a collection of gaming consoles older than my kids

Unlocking the Power of Web App Push Notifications on Apple Devices

by · Published · Updated

Unlocking the Power of Web App Push Notifications on Apple Devices
Unlocking the Power of Web App Push Notifications on Apple Devices

#Beta16.4 #PWA #PushNotifications

Device support is an important consideration when implementing web push notifications. Historically, web push notifications have been widely supported on Android devices, but support for iOS devices has been more limited.

However, with the release of iOS 16.4 in early 2023, Apple introduced support for web push notifications on Safari for iOS devices that are running iOS 16.4 or later. This means that web push notifications are now fully supported on both Android and iOS devices, making them an even more powerful tool for website owners and marketers.

Apples Web Based Push Notification Consent Message

Setting up and activating web push notifications can be a straightforward process, but it does require some specific requirements. Based on our research of developer notes, it seems that the following criteria are currently necessary to enable web push notifications on a website:

  • The website must be a Progressive Web Application (PWA).
  • The PWA must be added to the user’s home screen, which requires the user to install the PWA.

For Apple devices, the consent message for web push notifications is identical to that of native apps. Additionally, web apps have their own full notification options, giving website owners full control over the notifications.

It’s worth noting that these requirements may change over time, so it’s important to stay up-to-date with the latest guidance and best practices. If you have any additional information or insights on this topic, please feel free to share them with me.

Once activated and consented to, notifications are as effective and operate just like a native app.

Normal Notifications
IPadOS 16.4 Web App Notification
IPadOS 16.4 Web App Notifiation

Progressive Web App (PWA)

A Progressive Web Application (PWA) is a type of web application that uses modern web technologies to provide an app-like experience to users. PWAs are designed to work on any device or browser, and they can be installed on a user’s home screen just like a native app.

One of the key features of PWAs is that they can work offline, meaning that users can continue to use the app even if they lose their internet connection. PWAs use a technology called a service worker to cache data and content so that the app can still function even without an internet connection.

PWAs are also designed to be fast and responsive, with smooth and seamless transitions between screens and pages. They are typically built using modern web development frameworks and libraries, such as React, Angular, or Vue.js, which enable developers to create high-quality, feature-rich web applications.

Another benefit of PWAs is that they can be easily updated, without the need for users to download and install new versions of the app. This makes it easy for website owners and developers to make changes and improvements to the app, and to keep it up-to-date with the latest features and functionality.

Overall, PWAs offer a powerful and flexible approach to web application development, allowing website owners to create app-like experiences that work on any device or browser. With their ability to work offline, fast and responsive performance, and easy upgradeability, PWAs are becoming an increasingly popular choice for web developers and businesses of all sizes.

Apple’s own information page can be found here

Testing

This website is now a Progressive Web Application (PWA) with web push notifications! If you want to test this out, you can add this website to your home screen and run it as a web app. When you do that, you’ll see the Apple consent message, and once you accept, I’ve programmed the site to send you a notification to confirm that you’ve enabled web push notifications successfully.

If you decide to uninstall the web app, that’s totally fine. But if you’d like to keep it installed, you’ll be able to enjoy a seamless and app-like experience, with fast and responsive performance, offline functionality, and the ability to receive push notifications even when you’re not browsing this website.

I believe that web push notifications are an incredibly valuable tool for website owners and marketers, as they allow us to engage with users in real-time and provide relevant and timely information to them. As a PWA with push notifications, I am excited to explore new and innovative ways to connect with my audience.

So, why not give it a try and see how web push notifications can benefit you? Add this website to your home screen and experience the power of web push notifications for yourself!

Debugging & Observations

If you find you are not receiving test messages, there are a few things you can check, first the obvious one but worth reminding these messages only work on ios 16.4 (or Android of course which has supported these for a long time now)

Go to Settings -> Safari -> Advanced -> Experimental Features and make sure Push API, Service Workers and Notifications are all enabled. I am assuming these will be enabled by default as IOS16.4 gets public releases…

Tags:

PixelatedDad

PixelatedDad, the 8-bit gaming guru who's a few pixels short of a full sprite. Despite my age, I'm still young at heart and can often be found playing games that are older than my kids. I've got the reflexes of a sloth and the aim of a blindfolded monkey, but that doesn't stop me from trying to save the pixelated princess. Meet the ultimate multitasker - Pixelated princess saver, Husband, Geek, and proud Dad! When I'm not busy wrangling my two sets of twins (yep #TwinsTwice) or coding away on my computer, taking pictures of the night sky or designing and printing 3d bits of plastic, you can find me snuggling up with my furry sidekick, Doggo McStuffin.

Leave a Reply