Ship code to open tabs

A tab open since yesterday runs yesterday’s code; tell it to reload.

Guillermo Rauch7 Principles of Rich Web Applications
Pushing data without pushing code is insufficient. If your data updates automatically, so should your code. Avoid API errors and improve performance.
rauchg.com · 2014Read article ↗
Guillermo Rauch7 Principles of Rich Web Applications
Keep in mind that in a traditional website, a page refresh accomplishes two things: reload the data and reload the code. Setting up a mechanism to push data without one to push code is not enough, especially in a world where a single tab (session) might stay open for a very long time.
rauchg.com · 2014Read article ↗
Guillermo Rauch7 Principles of Rich Web Applications
In the absence of that, a version number can be appended as a header to outgoing HTTP requests. The server can then compare it to its latest known version, opt to handle request or not, and advice the client.
rauchg.com · 2014Read article ↗

Both demos simulate the server and the tabs; nothing leaves this page.

1 · Deploy under an open tab

Deploy v2, then press Save in both tabs.

Server v1
Data onlyBad
no requests yet
Code knows it’s oldGood
no requests yet
// Every request says which build sent it.
const res = await fetch("/api/project", {
  method: "PATCH",
  headers: { "x-client-version": BUILD_ID },
  body: JSON.stringify(draft),
});

if (res.status === 409) {           // server: "you're stale"
  sessionStorage.setItem("draft", JSON.stringify(draft));
  toast("New version available", { action: "Reload", onClick: () => location.reload() });
}

// And the next navigation becomes a full load while stale.
router.beforeNavigate((to) => { if (stale) location.assign(to); });

2 · Server checks the version

Ship a few deploys, then send from an old tab.

Deploys and requestsIdle
      Min supported v1 · latest v1

      Why it matters, pros and cons

      Why it matters

      F5 reloads data and code. Push only data, and yesterday’s tab calls today’s API.

      Pros

      • Old tabs stop sending shapes the API no longer accepts.
      • Drafts survive: reload at a safe moment, not mid-typing.
      • Platforms do it too: Vercel’s Skew Protection pins old tabs.

      Cons

      • A forced reload mid-task loses state; ask, or wait for a nav.
      • Serving older versions costs the server; pick a window.
      • Additive, compatible APIs need far less of this.