The history API is dead. Long live the navigation API | HTTP 203

[@terrible_-]

Will always miss the "So...." intros :-(

[@franklemanschik_de]

Its Not the Same since surma ist away Jake still performs even Mrs Green performs Well but surma is.missing.

[@dave6012]

@@franklemanschik_de missing is not a property of is

[@gradientO]

history api became a history

[@avilde]

Not allowing you to talk in Google I/O is just beyond me. Your show is by far most entertaining and useful then any other thing Google Devs put out.

[@jakearchibald]

To be fair, I was already involved in two talks, and there are finite resources for the filming and editing 😀

[@domenicdenicola1045]

I'm sorry Jake! We'll rename it intercept, just for you!!

[@jakearchibald]

yay! (fwiw this was filmed before we started talking about API tweaks on GitHub)

[@kalleguld]

Please show the code for longer! For example, at 6:30 where you start talking about a small detail about the code, but don't show it. You pretty much have to rewind to get what Jake is talking about.

[@jakearchibald]

Ah sorry, I usually catch these in the first edit, but I missed this one.

[@NicholasPedroso]

Just pause the video? By the way amazing episode

[@Keno_jm]

@@NicholasPedroso By pausing the video you wouldn't hear the rest of the discussion where additional points are made.

[@GodOfMacro]

@@Keno_jm the trick is to pause the video to read the code and then listen to the points made by starting the video again

[@dave6012]

@@GodOfMacro I usually open 2 browsers, one in incognito, then the second into a codepen, then press the back button until I reach the point in the video.

[@terrible_-]

Jake with the general "F1" t-shirt on lmao. I support all the teams! I want everyone to have a good time!

[@jakearchibald]

Spot on! As long it's a good race, I'm happy. UNLESS THE FIA MANUFACTURE THE RESULT yeah?

[@ZevIsert]

I was thinking those were Redbull socks before I noticed the shirt

[@doug7897]

Personally the "back" button in the header should not only go to the All view, but treat it as a forward navigation. It's basically the same functionality as if I click a sites logo to go to the homepage from an interior page, and clicking back brings me to that interior page. By having it jump back multiple steps, the user now has the weird situation of needing to click forward 2-3 times to return to the video.

[@31redorange08]

Yeah, I expected it to add a navigation entry.

[@jakearchibald]

Seems weird to me that a back arrow would go forwards. That certainly isn't how native apps work.

[@stevefox408]

in this case it feels like the back link is acting like a close link on a modal and should go back to the page "underneath" (which it does), though I'm not sure that going to "Index: All" would be equally as valid

[@jakearchibald]

@@stevefox408 Yeah, that's a nice way of putting it, and also fits in with the visual transition that's used

[@atsourno]

I want that CSS t-shirt...

[@BillyBraga]

Very interesting as always. Maybe consider adding a compressor on the audio, there was a huge volume difference in the sound at some moments.

[@cassieevans8790]

entirely the fault of my boomy laugh I think.

[@SRISWA007]

Seems like there will be some interview questions that'll be asked out of the `navigation` API. Btw, thoroughly enjoyed this video.

[@shifronim8950]

This is like dream of every programmer to tell the own topic to a very nice person, like Cassie Evans.

[@cassieevans8790]

🥺 owh 💜

[@riddixdan5572]

Can't wait for wider adoption of this api. Looks really exciting.

[@patriciaverso]

17:38 "I don't think we get a third go at this" Well, look at Java's Date API... How many goes has it undergone???

[@31redorange08]

Two?

[@lp177]

A small bug on the demo link: if we reduce and then enlarge the height of the screen or open and close console, the height of the content is definitely reduced until page reload ^^'

[@jakearchibald]

What version of Chrome, and do you have any flags enabled?

[@lp177]

@@jakearchibald 102.0.5005.61 I see the same bug on fresh install of chromium (102.0.5005.61 also) without touch to any flag, when I open then close or change size of console / window

[@jakearchibald]

​@@lp177 did you click on anything to trigger the bug, or does the bug happen as soon as the page loads? Can you paste what it says after "command line" on chrome:version?

[@jurgentreep]

Nice socks Jake! As for the history API I gave up on it very quickly and used a library ever since. Let's see if the navigation API changes things.

[@theory-in-motion]

It shouldn't change things any more than doing all HTML in vanilla JS. It should, however, make it much easier to write much nicer abstractions and libraries for your renderer of choice. Or, if you already have a nice library, it should make it much less painful for the author of said library in future revisions.

[@jakearchibald]

@@theory-in-motion there are a couple of comments like this that assume you have to pull in a big library to handle history stuff. Maybe that's because the old history API is so bad? With this new API, in many cases you won't need a big library to handle it for you.

[@theory-in-motion]

@@jakearchibald Absolutely. I don't expect it to need clunky libraries, more that this should serve well to idiomatically fit whatever paradigm you are in. If you are writing Elm, or Purescript, this API should back them well, without having to bail out to JS; frameworks like Remix ought to be able to build on it cleanly, et cetera. Personally, I think it's great when an API is written not only in a way that supports libraries well, but also works well on its own. People doing vanilla / webcomponents get a good experience. People getting simpler / smaller routing libraries using this under the covers get a better experience than what came before. People writing and maintaining those routers, or the Angular router / react-router get a better experience; wins all around. I'm sure there will be a number of people who will bake all of the routing of their entire 30,000 LoC SPA/PWA directly into that event-listener, for ... reasons... but I can see a lot of different ways to tidily abstract and interface with it, library or not. So kudos on the design.

[@dogoku]

While I understand that the new navigation event is much better, at 7:08, you should be adding a single click event listener on the window and filter for link clicks, instead of looping through every single link and adding listeners separately. Event delegation is your friend!

[@jakearchibald]

Totally agree. This doesn't always work in practice, which is why frameworks like Next give you a link component, just so they can add the events.

[@LuLeBe]

@@jakearchibald just out of curiosity, when would it not work? Is it because having an img or so inside a link would make the image be the e.target or what's going on?

[@jakearchibald]

@@LuLeBe it's mostly cases where other event listeners jump in do things like stopping propagation of the event

[@jakearchibald]

@@dogoku unless someone else also adds a capturing event 😀. The point is, a navigation event like this avoids those issues, and also captures navigations that aren't the result of clicking a link.

[@hrgwea]

@@jakearchibald The first capturing event listener added to the window object cannot be prevented by any other listener. Such a listener will always see all events no matter what. I call this the "prime listener" and I use it when I need guaranteed access to an event regardless of what any other listener is doing.

[@tmbarral664]

Jake (from Bluesock)..... ;)

[@a11aaa11a]

Also that last one should be searching for the number of elements in an array split by "/" being at least one less than the current url's, instead of startsWith("/with-") to make it more generalizable.

[@jakearchibald]

I think URLPattern would be even better, but I wanted to keep it simple

[@a11aaa11a]

@@jakearchibald reasonable, I just think one could make something more generalizable (assuming a consistent-depth differentiation of navigation levels and corresponding conceptual UI levels) than a direct pattern match by just checking how many slashes are in the path (excluding trailing, which could be done by counting entry[i].url.split("/").length).

[@jakearchibald]

@@a11aaa11a seems pretty fragile. It isn't guaranteed that all URLs that match that will count as a filtered home page.

[@a11aaa11a]

I think that flag to ignore an in history navigation is critical -- I think default should have been to not preserve history in fact. If I'm navigating through that demo app and there's a chat widget and I entered into a conversation and press the in-app back button from the video page, I fully expect to stay on the conversation in the chat widget but then be brought back to the surma page. If I'm brought out of that conversation, the navigation will feel very broken. A good function to add would be "go back to the last page in the same document and ignore the entries in other documents", but that would still have an ugly history that's very confusing to the user if they use the browser back button. I think browser back buttons should get smarter as well: take a non-hierarchical sitemap (a graph, not strictly a tree; this is why I hate filesystem-based routing and url structures), map out the user's path through it, and let them choose to go to the parent from which they came or the most recent entry even if it's a sibling node. Then let them choose, in the case of s, which graph to navigate. I think this would be an entirely valid use case for a full (optional) sidebar exploration view. But the most basic would be to just have up and down arrows in addition to the left and right that are currently in the browser bar.

[@JohnFarrellDev]

Going to miss Surma but this was a great presentation, cheers Jake.

[@olivarra1]

A problem I've always struggled is in-page back button when someone opens your page directly in the "detail" view. In that example, imagine someone browses into a video, copies the URL and shares it with a colleague. What happens when that colleague opens the page directly on the video, and presses the back button in the page? The best solution I came up with is to either replaceState or pushState. Would the new navigation API add a different way of handling this case?

[@jakearchibald]

In the code I wrote for the episode, it would do a forwards navigation to the main screen. However, you could decide to avoid showing the back arrow if there's no particular place to go back to - that's something you can easily do with the Navigation API that's pretty much impossible with the old history API

[@mustafasoran7810]

Another great one. Thank you both.

[@Zdman2001]

Is allowing a site to see all of a user's history a privacy issue? Or is there some limitations on getting the history for sites outside of the current domain?

[@jakearchibald]

It's limited to contiguous entries of the same origin

[@vhoyer]

Yeah, that was a big question I had as well, thanks:)

[@gouravkhator]

@@jakearchibald Hello Jake, I have some doubts on your response.. Let's say from my blog, you open the KZbin in the same tab, then when you go back in contiguous manner, you can easily goto my blog, which is on different origin obviously. Please explain the same.

[@jakearchibald]

@@gouravkhator KZbin and your blog are different origins, so they won't have visibility to each other's history entries. If you navigate like this: A - your blog B - KZbin C - your blog again D - another page on your blog If you're on D, it will only be able to see the entries C and D. If you're on A, it will only be able to see the A entry. That's what I mean by contiguous entries of the same origin.

[@gouravkhator]

@@jakearchibald Got that.. But the behaviour we see in browsers when we go from 1 origin to another in same tab and back to the 1st origin, that is what the browsers store the entries for all origins in that same tab contiguously. But the websites themselves would only see entries of their respective origin contiguously.. Did I decode ur sentence correctly, or is it still incorrect?

[@Dygear]

I expect a browser back button to take me to my previous view. I expect a page's back button to bring me up a level. I don't know if that's what expects because it feels that it's application specific and maybe even webpage specific.

[@jakearchibald]

I think the problem is that "previous view" is really tricky to define. If you scroll one pixel down, have you changed the view? If you expand a details element, have you changed the view? If you check a checkbox, have you changed the view? Etc etc. See the filtering example in this talk - me and Cassie disagreed, and don't know which is right.

[@Dygear]

@@jakearchibald that’s a great point. Anchor links that take me to a different section on the same page is a pretty concrete example of a view shift that’s “backed by navigation.” But that’s not to say it’s the only way to experience a navigation state change.

[@Pfoffie]

Very interesting and on point. Can’t wait for that API

[@tacklemcclean]

A challenge for your here Jake! The URL start "with-" is a bit volatile, you might later rename it to "cohost-" and then you have to remember to also change your event listener. No biggie in a small project of course, but a challenge nonetheless - how would you solve it if you are not allowed to evaluate your decision based on the URL itself? Storing entry keys some place extra?

[@jakearchibald]

Yeah! You can store data along with a history entry, so this could contain the page type for instance.

[@Manish-fm5iv]

Very late but good to see navigation observables. I used event delegation in the past but would create a mess on a larger app.

[@shgysk8zer0]

I suspect that there will be privacy concerns raised regarding `navigation.entries()` which might block implementation in other browsers. And personally, I think that it should be introduced in a more basic form with a navigate event that includes the beginning and destination URL. The Navigation API seems like a great improvement... But I don't think it can be polyfilled. Making its introduction a more basic version might help with that, which will make it easier to polyfill (probably involving MutationObserver and link click handlers), which will make adoption safer and quicker. This is especially important if other browsers refuse to implement it because of the navigation entries issue.

[@jakearchibald]

I don't see the privacy problem. The visibility is same-origin.

[@THEapphacker]

I really hope they add independent history states for s. I work on a learning platform where we learning tools and they use history for their own state and it messes with the app back navigation, as discussed in this video. Is there any reason this isn't done already?

[@jakearchibald]

Time and resources. I've been working on the HTML spec parts for this, but it required the whole of the navigation spec to be rewritten, and lots of consensus building to happen along the way.

[@THEapphacker]

@@jakearchibald is that to say the work is abandoned? 😕 I appreciate your efforts on this, either way.

[@jakearchibald]

@@THEapphacker definitely not abandoned, just takes time and resources.

[@jakearchibald]

Just to give you a taste of the amount of work needed just for the foundations github.com/whatwg/html/pull/6315

[@DrRobrez]

I love this, thanks for sharing

[@hedgiehogUK]

The photo (memorial of Surma?) is no longer on the shelf at the back of the set. I'm sad 😭

[@jakearchibald]

Maybe we should have kept it longer. We used to have a little memorial to Paul, but we removed it when folks didn't know who it was, and they thought it was really a friend who died.

[@hedgiehogUK]

@@jakearchibald I remember the little memorial to Paul... though I didn't know why it was there (until I researched!). Nah, we have to move on, don't we, eventually. You made a decent decision 👍

[@blenderpanzi]

I hope your actual JavaScript doesn't just call event.preventDefault() but only does it if clicked with the primary mouse button and no modifier keys pressed. I hate pages that don't do that check, because you can't right click, middle click/ctrl click (open in new tab).

[@wtho]

The 'navigate' event listener only does get triggered if the navigation was clicked without a modifier. Otherwise that tab will not navigate and thus the listener will not get triggered.

[@blenderpanzi]

@@wtho Yes, I meant for the old code that doesn't use this new API. :D

[@wtho]

I see. But in those cases it's just implemented in a bad way using buttons or other elements with click listeners instead of anchors with href. All clicks that invoke a direct navigation (url change) should be anchors so the middle click works.

[@blenderpanzi]

@@wtho Yes, but it being an anchor is not enough. If you want navigation in a SPA and have to use the old method you need to take care of the things I said (tutorials and thus real SPAs usually don't).

[@wtho]

@@blenderpanzi yeah, but using an anchor, with href and handling the click event (preventing default but using history api) is how it's done. For cases like the back button in the video you'd have to use a default href or a set a precomputed one on rendering. Precomputing one by looking at the navigation entries makes it much easier with the new API. I still believe avoiding an anchor with href by using a button (because it's difficult to guess the right href) in these scenarios is wrong.

[@snapstromegon]

Without having watched it all: My answer to the question around 4:00 would've been in line with Cassie's. But this would've been different, if we were on the first video. To put in some unclear words: I would expect it to go back to the exact screen I had before on the previous page, if it had any content connection to it. So in this case the navigation from the "videos overview" to the "video page" would've shared the content of the video I clicked. So if I now go back to the previous page, I'd expect the previous page to be where I left it. But if I click on a recommendation on the "video page", now the new content has nothing to do with the content I saw on and interactions I made with the last state of the "videos overview". For that reason it should go back to the initial state of the "videos overview". I hope this is at least somewhat understandable.

[@LuLeBe]

Hm so you mean to back to unfiltered overview in that case? Let's say it's KZbin, following history: 1. Home 2. Search (for "fish" maybe) 3. video about sharks 4. Recommended video about mars rovers Back should then go to home instead of search? If the recommendation was maybe "sharks pt2" it would still relate to the search though. I think that would make your argument less valid. Either way is fine imo, probably need a few people to just test it and see how it feels or even have some analytics to see how often people go back once more or so. Anything is better than Spotify really (where back takes you back one page, might go from artist to album back to artist back to another album back to artist again xD)

[@snapstromegon]

@@LuLeBe I think search pages are a special case and you could also debate that related recommendations are also related to the filtered view. Overall there is probably no solution that always feels "right".

[@jakearchibald]

I don't think I agree, but the navigation API would absolutely let you write logic for this.

[@nathnolt]

I feel like the s should have an attribute to make them independent, so it's almost as if you have 2 sites running at the same time. Esoteric question: how do framesets work? are they controlled independently? or are they pretty much the same as s?

[@jakearchibald]

I said the thing about s in the episode 14:22 😀. The current behaviour comes from framesets, so they behave the same

[@RomanSteiner_xD]

So, `event.transitionWhile` is now `event.intercept` in the spec, but in Chrome 102 it's still `.transitionWhile`. Will Chrome like deprecate `.transitionWhile` and replace it with `.intercept` ?

[@jakearchibald]

Yep!

[@KevinSheppard]

I like this co-host :-)

[@andrejvujic]

What’s the font in the demo?

[@LeeSmith-cf1vo]

to be consistent with existing APIs, should `.entries()` not be `.values()`? `.entries()` on other objects gives an array of arrays, where the first element in each array is the key and the second is the item. In the code sample shown I don't think this was the case?

[@jakearchibald]

hah, I actually raised the same issue last year github.com/slightlyoff/history_api/issues/16 - I agree there's a naming clash, but history entries are, well, entries. I agree it isn't perfect, but it seems like the best balance of being descriptive and succinct.

[@nmocruz]

I see all router libraries/frameworks to incorporate this quickly

[@faberle]

At the end of the video I was wondering how navigation.entries() would behave in a cross-origin context. Do you get to see the URLs the IFrame navigates to in the entries?

[@jakearchibald]

navigation.entries() gives you the entries for the current frame, so you'd only get the entries if you call the API from the window's instance of the API. The entries you get are only the same-origin ones.

[@JacobCanote]

This is a page.

[@mariancaikovski8638]

Has anyone managed to disable scroll restoration? scrollRestoration: "manual" from the navigation api does not seem to work with transitionWhile(). It is annoying that if the back button is pressed the scroll position is restored, but then if any link is clicked the page scroll remains not changed, e.g. the bottom of the new page.

[@jakearchibald]

There are some changing coming to the scroll handling. What do you think of github.com/WICG/navigation-api/pull/239 ?

[@mariancaikovski8638]

@@jakearchibald Thanks Jake. I am looking forward to it.

[@yashrawatreact]

how do I use this Navigation api in my react app?

[@DeepankarSandhibigraha]

So, the traverse is a push or pop ? What will happen if I click on browser back ? Ideally it'll be pop, I think, then what's to do for push?

[@jakearchibald]

"pop" is a term used by the history API, but I don't think it's useful, since it's really ambiguous. Are you asking if the traversal creates a new history entry? Because, by definition, that never happens. Traversal is always to an existing entry.

[@ModeDerp]

I might not be understanding this right, but in the demo the navigation API went back four entries in the stack, whereas the browser button didn’t. Shouldn’t they work the same way? Is that set to change?

[@jakearchibald]

No, the navigation back() deliberately doesn't work like the browser back button. It takes you back to the previous history entry for the current frame, whereas history.back() (like the back button) might not result in a change for the current frame.

[@lucast2742]

Can you use audio compression pls, because the audio is quite low but the burst of laughters just kill my ears

[@cassieevans8790]

My fault for having an big boomy laugh I think.

[@lucast2742]

@@cassieevans8790 🥲

[@jakearchibald]

@@cassieevans8790 nahhhh, I think we just missed this. I didn't notice it, but maybe I should have listened with a couple of different earphones.

[@naansequitur]

The avocados above their heads are extremely round

[@nicktheritter]

Those lights look like avocados.

[@AndreaDoimo]

Who was the one guy the wrote all HTML5 ?

[@jakearchibald]

Ian Hickson

[@YanLoonG13]

Use replacestate not pushstate and problem will solve. No longer to determine count of history.go(n)

[@tascord]

What's the go on guests? Are we going to see new ones every so often or a more consistent few (or one!)

[@jakearchibald]

My current plan is to get someone in for a day of filming. Which (even when I was doing these with Surma) means recording 4 episodes, where two topics are brought by one host, and two are brought by the other.

[@technikhil314]

Which gradient site is Jake talking about?

[@jakearchibald]

Let's see if I can find a way to post this that the spam bot won't delete: The site is UI Gradients dot com.

[@jakearchibald]

I wonder if it'll let me just add a real link uigradients.com/

[@none0n]

Great info, but will this code work for other browser vendors?

[@jakearchibald]

The Navigation API is only in Chrome right now. Hopefully other vendors implement it soon, since it's sooooo much better than the History API.

[@none0n]

@@jakearchibald yes I agree. So is it advisable to use it in prod?

[@jakearchibald]

@@none0n Depends on the browsers you need to support, and what fallbacks you're willing to accept. For example, the demo site works fine in other browsers using regular page loads.

[@vhoyer]

Is the history API being deprecated? Or could we perhaps use them together? I could imagine someone entering directly on the video and pressing the back button, could we replace the current page with the home, pushState the current page to the history and then proceed with a back? That way we would still have the history line. This is an idiotic solution, but could we do it? Haha

[@jakearchibald]

This completely replaces the History API. Right now, the History API has too much usage, and the Navigation API doesn't have enough browser support, to formally deprecate the History API. You can use them safely together though, but I don't see why you'd choose to do that if just using the Navigation API was a possibility.

[@smaragd_]

Interesting topic. But get some shoes.

[@jakearchibald]

Nah

[@CodeWithNikhil]

My grandma aaked me about api i showed her a navigation api

[@zanehannan5306]

Her boots owo

[@zanehannan5306]

I mean it as in... like, you're wearing socks, she's wearing hard leather tradie-like (but clean idk) work boots. It's funny idk

[@mateuszkaminski8449]

Actually, when an URL is changed by Javascript, this way: iFrameElement.contentWindow.location.replace(url); it does not mess with top-level navigation.

[@jakearchibald]

Replacement navigations behave quite differently. It doesn't add a history item at all, it replaces the 'current' one. This isn't a special behaviour, the same happens if you call replace on the top level.

[@SpotAllen]

I am confused. Why is Jake wasting Cassie's time on this? I would prefer to see him talk to her about..... this may sound crazy..... animation. I know, a rogue thought. But considering that is her specialty, and by her own words she has barely used the history API, an animation discussion may be a better use of her time (and ours). >_>

[@dogoku]

there will be another video where she gets to talk about her topic. this is what happened with the previous guest too

[@terrible_-]

Because they take turns?? There will obviously be a Cassie-led video

[@jakearchibald]

For many years, the pattern has been: film 4 episodes in a day. Two of the topics are brought by one of the hosts, the other two are brought by the other. I said right at the start of the episode that folks could look forward to her episodes later 0:45. We've never gotten a comment like this before - when presenting with Ada, Surma, and Paul, we often spoke to the other about things they weren't necessarily expert in. That's really what show-and-tell is all about, which is the format of the show.

[@cassieevans8790]

Well I personally don't feel like my time was wasted - I learnt about the Navigation API along with everyone else. I had a lovely time. We'll be doing some animation/SVG episodes too.

[@Yamboy_1]

Where's Surma been recently?

[@31redorange08]

He left Google.

[@valikonen]

what they speak about?!

[@realist.network]

Why not have methods for `navigation.entriesFromFirstToCurrent` and `navigation.entriesFromCurrentToLast`, so we don't need to do the `.slice`?

[@seth111yta1]

yoooooo. *firefox and sarafi*. let's go the clock is ticking.