Turbo: Support page morphing

Created on 24 February 2025, 2 months ago

Problem/Motivation

I'm debating whether this warrants a separate issue from 📌 Turbo: implement partial page updates Active as that overlaps heavily with page morphing, but perhaps it makes sense to have a dedicated issue just for this. Page morphing can be used both when navigating between pages and to refresh the current page when a signal arrives from the back-end.

Use-case: navigating between pages

This can make sense going between pages that are closely linked in terms of functionality, structure, purpose, etc. An example of this would be the different revisions of a page we have on Omnipedia, e.g.:

  1. https://omnipedia.app/wiki/2049/10/01/Zhupao
  2. https://omnipedia.app/wiki/2049/10/02/Zhupao
  3. https://omnipedia.app/wiki/2049/10/03/Zhupao
  4. Etc.

And their related revision diffs:

  1. https://omnipedia.app/wiki/2049/10/01/Zhupao/changes
  2. https://omnipedia.app/wiki/2049/10/02/Zhupao/changes
  3. https://omnipedia.app/wiki/2049/10/03/Zhupao/changes
  4. Etc.

Morphing between these without a full page transition would make a lot of sense from a UX point of view, and it should also allow preserving the scroll position - note that that's for refreshes but hopefully also works with navigation?

Use-case: refreshing the current page

We currently have Turbo cache disabled because several things are broken just in core alone (see 📌 Turbo: Re-enable Turbo cache once we can reliably detach before is cached Active ), and doesn't really make sense to try to make Turbo caching work fully because we can instead focus that time and energy into working on the PWA module to better support a cache-first network strategy; Turbo cache would only cache pages that have already been visited, but using a service worker would allow preemptively caching any number of pages in addition to pages already visited. In both cases, we can do what Turbo cache previews do, but using the cached content from the service worker:

  1. User clicks a link to visit a page, navigates via browser history, etc.
  2. Service worker services the cached copy instantly
  3. At the same time, service worker requests a fresh copy from the server
  4. If the response is received within a certain time frame (2 seconds by default? Can be configurable), do a page refresh morph to the new content

Steps to reproduce

Currently only full page transitions without morphing.

Proposed resolution

See above.

Remaining tasks

The first step would be to just try morphing when navigating between pages to see what breaks and what doesn't.

One problem I foresee would be behaviours that don't scope their attach/detach to the context they're provided.

User interface changes

We morphin' now.

API changes

Probably some minor changes and likely some new events will be added.

Data model changes

None. We don't store any data.

Feature request
Status

Active

Version

2.0

Component

Code

Created by

🇨🇦Canada ambient.impact Toronto

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Production build 0.71.5 2024