Home Screen app on iOS doesn't show changes made while it was in the background

[vitalibondar]

On iPhone, with Fizzy added to the Home Screen, a card doesn't pick up changes made elsewhere once the app has been in the background. You switch away, someone moves the card or leaves a comment, you switch back, and the page still shows the old state. It stays that way until you pull to refresh or navigate away and back. On desktop the same change shows up live within a couple of seconds, so the server side and the cable connection look fine.

Steps

1. Add Fizzy to the Home Screen on iOS and open a card.
2. Switch to another app for about 30 seconds.
3. From another device, add a comment to that card.
4. Switch back to Fizzy. The comment isn't there.

What I think is going on

Two things, both tied to coming back from the background.

iOS presumably suspends the page and drops the WebSocket, so the Turbo stream broadcasts sent while it was away never arrive, and nothing fetches them after the page resumes.

And the service worker (/service-worker.js) serves documents networkFirst with networkTimeout: 3. Right after an iPhone wakes up the network is often slow for a few seconds, so a navigation in that window can get the cached copy instead of the current page. I haven't measured how often that part actually bites. But it would explain why a plain navigation right after resuming sometimes still shows stale content.

What we're running

We self-host Fizzy and patched it locally by appending this to application.js. After it went in, the same steps above show the new comment on return without any manual refresh (checked on an iPhone today).

import { Turbo } from "@hotwired/turbo-rails"

let hiddenAt = 0
const catchUp = () => Turbo.visit(location.href, { action: "replace" })

document.addEventListener("visibilitychange", () => {
  if (document.visibilityState === "hidden") { hiddenAt = Date.now(); return }
  if (hiddenAt && Date.now() - hiddenAt > 5000) catchUp()
})
window.addEventListener("pageshow", (event) => { if (event.persisted) catchUp() })

With turbo-refresh-method=morph and turbo-refresh-scroll=preserve already on the page, the reload is barely noticeable and scroll position stays put. The 5 second threshold is arbitrary, it's just there so quick app switches don't trigger a fetch.

This probably isn't the shape you'd want upstream (a Stimulus controller, or reconnecting the cable and letting streams catch up, might fit better). If it's useful I'm happy to open a PR along whichever lines you prefer.