Web push and container queries come to Safari: Enough to fend off accusations of holding back the web?

Apple’s WWDC developer event is under way this week, with the company’s previewing fresh features for the Safari web browser. Safari 16 will arrive alongside macOS Ventura late this year, and also on iOS and iPadOS, with the expectation that it will arrive on supported Apple devices in early 2023.

Container queries in Safari 16

One big feature is Web Push, which implements the W3C standard for the Push API, including additions to the Service worker API and Notifications API. The Push API enables a site to send notifications to users even if it is not open in the browser. “If you’ve coded your application to web standards you won’t need to make any changes to make it work in Safari,” said Apple’s Brady Eidson, a WebKit engineer, in a video introducing the feature.

Eidson makes the point that developers should use feature detection rather than browser detection in order to write code now for clients that already support it, and have it work in Safari as soon as the update is rolled out. No Apple developer account is required, even though it does depend on an Apple-run service reached from *.push.apple.com. Apple is also enforcing a rule that permission both to request and then to allow notifications requires a user gesture such as a tap or mouse click and cannot be done entirely through script.

Another major update is container queries. The concept here is simple. A CSS media query lets designers modify page layout based on the size of the web page, whereas a container query does the same thing based on the size of a container such as a div element. The outcome is both simplified code for common scenarios in responsive layouts, and the ability to create reusable responsive components that can be dropped into different web pages. “I cannot wait for this. I hate having to do math/calculations based on viewport height/width to decide how a container should behave at different sizes,” said one developer.

New and recent features in Safari and WebKit presented at WWDC

The company was keen to emphasise the pace of change with Safari and WebKit (the engine on which Safari is built). Other recent features include the dialog element, lazy loading for images, CSS layers, and font color palettes. Along with Web Push and Container queries, Safari 16 adds Subgrid for advanced CSS grids, CSS Offset Path for improved animation effects, and shared workers for running background JavaScript that is shared between tabs open from the same domain. WebAssembly will now have access to up to 4GB of memory. There are also improvements to the Web Inspector debugging tool, with a new Flexbox inspector and support for developer extensions.

In the past Apple has been accused of holding back the web in order to promote native apps that are delivered through the app store and subject to hefty commissions when payments are made. “Safari has consistently lagged behind competing browsers in supporting modern web APIs and features, presenting considerable challenges for developers wanting to create products that work consistently across all the major browsers,” complained marketer Perry Sun last year.

A common complaint is that Apple does not allow any browser engine other than Safari’s WebKit on its mobile operating systems, limiting the capabilities of progressive web applications and preventing other browsers from fully competing, a matter which may be the subject of regulation such as the forthcoming EU Digital Markets Act.

While Apple is still playing catch-up to Google’s Chromium/Chrome and Mozilla’s Firefox in terms of web technology, the energy it is putting into Safari shows that the gap is narrowing and is likely influenced by potential regulatory pressure. Container queries, for example, are still under development in Chromium. Apple is also better placed to defend privacy and user experience above the demands of marketers and advertisers than its competition, since its business model does not depend on this.