A pretty sweet push notification solution for mobile Safari
Posted on
When the iPhone was first unveiled in 2007, it included a “pretty sweet solution” for developers who wanted to build their own apps for the new mobile platform: web apps. Anyone could build a web app and even save it to the iPhone’s home screen, just like the built-in apps1. When the Apple app store was unveiled a year later, it ushered in a wave of new development, not to mention a revenue stream that would qualify as an excellent business if it weren’t a line item on the balance sheet of the world’s most valuable corporation.
Web apps remain a viable option for app-like experiences on Apple devices, and the web community has evolved best practices for creating single page apps (SPA) that work more like apps than traditional web pages.
I’ve always considered Apple’s demotion of2 web apps to be a balance of needing to optimize the experience for the majority of their users with responding to the incentives created by their app store. As a web partisan myself, I acknowledge SPAs can be a suboptimal experience if the developer hasn’t put in the work to optimize for the installed-state; and of course Apple clearly wants to encourage as much development as possible to stay within the ecosystem it controls.
Still, it’s been 16 years. An entire generation of apps-that-should-have-been web pages has sprung up, often shoehorned into supposedly cross-platform frameworks that create a subpar user experience sludge. Nowhere is this more true than for media — how many apps from newspapers or magazines have you installed, solely for a very specific purpose like receiving breaking news alerts? How many of those apps are just wrappers around web views? How many of those apps should have been web pages?3
So, it’s incredibly encouraging to see the latest iOS and iPadOS betas (16.4, beta 1) bring some much-needed functionality not just to Safari but to single-page apps (Apple calls them “Home Screen web apps” [oddball capitalization all theirs]). Here’s Brady Edison and Jen Simmons writing for the official WebKit blog:
Now with iOS and iPadOS 16.4 beta 1, 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.
I have to admit, I read through this post several times because it was disappointing to learn that new push APIs only apply to web pages saved to the home screen and not, as on desktop Safari, just normal tabs the browser. I understand the choice both from a user experience and system resource management perspective, yet, if you want to enable push notifications for a web site, a user first has to save the page to their home screen.
Web developer extraordinaire Jeremy Keith is similarly disappointed and lays out the issue precisely:
I think that would be fair enough, if it weren’t for the fact that adding a website to the home screen remains such a hidden feature that even power users would be forgiven for not knowing about it.
…
As long as this remains the case, we can expect usage of web push on iOS to be vanishingly low. Hardly anyone is going to add a website to their home screen when their web browser makes it so hard.
It’s harder to describe to a non-developer how to save a web page to their home screen than it is to simply point to an app in the app store, especially since Apple has a system in place for easily linking from the web to their store with a single line of metadata.
Obviously, I’d like to see that home page installation hurdle easier to overcome for web developers. One way it could work is when someone chooses to enable notifications from a web page, the built-in OS-level alert that requests notification permissions could include something along the lines of “To enable alerts for this website, you need to save it to your home screen4. Add this page and enable alerts?” And, naturally, if you remove the saved page, the OS should alert you that you’ll also be disabling notifications. As a concession, I would accept some mechanism for web developers to be able to proactively ask people to add a page to their homescreen — something like the aforementioned app banner could work, or maybe a JavaScript-accesible browser API (and proposed cross-platform standard, of course).
I’m excited about these new features and better web apps on Apple devices. I have high hopes for the next beta!
UPDATE
February 24, 2022
In response to Jeremy Keith’s complaint, Mozilla’s Michael Verdi kind of responded that people do add web pages to their home screen, actually:
As I was reading about this news I saw that the commentary around it repeated an often heard assumption that says, as Jeremy Keith puts it, it’s a “fact that adding a website to the home screen remains such a hidden feature that even power users would be forgiven for not knowing about it.” No one ever seems to cite a study that shows this. I always see this written as if it is indeed a statement of fact. But it just so happens that recently we were testing some prototypes on iOS (unrelated to web apps) and we needed participants to add them their home screens. Of the ten people we talked to, four were familiar with this flow and had saved various things this way. When I mentioned this to others on the UX team a few shared similar stories.
So four of ten people in a user test – what does that tell us? It tells us that it’s something that at least some regular people do and that it’s not a hidden power user feature. More than that, it’s a good reminder to check your assumptions.
Four out of ten! Well ok then!
More seriously, open web advocate Alex Russell wrote a detailed look at the Safari 16.4 preview as an admission that Apple has largely failed compared to their peers. Russell provides ample evidence that Safari has truly been behind for years and it appears the threat of regulation is forcing them to do some catching up.
My pal Neven’s Glyphboard, one of the very first sweet solution web apps, has been installed on literally every iPhone I’ve ever owned. ↩︎
Maybe it’s more fair to say “lack of promotion of” ↩︎
True web developer confession: I spent several years building, even excitedly at times, a magazine with an app experience at the centerpiece built on a web views-based, cross-platform framework that was a total mess, basically for the sole purpose of being able to send users OS-native alerts. We eventually abandonded the apps in favor of just a nice website. ↩︎
Or rather Home Screen ↩︎