Tracking Issue: Full-page client-side navigation #60951
Description
What problem does this address?
Full-page, client-side navigation (for lack of a better name) is another navigation mode we want to include in the Interactivity API along with the current region-based, client-side navigation already implemented.
Region-based navigation works by updating the HTML of those regions defined on the current and target pages. When there are no matching regions between the two pages, navigation is delegated to the browser, and the page is reloaded. In such cases, the application's JS state is reset, and it is not possible to implement features such as keeping a video open or a song playing while navigating the page.
In contrast, full-page navigation updates the HTML of the entire page when navigating without the need to specify regions. This allows you to transition from one page to another on the site while maintaining the application's state. This is, in fact, what is implemented at https://wpmovies.dev/, although that implementation needs to be polished and improved before it can be published.
In that regard, @SantosGuillamot has created a PR with a first iteration under an experimental flag in #59707, although work remains to be done, especially in relation to the handling of new assets appearing on the target page, whether inside <head> or <body>. This feature is also missing for region-based navigation.
Current tasks
The following list of tasks is based on feedback received in #59707:
-
Explore how to modify the body tag without the hack: link. - Revisit how to fetch head assets: link.
- Change innerText for textContent and revisit how styles are injected: link.
- Check if Preact fails to reconcile scripts correctly when doing client-side navigation is still an issue.
- If the stylesheet remains the same, it should probably be left as-is: link.
- Explore how this interacts with Speculation Rules API: link.
- Explore if we want to listen to
touchstartin addition tomouseenteron mobile devices for prefetching: link. (Maybe on click is enough) - Explore how to update query attribute when the experiment is enabled: link. It looks like a core bug (see ticket/56417).
- Accept only a string in the
urlparameter and adapt the tests to reflect that: link. -
Explore deeper how to use event delegation in the client: link.- Already implemented in d72cd02
- Add e2e tests: link.
- Fix valid link logic to handle multisites and subdirectories: link
- Consider adding
touchstartor changingmouseenterevent topointerenterfor prefetching: link - Pass URLs ineligible for client-side navigation from PHP (e.g.
get_admin_url(),wp_login_url()) as opposed to hard-coding them: link