Revamp when navigate fires, is cancelable, and is respond-able #56

domenic · 2021-03-03T19:07:56Z

Closes Forward/Back doesn't trigger navigate could cause restoration headaches #53 by allowing respondWith() for same-document back/forward navigations (but not yet allowing preventDefault(); that's Cancelling UI initiated navigations (back/forward) #32).
Closes Naming and precise definition of event.sameOrigin #51 by transitioning from event.sameOrigin to event.canRespond, which has updated semantics.
Does not fire navigate events for document.open(), as per some initial implementation investigations that's more trouble than it's worth.
Adds an example for special back/forward handling in the navigate event, per Forward/Back doesn't trigger navigate could cause restoration headaches #53 (comment).
Makes the appendix table a bit more precise about userInitiated, and expands it to cover cancelable and canRespond.

@natechapin and @tbondwilkinson, I'd love your review of these changes.

* Closes #53 by allowing respondWith() for same-document back/forward navigations (but not yet allowing preventDefault(); that's #32). * Closes #51 by transitioning from event.sameOrigin to event.canRespond, which has updated semantics. * Does not fire navigate events for document.open(), as per some initial implementation investigations that's more trouble than it's worth. * Adds an example for special back/forward handling in the navigate event, per #53 (comment). * Makes the appendix table a bit more precise about userInitiated, and expands it to cover cancelable and canRespond.

tbondwilkinson · 2021-03-03T20:22:30Z

README.md

-  // Don't intercept cross-origin navigations; let the browser handle those normally.
-  if (!e.sameOrigin) {
+  // Some navigations, e.g. cross-origin navigations, we cannot intercept. Let the browser handle those normally.
+  if (!e.canRespond) {


I had to think for a while before remembering that you can still cancel these navigations, even if you can't respond to them. Maybe an example? Otherwise some people may wonder why this is even needed

https://github.com/WICG/app-history#example-single-page-app-redirects is kind of that example. I split the examples so the most central ones were first and the less central ones were after the explanatory subsections, but maybe that was mistake.

tbondwilkinson · 2021-03-03T20:25:47Z

README.md

+  }
+
+  const isBackForward = appHistory.entries.includes(event.destination);
+  let { key } = event.destination;


hypernit, let {key} is more common in the JS code I see, but maybe this is more common in specs?

tbondwilkinson · 2021-03-03T20:28:06Z

README.md

+- User-initiated [cross-document](#appendix-types-of-navigations) navigations via browser UI, such as the URL bar, back/forward button, or bookmarks.
+- [`document.open()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/open), which can strip off the fragment from the current document's URL.
+
+User-initiated navigations of this sort are outside the scope of the webpage, and can never be intercepted or prevented, even if they are to same-origin documents. On the other hand, we do allow the page to intercept user-initiated _same_-document navigations via browser UI, e.g. if the user changes the fragment component in the URL bar.


This "even if they are to same-origin documents" only refers to document.open() right? If so, move it into that bullet, otherwise it's confusing because it looks like it's also possible in bullet 1

No, this is meant to cover cases like:

You are on https://example.com/foo

The user types https://example.com/bar in the URL bar

ah okay I got confused by same-origin same-document again :)

tbondwilkinson · 2021-03-03T20:28:26Z

README.md

+- User-initiated [cross-document](#appendix-types-of-navigations) navigations via browser UI, such as the URL bar, back/forward button, or bookmarks.
+- [`document.open()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/open), which can strip off the fragment from the current document's URL.
+
+User-initiated navigations of this sort are outside the scope of the webpage, and can never be intercepted or prevented, even if they are to same-origin documents. On the other hand, we do allow the page to intercept user-initiated _same_-document navigations via browser UI, e.g. if the user changes the fragment component in the URL bar.


What about clicking a cross-document link?

Yeah, that's fine and interceptable. I guess I messed up by abbreviating "User-initiated cross-document navigations via browser UI" to "User-initiated navigations of this sort". This is meant to be only about the first bullet.

frehner

small clarification

frehner · 2021-03-03T21:09:25Z

README.md

+
+First, the following navigations **will not fire `navigate`** at all:
+
+- User-initiated [cross-document](#appendix-types-of-navigations) navigations via browser UI, such as the URL bar, back/forward button, or bookmarks.


I may be reading this wrong, but you list user-initiated cross-document navigations via... back/forward button as something that will never fire navigate here.

yet below on line 372 it says user-initiated navigations (cross- or same-document) via browser's back/foward buttons which implies that navigate is fired (else there would be no need to mention event.preventDefault() ?)

also the table appears to list browser back/forward as firing navigate.

am I confused or are these at odds?

Good catch. Listing cross-document browser back/forward navigations as non-cancelable is redundant since they won't fire navigate at all. Fixed.

As for the table, it says "Yes †*" where - † = No if cross-document (and * = No if the URL differs in components besides path/fragment/query). I struggled with these "Yes" table entries; most of them are "Yes except in specific rarer circumstances", but that cell has more serious exceptions. Any suggestions are welcome.

natechapin · 2021-03-03T22:55:49Z

README.md

+|Browser UI (non-back/forward other)|Always cross|No|—|—|—|
+|`<a>`/`<area>`|Either|Yes|Yes ‡|Yes|Yes *|
+|`<form>`|Either|Yes|Yes ‡|Yes|Yes *|
+|`<meta http-equiv="refresh">`|Either|Yes|No|Yes|Yes *|


Drive-by nitpick: meta Refresh and the Refresh header will always be cross-document, since they're effectively a reload. Same with form submission.

Not true in Firefox, it turns out! https://boom-bath.glitch.me/meta-refresh.html fun times.

frehner · 2021-03-04T16:29:26Z

README.md

+Sometimes it's desirable to handle back/forward navigations specially, e.g. reusing cached views by transitioning them onto the screen. This can be done by branching as follows:
+
+```js
+appHistory.addEventListener("navigate", e => {


I think you need async here?

Suggested change

appHistory.addEventListener("navigate", e => {

appHistory.addEventListener("navigate", async (e) => {

Oh, the problem here is I need to wrap this all in respondWith.

tbondwilkinson reviewed Mar 3, 2021

View reviewed changes

domenic added 2 commits March 3, 2021 15:42

Try to make confusing paragraph less confusing

fb31045

Clarify the "how this example responds"

6574575

frehner reviewed Mar 3, 2021

View reviewed changes

Fix cannot be canceled condition

2294c36

natechapin approved these changes Mar 3, 2021

View reviewed changes

frehner reviewed Mar 4, 2021

View reviewed changes

domenic added 2 commits March 4, 2021 15:27

Wrap in respondWith

56d3a1b

Note non-interop

39a26b7

domenic merged commit 5920e01 into main Mar 4, 2021

domenic deleted the navigate-and-respond branch March 4, 2021 20:47

domenic mentioned this pull request Mar 5, 2021

Better code ergonomics for URL rewriting use cases #5

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Revamp when navigate fires, is cancelable, and is respond-able #56

Revamp when navigate fires, is cancelable, and is respond-able #56

domenic commented Mar 3, 2021

tbondwilkinson Mar 3, 2021

domenic Mar 3, 2021

tbondwilkinson Mar 3, 2021

tbondwilkinson Mar 3, 2021

domenic Mar 3, 2021

tbondwilkinson Mar 3, 2021

tbondwilkinson Mar 3, 2021

domenic Mar 3, 2021

frehner left a comment

frehner Mar 3, 2021 •

edited

Loading

domenic Mar 3, 2021

natechapin Mar 3, 2021

domenic Mar 4, 2021

frehner Mar 4, 2021

domenic Mar 4, 2021


		First, the following navigations will not fire `navigate` at all:

		- User-initiated [cross-document](#appendix-types-of-navigations) navigations via browser UI, such as the URL bar, back/forward button, or bookmarks.

	appHistory.addEventListener("navigate", e => {
	appHistory.addEventListener("navigate", async (e) => {

Revamp when navigate fires, is cancelable, and is respond-able #56

Revamp when navigate fires, is cancelable, and is respond-able #56

Conversation

domenic commented Mar 3, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

frehner left a comment

Choose a reason for hiding this comment

frehner Mar 3, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

frehner Mar 3, 2021 •

edited

Loading