Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add docs for the Navigation API #21960

Merged
merged 56 commits into from
Nov 20, 2022

Conversation

chrisdavidmills
Copy link
Contributor

Description

This PR adds reference documentation for the Navigation API.

Motivation

Readers will want information about this new API.

Additional details

Further details can be found in my Navigation API research document.

Related issues and pull requests

Fixes #21909

@chrisdavidmills chrisdavidmills requested review from a team as code owners October 31, 2022 11:37
@chrisdavidmills chrisdavidmills requested review from Elchi3 and dipikabh and removed request for a team October 31, 2022 11:37
@chrisdavidmills chrisdavidmills marked this pull request as draft October 31, 2022 11:37
@github-actions github-actions bot added the Content:WebAPI Web API docs label Oct 31, 2022
@github-actions
Copy link
Contributor

github-actions bot commented Oct 31, 2022

Preview URLs (55 pages)
Flaws (29)

Note! 54 documents with no flaws that don't need to be listed. 🎉

URL: /en-US/docs/Web/API/Window
Title: Window
Flaw count: 29

  • macros:
    • /en-US/docs/Web/API/Window/messageManager does not exist
    • /en-US/docs/Web/API/Window/performance redirects to /en-US/docs/Web/API/performance_property
    • /en-US/docs/Web/API/Window/returnValue does not exist
    • /en-US/docs/Web/API/Window/setResizable does not exist
    • /en-US/docs/Web/API/Window/home does not exist
    • and 20 more flaws omitted
  • broken_links:
    • Can't resolve /en-US/docs/The_message_manager
  • bad_bcd_links:
    • no explanation!
    • no explanation!
    • no explanation!
External URLs (170)

URL: /en-US/docs/Web/API/NavigationDestination
Title: NavigationDestination


URL: /en-US/docs/Web/API/NavigationDestination/getState
Title: NavigationDestination.getState()


URL: /en-US/docs/Web/API/NavigationDestination/index
Title: NavigationDestination.index


URL: /en-US/docs/Web/API/NavigationDestination/key
Title: NavigationDestination.key


URL: /en-US/docs/Web/API/NavigationDestination/sameDocument
Title: NavigationDestination.sameDocument


URL: /en-US/docs/Web/API/NavigationDestination/url
Title: NavigationDestination.url


URL: /en-US/docs/Web/API/NavigationDestination/id
Title: NavigationDestination.id


URL: /en-US/docs/Web/API/NavigationTransition
Title: NavigationTransition


URL: /en-US/docs/Web/API/NavigationTransition/finished
Title: NavigationTransition.finished


URL: /en-US/docs/Web/API/NavigationTransition/navigationType
Title: NavigationTransition.navigationType


URL: /en-US/docs/Web/API/NavigationTransition/from
Title: NavigationTransition.from


URL: /en-US/docs/Web/API/NavigateEvent
Title: NavigateEvent


URL: /en-US/docs/Web/API/NavigateEvent/hashChange
Title: NavigateEvent.hashChange


URL: /en-US/docs/Web/API/NavigateEvent/canIntercept
Title: NavigateEvent.canIntercept


URL: /en-US/docs/Web/API/NavigateEvent/downloadRequest
Title: NavigateEvent.downloadRequest


URL: /en-US/docs/Web/API/NavigateEvent/NavigateEvent
Title: NavigateEvent()


URL: /en-US/docs/Web/API/NavigateEvent/navigationType
Title: NavigateEvent.navigationType


URL: /en-US/docs/Web/API/NavigateEvent/intercept
Title: NavigateEvent.intercept()


URL: /en-US/docs/Web/API/NavigateEvent/destination
Title: NavigateEvent.destination


URL: /en-US/docs/Web/API/NavigateEvent/info
Title: NavigateEvent.info


URL: /en-US/docs/Web/API/NavigateEvent/scroll
Title: NavigateEvent.scroll()


URL: /en-US/docs/Web/API/NavigateEvent/userInitiated
Title: NavigateEvent.userInitiated


URL: /en-US/docs/Web/API/NavigateEvent/signal
Title: NavigateEvent.signal


URL: /en-US/docs/Web/API/NavigateEvent/formData
Title: NavigateEvent.formData


URL: /en-US/docs/Web/API/Window/navigation
Title: Window.navigation


URL: /en-US/docs/Web/API/NavigationCurrentEntryChangeEvent
Title: NavigationCurrentEntryChangeEvent


URL: /en-US/docs/Web/API/NavigationCurrentEntryChangeEvent/navigationType
Title: NavigationCurrentEntryChangeEvent.navigationType


URL: /en-US/docs/Web/API/NavigationCurrentEntryChangeEvent/NavigationCurrentEntryChangeEvent
Title: NavigationCurrentEntryChangeEvent()


URL: /en-US/docs/Web/API/NavigationCurrentEntryChangeEvent/from
Title: NavigationCurrentEntryChangeEvent.from


URL: /en-US/docs/Web/API/NavigationHistoryEntry
Title: NavigationHistoryEntry


URL: /en-US/docs/Web/API/NavigationHistoryEntry/getState
Title: NavigationHistoryEntry.getState()


URL: /en-US/docs/Web/API/NavigationHistoryEntry/index
Title: NavigationHistoryEntry.index


URL: /en-US/docs/Web/API/NavigationHistoryEntry/key
Title: NavigationHistoryEntry.key


URL: /en-US/docs/Web/API/NavigationHistoryEntry/sameDocument
Title: NavigationHistoryEntry.sameDocument


URL: /en-US/docs/Web/API/NavigationHistoryEntry/url
Title: NavigationHistoryEntry.url


URL: /en-US/docs/Web/API/NavigationHistoryEntry/id
Title: NavigationHistoryEntry.id


URL: /en-US/docs/Web/API/NavigationHistoryEntry/dispose_event
Title: NavigationHistoryEntry: dispose event


URL: /en-US/docs/Web/API/Navigation
Title: Navigation


URL: /en-US/docs/Web/API/Navigation/back
Title: Navigation.back()


URL: /en-US/docs/Web/API/Navigation/updateCurrentEntry
Title: Navigation.updateCurrentEntry()


URL: /en-US/docs/Web/API/Navigation/currententrychange_event
Title: Navigation: currententrychange event


URL: /en-US/docs/Web/API/Navigation/canGoForward
Title: Navigation.canGoForward


URL: /en-US/docs/Web/API/Navigation/transition
Title: Navigation.transition


URL: /en-US/docs/Web/API/Navigation/entries
Title: Navigation.entries()


URL: /en-US/docs/Web/API/Navigation/reload
Title: Navigation.reload()


URL: /en-US/docs/Web/API/Navigation/currentEntry
Title: Navigation.currentEntry


URL: /en-US/docs/Web/API/Navigation/traverseTo
Title: Navigation.traverseTo()


URL: /en-US/docs/Web/API/Navigation/canGoBack
Title: Navigation.canGoBack


URL: /en-US/docs/Web/API/Navigation/navigatesuccess_event
Title: Navigation: navigatesuccess event


URL: /en-US/docs/Web/API/Navigation/navigate_event
Title: Navigation: navigate event


URL: /en-US/docs/Web/API/Navigation/navigateerror_event
Title: Navigation: navigateerror event


URL: /en-US/docs/Web/API/Navigation/forward
Title: Navigation.forward()


URL: /en-US/docs/Web/API/Navigation/navigate
Title: Navigation.navigate()


URL: /en-US/docs/Web/API/Navigation_API
Title: Navigation API

(this comment was updated 2022-11-20 09:26:40.197769)

Copy link
Contributor

@domenic domenic left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Overall this looks great!

One thing I think will be especially helpful to document is the contrast with the existing history and location APIs. Probably that is best done on the individual API sub-pages, though.

files/en-us/web/api/navigation_api/index.md Outdated Show resolved Hide resolved

> **Note:** In this context "transition" refers to the transition between one history entry and another. It isn't related to CSS transitions.

> **Note:** You can also call {{domxref("Event.preventDefault", "preventDefault()")}} to stop the navigation entirely.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note that canceling traversals is not yet implemented anywhere, although we've updated the explainer and spec since we have an implementation in progress. I'm not sure whether that's necessary to mention here, or elsewhere, or not at all.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've updated it to

Note: In future implementations you will be able to call {{domxref("Event.preventDefault", "preventDefault()")}} to stop the navigation entirely. This is specced out, but not currently implemented anywhere.

We can always update it when the implementation lands. Let me know.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah, sorry, it's a bit more subtle than that. Canceling (most) push/reload/replace navigations is possible today. It's the traverse navigations which are still a future feature.

You can see the diff, which represents what's not possible yet but will be soon, in WICG/navigation-api@a430943

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah! I see. I've updated it again, to

Note: You can also call {{domxref("Event.preventDefault", "preventDefault()")}} to stop the navigation entirely in most cases. This works today for most push, reload, and replace navigations; cancellation of traverse navigations is not yet implemented.

I'll keep it simple for now here, and then link to your explainer text when it is published.

files/en-us/web/api/navigation_api/index.md Outdated Show resolved Hide resolved
files/en-us/web/api/navigation_api/index.md Outdated Show resolved Hide resolved
files/en-us/web/api/navigation_api/index.md Outdated Show resolved Hide resolved
files/en-us/web/api/navigation_api/index.md Outdated Show resolved Hide resolved
@chrisdavidmills
Copy link
Contributor Author

@domenic all interface landing pages now created; see preview URLs in #21960 (comment).

Copy link
Contributor

@domenic domenic left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looking great!

A few comments I left are applicable across more than one document; I didn't note them each time. Also some comments about adding more detail might not make sense at this point, if each method/property is going to end up with its own page.

files/en-us/web/api/navigateevent/index.md Outdated Show resolved Hide resolved
files/en-us/web/api/navigateevent/index.md Outdated Show resolved Hide resolved
files/en-us/web/api/navigateevent/index.md Outdated Show resolved Hide resolved
files/en-us/web/api/navigateevent/index.md Outdated Show resolved Hide resolved
files/en-us/web/api/navigateevent/index.md Outdated Show resolved Hide resolved
files/en-us/web/api/navigationdestination/index.md Outdated Show resolved Hide resolved
files/en-us/web/api/navigationdestination/index.md Outdated Show resolved Hide resolved
files/en-us/web/api/navigationtransition/index.md Outdated Show resolved Hide resolved
@chrisdavidmills
Copy link
Contributor Author

chrisdavidmills commented Nov 4, 2022

@domenic thanks for all the great review comments. I've answered them all, and added all the member pages for the Navigation interface.

@github-actions
Copy link
Contributor

github-actions bot commented Nov 7, 2022

This pull request has merge conflicts that must be resolved before it can be merged.

@domenic domenic mentioned this pull request Nov 14, 2022
4 tasks
Copy link
Collaborator

@wbamberg wbamberg left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is for NavigationHistoryEntry. Sorry to be slow getting through them.

files/en-us/web/api/navigationhistoryentry/index.md Outdated Show resolved Hide resolved
files/en-us/web/api/navigationhistoryentry/index.md Outdated Show resolved Hide resolved
files/en-us/web/api/navigationhistoryentry/index.md Outdated Show resolved Hide resolved
files/en-us/web/api/navigationhistoryentry/index/index.md Outdated Show resolved Hide resolved
files/en-us/web/api/navigationhistoryentry/index/index.md Outdated Show resolved Hide resolved
files/en-us/web/api/navigationhistoryentry/id/index.md Outdated Show resolved Hide resolved
files/en-us/web/api/navigationhistoryentry/id/index.md Outdated Show resolved Hide resolved
files/en-us/web/api/navigationhistoryentry/id/index.md Outdated Show resolved Hide resolved
files/en-us/web/api/navigationhistoryentry/index.md Outdated Show resolved Hide resolved
Comment on lines 60 to 83
function initHomeBtn() {
// Get the key of the first loaded entry
// so the user can always go back to this view.
const {key} = navigation.currentEntry;
backToHomeButton.onclick = () => {
navigation.traverseTo(key);
}
}

navigation.addEventListener("navigate", event => {
event.intercept({
async handler() {
// Handle single-page navigations
}
});
});

async function handleNavigate(url) {

// Navigate to a different view, but the button will always work.
await navigation.navigate(url).finished;

// ...
}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, this is clearer (to me anyway). FWIW you don't need this bit:

async function handleNavigate(url) {

  // Navigate to a different view, but the button will always work.
  await navigation.navigate(url).finished;

  // ...
}

...because navigate will intercept normal links as well, as it does in the demo. You could put the comment // Navigate to a different view, but the button will always work. just in the intercept handler:

Suggested change
function initHomeBtn() {
// Get the key of the first loaded entry
// so the user can always go back to this view.
const {key} = navigation.currentEntry;
backToHomeButton.onclick = () => {
navigation.traverseTo(key);
}
}
navigation.addEventListener("navigate", event => {
event.intercept({
async handler() {
// Handle single-page navigations
}
});
});
async function handleNavigate(url) {
// Navigate to a different view, but the button will always work.
await navigation.navigate(url).finished;
// ...
}
function initHomeBtn() {
// Get the key of the first loaded entry
// so the user can always go back to this view.
const {key} = navigation.currentEntry;
backToHomeButton.onclick = () => {
navigation.traverseTo(key);
}
}
// Intercept navigate events, such as link clicks, and
// replace them with single-page navigations
navigation.addEventListener("navigate", event => {
event.intercept({
async handler() {
// Navigate to a different view,
// but the "home" button will always work.
}
});
});

...just a suggestion though

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good call; I've updated these examples to use your listing suggestion. Thanks Will!

Copy link
Collaborator

@wbamberg wbamberg left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

OK, these are for NavigationEvent. Again apologies for being slow to get through them. I'd hoped to finish today but that isn't looking very likely.

{{APIRef("Navigation API")}}{{seecompattable}}

The **`canIntercept`** read-only property of the
{{domxref("NavigateEvent")}} interface returns `true` if the navigation can be intercepted, or `false` otherwise (e.g. you can't intercept a cross-origin navigation).
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(e.g. you can't intercept a cross-origin navigation)

I think it would be helpful to explain this a little more. Whenever I see an explanation that's only "e.g." I think, well this is an example, but what are the other cases?

The spec says:

Generally speaking, this will be true whenever the current Document can have its URL rewritten to the destination URL, except for cross-document back/forward navigations, where it will always be false.

I don't like "Generally speaking" there, but at least "can have its URL rewritten" seems to have a clear definition: https://html.spec.whatwg.org/multipage/nav-history-apis.html#can-have-its-url-rewritten. For "except for cross-document back/forward navigations, where it will always be false" I did find this on cross-document navigation: https://chromium.googlesource.com/chromium/src/+/main/docs/navigation_concepts.md#same_document-and-cross_document-navigations , which is presented as a Chromium thing but that seems comprehensible.

So could we say something like:

A navigation can be intercepted in the following circumstances:

  • For http and https URLs, only the path, query, and fragment portions of the new URL may differ from the current URL.
  • For file URLs, only the query and fragment portions of the new URL may differ from the current URL.
  • For all other schemes, only the fragment portion of the new URL may differ from the current URL.

See when a Document can have its URL rewritten.

An exception is for back/forward navigations in which the existing document is replaced with a new one (these are also called cross-document navigations). These navigations can never be intercepted.

?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The full explanation for this case goes beyond this, and requires reading the whole table at https://github.com/wicg/navigation-api#appendix-types-of-navigations . That's why the non-normative (for web developers) part of the spec uses the vague phrase "generally speaking", because it's too complex to summarize quickly.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

FWIW As a reader the normative information is what I want first; a general summary that will apply for most circumstances - because most of the time I'm reading for the gist.

But I would absolutely also want more precision on the most common cases as @wbamberg has done for http, https and file. If it can't be cannonical as a list, I'd note that "there are a number of other cases listed in the specification, covering X, Y, Z".

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've rewritten this to provide some examples, using some of Will's text, but I've also linked out to the spec for full information. This is one of those cases in which I don't think it's worth trying to repeat the full explanation on MDN. I think most web devs won't need it.

{{APIRef("Navigation API")}}{{seecompattable}}

The **`info`** read-only property of the
{{domxref("NavigateEvent")}} interface returns the `info` data value passed by the initiating navigation operation (e.g. {{domxref("Navigation.back()")}}, or {{domxref("Navigation.navigate()")}}), or `undefined` if no `info` data was passed.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Spec says null? https://wicg.github.io/navigation-api/#dom-navigateevent-info .Although actually the spec says it is null if the event did not come from navigate():

An arbitrary JavaScript value passed via navigation APIs that initiated this navigation, or null if the navigation was initiated by the user or via a non-navigation API.

I couldn't see what is specced if it did come from navigate() but no info was passed.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry, that part of the spec is wrong; it's undefined. I'm working on fixing it as part of whatwg/html#8502

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, I think I read undefined in the explainer somewhere. I've updated the syntax section to match, as that said false ;-)

- {{domxref("NavigateEvent.hashChange", "hashChange")}} {{ReadOnlyInline}}
- : Returns `true` if the navigation is a fragment navigation (i.e. to a fragment identifier in the same document), or `false` otherwise.
- {{domxref("NavigateEvent.info", "info")}} {{ReadOnlyInline}}
- : Returns the `info` data value passed by the initiating navigation operation (e.g. {{domxref("Navigation.back()")}}, or {{domxref("Navigation.navigate()")}}), or `undefined` if no `info` data was passed.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

null?

An arbitrary JavaScript value passed via navigation APIs that initiated this navigation, or null if the navigation was initiated by the user or via a non-navigation API.

(https://wicg.github.io/navigation-api/#dom-navigateevent-info)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See previous comment.

{{APIRef("Navigation API")}}{{seecompattable}}

The **`formData`** read-only property of the
{{domxref("NavigateEvent")}} interface returns the {{domxref("FormData")}} object representing the submitted data in the case of a `POST` form submission, or `null` otherwise.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
{{domxref("NavigateEvent")}} interface returns the {{domxref("FormData")}} object representing the submitted data in the case of a `POST` form submission, or `null` otherwise.
{{domxref("NavigateEvent")}} interface returns the {{domxref("FormData")}} object representing the submitted data in the case of a [`POST`](/en-US/docs/Web/HTTP/Methods/POST) form submission, or `null` otherwise.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks; I've updated this.


{{APIRef("Navigation API")}}{{seecompattable}}

The **`NavigateEvent`** interface of the {{domxref("Navigation API", "Navigation API", "", "nocode")}} is the event object for the {{domxref("Navigation/navigate_event", "navigate")}} event, which fires when [any type of navigation](https://github.com/WICG/navigation-api#appendix-types-of-navigations) is initiated (this includes usage of {{domxref("History API", "History API", "", "nocode")}} features like {{domxref("History.go()")}}). `NavigateEvent` provides access to information about that navigation, and allows developers to intercept and control the navigation handling.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As before we should IMO document "any type of navigation" on MDN.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Perhaps, but I'd like to do this as part of a future PR


### Return value

`undefined`.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
`undefined`.
None (`undefined`).

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

changed

// User submitted a POST form to a same-domain URL
// (If canIntercept is false, the event is just informative:
// you can't intercept this request, although you could
// likely still call .preventDefault() to stop it completely).
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure about "likely" here. Can I stop uninterceptable requests?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Often, yes. See the full table at https://github.com/wicg/navigation-api#appendix-types-of-navigations to know what situations canIntercept (can call intercept()) is true, vs. cancelable (can call preventDefault()) is true.


### Handling scrolling using `scroll()`

```js
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

added


## Examples

The general idea here is that the `signal` property can be passed to an associated {{domxref("fetch()")}} operation so that if the navigation is cancelled, it can be safely aborted, avoiding wasting bandwidth on fetches that are no longer needed.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
The general idea here is that the `signal` property can be passed to an associated {{domxref("fetch()")}} operation so that if the navigation is cancelled, it can be safely aborted, avoiding wasting bandwidth on fetches that are no longer needed.
The general idea here is that the `signal` property can be passed to an associated {{domxref("fetch()")}} operation so that if the navigation is cancelled, the `fetch` operation can be safely aborted, avoiding wasting bandwidth on fetches that are no longer needed.

("it" is ambiguous here)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good call; updated.

The **`userInitiated`** read-only property of the
{{domxref("NavigateEvent")}} interface returns `true` if the navigation was initiated by the user (e.g. by clicking a link, submitting a form, or pressing the browser's "Back"/"Forward" buttons), or `false` otherwise.

> **Note:** The table found at [Appendix: types of navigations](https://github.com/WICG/navigation-api#appendix-types-of-navigations) shows which navigation types are user-initiated.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Predictably :) I think it would be good to have this list on MDN.

Copy link
Contributor

@domenic domenic Nov 17, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've seen you leave this suggestion a few times, but I'd really suggest not duplicating the spec contents into MDN for these extreme details. It'd be good to have a single source of truth for this, so that as spec author and browser implementer, I don't have to worry about updating MDN when we change the behavior.

Copy link
Collaborator

@queengooborg queengooborg Nov 17, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

While I agree that de-duplicating data is great, especially when it comes to maintenance, I think that Will's suggestion to add the data to MDN is more than reasonable. Not only will this help keep the info in one easy-to-read article, but inherently, it will also help us better track changes to the spec if/when they occur. I don't expect it to change often enough that keeping MDN and the spec repo in sync should be a significant burden (and if it is, maybe the spec is getting updated too frequently). Additionally, if the spec's described behavior changes after browsers update to match the new behavior, we need to track this in MDN (BCD specifically) so that we can relay the information to developers, otherwise developers may be surprised when their website isn't working as expected in older/newer browsers (or worse, they don't notice, assuming there's no issue at all).

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

OK, well, it's up to you. I don't really understand what your criterion is for when you duplicate the spec vs. when you summarize it, but I hope you have a good system in place for monitoring spec changes.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

re monitoring spec changes (in specific lists / specific sections), this might be a useful service to suggest in reffy/webref land - I don't expect webref would extract information of that level of details, but setting up a per-section change notification system sounds like something we could probably set up if we have customers for it.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've raised this question with the MDN maintainers and if the consensus is not to include this I'm happy with that. But I'm not aware of any existing consensus or guideline that this level of spec detail should be off-limits to MDN.

I think @queengooborg makes a good point that if it can affect developers, and it's subject to change, isn't it a good thing for us to talk about it, so they know when it changes.

I hope you have a good system in place for monitoring spec changes

We could certainly do better here. @dontcallmedom , that sounds like a very good idea. We'd need processes on the MDN side to respond to notifications and the capacity to actually do something about it.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

for the record, I filed w3c/reffy#1114 to track that idea

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As per other comments; I'm happy to consider this addition at a later date, but I'd rather do it in a future PR, and get this one merged. I'm a bit on the fence about moving it; it is useful info, but it is complex and long-winded, and I'm not convinced that repeating it on MDN is the best use of my time, especially at this fairly nascent stage in the technology's lifespan, where it might possibly get tweaked a bit as more people start using the URL and providing more feedback.


There are a few perceived limitations with the Navigation API:

1. The current specification doesn't trigger {{domxref("Navigation.navigate_event", "navigate")}} on a page's first load. This might be fine for sites that use Server Side Rendering (SSR)—your server could return the correct initial state, which is the fastest way to get content to your users. But sites that leverage client-side code to create their pages may need an additional function to initialize the page.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
1. The current specification doesn't trigger {{domxref("Navigation.navigate_event", "navigate")}} on a page's first load. This might be fine for sites that use Server Side Rendering (SSR)—your server could return the correct initial state, which is the fastest way to get content to your users. But sites that leverage client-side code to create their pages may need an additional function to initialize the page.
1. The current specification doesn't trigger a {{domxref("Navigation.navigate_event", "navigate")}} event on a page's first load. This might be fine for sites that use Server Side Rendering (SSR)—your server could return the correct initial state, which is the fastest way to get content to your users. But sites that leverage client-side code to create their pages may need an additional function to initialize the page.

(because with "trigger navigate" it's not super obvious this is an event (navigate is used a lot in this API)).

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yup, good call. Updated!

@wbamberg
Copy link
Collaborator

@chrisdavidmills , I've been through everything here at least once and commented. I've been back through things you have addressed and they look good. There are still some thing from the last few days' reviews that are outstanding - I will take another look when they're done or if you want to talk about them any more that's fine too of course.

@chrisdavidmills
Copy link
Contributor Author

@chrisdavidmills , I've been through everything here at least once and commented. I've been back through things you have addressed and they look good. There are still some thing from the last few days' reviews that are outstanding - I will take another look when they're done or if you want to talk about them any more that's fine too of course.

Thanks @wbamberg ; I really appreciate the effort you've made in giving this a thorough review. I've answered all your most recent comments, and also gone back and found a bunch of ones I missed last time round. Let me know if you feel that I've missed anything.

Copy link
Collaborator

@wbamberg wbamberg left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 thank you for your patience Chris!

@wbamberg wbamberg merged commit f12a6b6 into mdn:main Nov 20, 2022
@chrisdavidmills chrisdavidmills deleted the add-navigation-api-ref-docs branch November 20, 2022 18:29
@chrisdavidmills
Copy link
Contributor Author

@wbamberg woo hoo!

hamishwillee pushed a commit to hamishwillee/content that referenced this pull request Dec 12, 2022
* add docs for the Navigation API

* Update files/en-us/web/api/navigation_api/index.md

Co-authored-by: Domenic Denicola <[email protected]>

* Update files/en-us/web/api/navigation_api/index.md

Co-authored-by: Domenic Denicola <[email protected]>

* Update files/en-us/web/api/navigation_api/index.md

Co-authored-by: Domenic Denicola <[email protected]>

* updating landing page according to domenics comments

* remaining interface pages plus assorted fixes

* add all member pages for Navigate

* making fixes for domenic review comments

* fix macro error

* add member pages for NavigationDestination and NavigationHistoryEntry

* attempt to fix folder name casing

* fix casing issue in directory name

* add all remaining pages, fix flaws

* adding description of when disposal occurs

* Update files/en-us/web/api/navigation_api/index.md

Co-authored-by: wbamberg <[email protected]>

* Update files/en-us/web/api/navigation_api/index.md

Co-authored-by: wbamberg <[email protected]>

* Update files/en-us/web/api/navigation_api/index.md

Co-authored-by: wbamberg <[email protected]>

* Update files/en-us/web/api/navigation_api/index.md

Co-authored-by: wbamberg <[email protected]>

* Update files/en-us/web/api/navigation_api/index.md

Co-authored-by: wbamberg <[email protected]>

* Update files/en-us/web/api/navigation_api/index.md

Co-authored-by: wbamberg <[email protected]>

* Update files/en-us/web/api/navigation_api/index.md

Co-authored-by: wbamberg <[email protected]>

* Update files/en-us/web/api/navigation_api/index.md

Co-authored-by: wbamberg <[email protected]>

* Update files/en-us/web/api/navigation_api/index.md

Co-authored-by: wbamberg <[email protected]>

* adding fixes for wbamberg comments

* adding fixes for wbamberg comments

* making fixes for wbamberg comments

* Update files/en-us/web/api/navigation/index.md

Co-authored-by: wbamberg <[email protected]>

* Update files/en-us/web/api/navigation/updatecurrententry/index.md

Co-authored-by: wbamberg <[email protected]>

* Update files/en-us/web/api/navigation/updatecurrententry/index.md

Co-authored-by: wbamberg <[email protected]>

* Update files/en-us/web/api/navigation/updatecurrententry/index.md

Co-authored-by: wbamberg <[email protected]>

* Update files/en-us/web/api/navigation/updatecurrententry/index.md

Co-authored-by: wbamberg <[email protected]>

* Update files/en-us/web/api/navigation/traverseto/index.md

Co-authored-by: wbamberg <[email protected]>

* Update files/en-us/web/api/navigation/back/index.md

Co-authored-by: wbamberg <[email protected]>

* Update files/en-us/web/api/navigation/cangoback/index.md

Co-authored-by: wbamberg <[email protected]>

* Update files/en-us/web/api/navigation/cangoforward/index.md

Co-authored-by: wbamberg <[email protected]>

* Update files/en-us/web/api/navigation/currententry/index.md

Co-authored-by: wbamberg <[email protected]>

* Update files/en-us/web/api/navigation/forward/index.md

Co-authored-by: wbamberg <[email protected]>

* Update files/en-us/web/api/navigation/navigate/index.md

Co-authored-by: wbamberg <[email protected]>

* Update files/en-us/web/api/navigation/navigate/index.md

Co-authored-by: wbamberg <[email protected]>

* Update files/en-us/web/api/navigation/navigate/index.md

Co-authored-by: wbamberg <[email protected]>

* Update files/en-us/web/api/navigation/reload/index.md

Co-authored-by: wbamberg <[email protected]>

* Update files/en-us/web/api/navigation/reload/index.md

Co-authored-by: wbamberg <[email protected]>

* Update files/en-us/web/api/navigation/transition/index.md

Co-authored-by: wbamberg <[email protected]>

* Update files/en-us/web/api/navigation/traverseto/index.md

Co-authored-by: wbamberg <[email protected]>

* Update files/en-us/web/api/navigation/traverseto/index.md

Co-authored-by: wbamberg <[email protected]>

* fixing linter trailing space errors

* add structured-clonable information to navigate()

* add structured-clonable information to reload() and updateCurrentEntry()

* making fixes in response to wbamberg navigationhistoryentry comments

* moooooar fixes for wbamberg comments

Co-authored-by: Domenic Denicola <[email protected]>
Co-authored-by: Schalk Neethling <[email protected]>
Co-authored-by: wbamberg <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Content:WebAPI Web API docs
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Intent to document: Navigation API
6 participants