iPhone 11, iPadOS and iOS 13 for PWAs and web development

9 years ago I discovered the first time a browser was implementing a motion sensor API and I did this test video; today, this API is changing; and like 9 years ago, it’s not well documented.

In a nutshell

Short of time? Here is the list of topics I’m covering in the rest of the article:

🚀 Progressive Web Apps

  • Don’t look further: no Web Push and no App installation APIs, but hope was born on push
  • Apple’s take on the PWA term: we don’t know what you mean by that
  • PWAs in the AppStore? Please no, says Apple
  • New “Hide Toolbar” in Safari that’s kind of fullscreen without installation
  • PWA Lifecycle 3.0: finally, they act like native apps in the app switcher, and they execute code in the background.
  • New PWA installation user interface
  • PWAs don’t share any storage now with Safari, not even Service Worker’s Cache Storage
  • No support for WebSQL anymore
  • Apple Pay now available

🎨 Web Design

  • Dark mode available
  • iPhones 11, 11 Pro and 11 Pro Max don’t add new viewport sizes to Responsive Web Design
  • MathML coming (it’s an experiment today)
  • CSS conic gradients
  • Adaptive font sizes with website settings
  • One-finger accelerated scrolling now supported on every scrollable DOM element (iframes and elements with overflow: scroll)
  • Careful with iPads: by default now pages will be scaled to prevent horizontal scrolling, no matter your viewport declaration

🛠 APIs for Safari, WebViews, and PWAs

  • WebSQL support disabled by default
  • Visual Viewport API: detect virtual keyboards
  • Pointer Events
  • Big change on Motion Sensors APIs: we need to request permission explicitly
  • LinkPresentation Framework for native apps
  • 3DTouch support on iPhone 11 was removed, no way to emulate the Haptic Touch replacement on the Web
  • Different image sizes option now available when uploading images
  • New experiments available
  • Keep Alive for fetch requests
  • Sign In with Apple now available
  • Apple Pay on WebViews and PWAs

🆕 iPadOS 13

  • Desktop-class browser by default on most iPads
  • iPadOS and macOS expose same Safari, is there any way to still detect iPads?
  • Media Source Extensions available
  • Hover events on the iPad are now emulated
  • Two Safari instances can now run side by side on multitasking
  • Final iPadOS 13 does not support Slide view or Sides view completely for PWAs as in the first betas

🔥Miscellaneous

  • New Safari per Website Settings menu
  • Download Manager now available on Safari
  • Safari will suggest opened tabs instead of opening a new one for the same site; no PWA suggestion though
  • New performance enhancements to render faster websites on iOS, iPadOS, and watchOS (no exact details on what)
  • Scrollbars are now draggable on iOS and iPadOS
  • iOS Simulator: SE/iPod Touch and iPad Mini factors are not available by default — but you can add a profile manually
  • WebDriver is now available for automation on Safari for iOS and iPadOS

Progressive Web Apps

If you’ve followed PWAs on iOS, you probably know that the relationship between Apple and it, it’s weird. From creating the platform a decade ago with the name Home Screen Web Apps to ignore them completely, to implement the standards at least partially to finally changing their lifecycle completely and silently in the last versions.

Apple with PWAs: friends or enemies?

Despite actually supporting PWAs in a decent way compared to other browsers, Apple is the only company not embracing the PWA term. While we know it’s not a clear concept, and it’s more like a design pattern to create web apps with modern APIs, Apple has said in the past few months that they don’t want the name. And they reinforced the idea that if you create a web app it should be to use within Safari, don’t go and publish it in the AppStore because it will likely be rejected.

4 years ago I was asking about PWA term acceptance. Today, only Apple rejects the usage of the term.

New App Installation screens

Safari redesigned the Share sheet completely, changing how PWAs are installed from the browser. When a user clicks on the Share icon in the toolbar, now Safari renders the icon from the apple-touch-icon meta tag and the title of the current page in the share sheet header.

The new Share sheet taking the icon, page’s title (left image), offering Add to Home Screen after scroll (middle image) unless to add it as a favorite (right image). BTW, here you can see Dark mode in action.
On iPadOS Add to Home Screen is visible without any scroll after using the Share button
TowerGame.app from normal Safari with the Hide Toolbar about to be enabled (left image), same app with the hidden toolbar (middle image), and the same app installed as a PWA (right image)

App Lifecycle 3.0

Finally, we’ve got a PWA Lifecycle that actually makes sense. Well, most of it :)

  • When you get out of a PWA, not the OS takes a screenshot an use it in the app switcher view, instead of the white screen or the static launch image if you define it. That matches the native app behavior, which is a great deal.
  • If you want to restart or reload a PWA, now you can swipe up the app or close it from the app switcher and when you open it again, it will start from scratch as most users will expect.
Same PWA set on iOS 12.2 (left) and on iOS 13 (right); the experience shows screenshots of the last usage as with native apps
Here we can see several “web” (aka PWAs in standalone mode) inspectable at the same time from one iOS 13 simulator, only one is in the foreground. We have duplicates because one set is for the Service Worker context of each app.

In-App Browser

The In-App browser when you link to external scopes (such as different domain) seems to be the same as in 12.2–12.3. The only thing that seems to be working now is when you make a link to some other native apps (using Custom URIs or Universal Links) the right app seems to appear instead of an error within the In-App browser for some protocols.

Same PWA on iOS 12.2 (left) and on iOS 13.3 (right) in dark mode after clicking on an Apple Maps link. Look at the back button in the URL bar

Apple Pay now available on PWAs

Simple as that, the Apple Pay JS API is now working for standalone PWA

Apple Pay working within a standalone PWA

PWAs Inspectable again

Progressive Web Apps in standalone mode are now remotely inspectable in Safari, which is good news! Separating the contexts from a Service Worker and the actual PWA client is still a challenge, but it’s good to have inspection back.

iOS Search

I’ve found a weird bug on iOS 13, but then I realized it might have been there for a while. If you search for a PWA in the Search screen, they appear but if you click on them they open in Safari and not within its standalone window.

An installed PWA appears in Search but when you click on it, the URL opens in Safari and not in standalone mode

Web Push

There is still no news on Web Push notification support for iOS. However, one tweet may be saying that it’s finally a possibility at the WebKit team.

Cache Storage sharing

Cache Storage is not shared between Safari and standalone PWAs now, compared to what happened in previous versions. Therefore, two different service worker registrations happen in Safari and after icon installation, as well as downloading resources twice. If you have two PWA installations from the same origin or scope (same or different PWA), service worker registration and app cache storage will be shared among those.

Web Design

There are many web resources to understand some of these changes, and how to apply them in your designs, so I’ll just list the changes and comments on things you might not find somewhere else.

Dark mode

The dark mode is now available on iOS and iPadOS and our websites can (and should at one point) optimize content to that users’ preference. From a website point of view, Safari on iOS follows the same specs currently on Safari on macOS that were properly documented by WebKit previously this year.

iPhone 11 viewports and pixel densities

The new series of iPhones 11 doesn’t change the landscape of possible available combinations of viewport sizes and pixel densities:

Other changes

  • MathML coming (it’s an experiment today)
  • CSS conic gradients
  • Adaptive font sizes with website settings
  • One-finger accelerated scrolling now supported on every scrollable DOM element (iframes and elements with overflow: scroll) which makes the -webkit-overflow-scrolling style to promote momentum scrolling officially deprecated.
  • iPads: by default now pages will be scaled to prevent horizontal scrolling, no matter your viewport declaration

APIs availability

For PWAs and web sites, there are changes in terms of API availability

Good-bye WebSQL

WebSQL was never standardized but it was the only serious storage available from iPhone OS 2.0 for web apps. A few years ago, some browsers decided to mark it as deprecated and it was time for Safari to remove it by default. So from iOS and iPadOS 13, WebSQL is disabled.

Motion Sensors

The simple API available since iOS 4.2 to read the accelerometer and later with gyroscope and magnetometer support from JavaScript was changed in the past year after discovering that several websites and iframes with ads were using that to fingerprint users based on how they use the phone. It was first removed; then removed by default with a global on/off (off by default) in Safari’s settings, and now it’s back with a change that makes every web app using the feature incompatible since iOS 13.

The new permission dialog available on iOS13

Visual Viewport API

The Visual Viewport API lets us recognize when there is a change in the available viewport that doesn’t involve a resize from a window or device point of view (such as a landscape). Example of this behavior is when the user resizes the page with the pinch gesture.

LinkPresentation Framework

LinkPresentation framework is available for native apps that want to show snippets of web content within its app. If you own a website, to serve content for that framework you just need to implement the Open Graph protocol.

Sign In with Apple now available

Thanks to the Sign In With Apple JS library you can implement a native Apple sign in process with Apple’s account similar to Facebook or Google, but with a more automatic process for iOS and iPadOS users.

3D Touch

3D touch is officially out of all the new iPhones, leaving screen pressure control for the future only on iPad with Apple pencil. Its replacement, the haptic touch pattern (short vibration after long press) is not available on WebKit − Vibration API is not implemented.

Other changes

  • Pointer Events are now available, closing a fight that has been in the web field for a decade. Pointer events are more useful on iPadOS where we can tell the difference between a touch, an Apple pencil tap or stroke, and a mouse pointer click.
  • Different image sizes option now available when uploading images with <input type=file>, that let the user select the original size or one of the available sizes.
  • New Experiments Available (off by default): Ad Click Attribution, MathML Core, Automatic HTTPS Upgrade, Link prefetch, Link preload responsive images, @page CSS, Refer Policy Attribute, ResizeObserver,
  • New Experiments Available (on by default): Fetch API Request Keep-Alive, Quirk to prevent delayed initial paint (whatever that means), Media Capabilities Extension, Pointer Events, Synthetic Editing Commands, Block top-level redirects (to avoid iframes redirecting top page), Visual Viewport API, Disable WebSQL
  • Keep Alive is now available for fetch requests, to keep alive some requests even when the JavaScript context is closed
  • Apple Pay on WebViews and PWAs is now available.

iPadOS

It’s the time for iPads to get their own OS separated from iPhones, and version 13 is the first iPadOS. Safari also did a big change here, offering the macOS desktop class browser in iPads by default.

Desktop class experience

On the new desktop content mode the User-Agent is the same from Safari on macOS, the viewport with a viewport declaration of width=device-width will be the real size and not the typical iPad 768px on portrait; also the viewport declaration will be ignored if the site doesn’t fit horizontally (font sizes will keep legibility); if your website expects horizontal scrolling, add shrink-to-fit=no to the layout viewport definition, or your website will shrink until it fits completely without horizontal scrolling.

Same browser, same iPad, different engine modes (desktop at the left, mobile at the right)
Two Safaris running on the same iPad

Detecting iPads

The idea is to stop designing websites or web apps for iPad and just make desktop content fully compatible with these devices. Apple doesn’t want us to use User-Agent to do special things for iPad and to use just feature detection. Sounds good, but…there are many situations where you want to know if it’s an iPad or a macOS, such as:
− Gaming (don’t rely on a present keyboard on iPad)
− AppStore links
− PWA support and instructions -not available on macOS yet-
− UI design decision (such as top-bar vs bottom-bar)
− Multitasking

PWAs in iPadOS

During the betas, two PWAs side by side was possible; not on the final version

Other changes

iOS 13 also includes some new changes that will affect web engineers, such as:

  • New Safari per Website Settings menu that let the user change properties on each domain.
  • Download Manager now available on Safari, so we can now serve any kind of file to iPhones and iPads, not just compatible content.
  • If you are typing a URL of a tab that is already opened, Safari will suggest to just focus on that tab instead of opening a new one; unfortunately, this behavior doesn’t suggest installed PWAs instead.
  • New performance enhancements are in the web engine to render faster websites on iOS, iPadOS, and watchOS (no exact details on what, but the docs specify it)
Performance enhancements according to Safari Release Notes
  • Scrollbars are now draggable on iOS and iPadOS
  • iOS Simulator: SE/iPod Touch and iPad Mini factors are not available by default — but you can add a profile manually
  • WebDriver is now available for automation on Safari for iOS and iPadOS

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Maximiliano Firtman (firt.dev)

mobile+web developer, author, trainer, speaker | Check firt.dev for more articles and learning experiences | PWAs, Web Performance, JavaScript, Mobile Apps