Sleepy Safari

*One of the reasons I started untested was to Work With the Garage Door Up, so this year I'll try to share more smaller, unfinished snippets of work, including the stuff that didn't go as expected. *

Problem

Earlier this week I posted a note on Turning Sit. into a PWA (Sit. Offline Mode). In short: the process was surprisingly easy as nowadays we have a ton of well-tested tools to lean on when building PWAs.

Then, a day after I shipped it, I had a very pleasant, and a bit longer than usual meditation session. In fact, when I opened my eyes I noticed that I was late, the screen was black and the gong had never sounded. So, what happened?

First, some technical context. There are two ways for a website to force a mobile device to stay awake:

Sit. uses feature detection to apply the right approach (start with Wake Lock, fall back to some <video> element black magic fuckery. The user taps on the start session button and we arm the media player to enable autoplay (the gong sound), but also ask the device nicely (or not that nicely) to stay awake.

This works well for regular web pages, but breaks in PWA mode because of a not yet fixed iOS bug. Ironically, PWA feels like a more obvious use case for app-like features like this.

Solution

Only iOS in PWA mode is affected (Android works fine in both cases). I'll log the number of iOS sessions in PWA mode and leave the code as it is. Apple does a great job of discouraging people from treating websites as apps and there's no need to work on a fix before we know the impact.

  // Sit. is written in Solid.js
onMount(() => {
	if (
		"standalone" in window.navigator
		&& window.navigator.standalone
	) {
	  Tracking.track("ios:standalone");
	}
});

Then (choose 1)

1. Run a user agent check and don't serve the Web App Manifest for iOS users:

👎 might generate some ugly 404s if I do it in the lazy way (and I will)
👍 users won't know a thing

2. Warn users who open Sit. PWA mode

👎 annoying as the user has already made the effort to install the app, but also
👍 less annoying to every other user who just opened Sit. on an iPhone for the first time

Want to receive my work as I publish it? Subscribe here.

a giant foot-shaped snail with a house on its back. the house is still in construction, with a big crane towering above it The image is a stylized black-and-white illustration. In the lower left corner, there is a small, cozy-looking house with smoke rising from its chimney. The smoke, however, does not dissipate into the air but instead forms a dark, looming cloud. Within the cloud, the silhouette of a large, menacing face is visible, with its eyes and nose peeking through the darkness. The creature, perhaps a cat, appears to be watching over the house ominously, creating a sense of foreboding or unease.