I'm sure there is exceptions, but in general, the last thing I want my browser to do when i press back, is to start making requests. I expect the requests to have been already made.
My daily use case for this is Github Issues. Simple repro: Click an issue, make a change, press back.
Now the list view is out of date and doesn't show my changes. So I have to refresh.
I think a background XHR request is the best approach (until browsers fix this issue for real). On page load: pull latest from server (if network is down, then no-op). If no changes, then don't change. If there are changes then replace inline without a new page reload.
If I click back I want to see what I saw last time. e.g. I might have seen 3 news articles I was interested in, I click though and read the first one. When I click back I want to see the exact same list as before, and be able to read the next article I saw; not new articles that have been written while I was reading the last one.
You can s/news article/github issue/ and my response is the same.
Okay. C-r is quick and easy to type. But if Back automatically destroys the old version of the page, then there is no way to restore that old page.
> My daily use case for this is Github Issues. Simple repro: Click an issue, make a change, press back.
> Now the list view is out of date and doesn't show my changes. So I have to refresh.
How is that different from one tab with the list of issues, and one tab with a specific issue? In the tab instance, GitHub has added JavaScript to the issue list page to refresh on changes; in the Back button instance, it should work identically: the list view is 'rehydrated,' the JavaScript does its thing and the list view is updated.
Reloading the page is completely, totally wrong.
Single page applications are now quite popular. Most single page apps use a different definition of "back" than browsers do, and there are times when the two treatments conflict.
Many, or most, use a local in-memory database to keep track of information without going to the server. They update that in-memory store as you make changes. For example you see a list of names: Mary, Robert, John. You click Robert and edit the name to "Rob", the name auto-saves. Then you click "back".
Because single-page apps control "back" when in the SPA, they do what most developers want. They return to a semantically correct page, showing Mary, Rob (just edited), John. Tons of apps do this. This is not what the browser does. The browser, if following the "back" specs, would show the out-of-date names of Mary, Robert, and John.
The theoretical conflict can also become practical. Think through this flow:
* Visit /names
* AJAX for GET /api/names
* See Mary, Robert, John
* Edit Robert's name to Bob, autosave
* AJAX for POST /api/name/4 with the new name Bob
* See Mary, Bob, John
* Click on a link, lets say to Mary's website URL
* Mary's website, new domain, loads.
* ...click back
The SPA loads up, and attempts to GET /api/names. However, the bfcache is at play since the native "back" behavior is running. So the stale API response, with the original names Mary, Robert, John is returned. The list of names on the screen is DIFFERENT than what the user saw after they edited.
Additionally most SPA apps presume AJAX calls return accurate data, however here the names are not the names currently in the database. They are only in the bfcache. You can imagine, with more complex data, ways this can cause complex and unforeseen failures.
This is a very poorly understood corner of JavaScript development even today.
[edit]: formatting
This seems like a bug -- if you click back, it should take you to the page you saw before, not an earlier version of it.
AIUI the bfcache doesn't "remember and replay" API requests; it just caches the entire DOM and JS state.
Do you have something that can demonstrate this behavior?
> Because single-page apps control "back" when in the SPA, they do what most developers want. They return to a semantically correct page, showing Mary, Rob (just edited), John. Tons of apps do this. This is not what the browser does.
This is not necessarily what users want (as evidenced by discussions on this post). Many people want the old page, especially if there's information there (form fields, or other state) that might have gotten lost by a misclick. As someone else noted here, the "back = reload page" behavior can be emulated in the bfcache world by back+reload, but if you don't have a bfcache you can't emulate the "don't lose state" behavior that the bfcache gets you.
It seems like a new meaning is being shoehorned into the "back" button, and then you're complaining it doesn't work.
Apologies for using the wrong term and causing confusion.
> This is not necessarily what users want (as evidenced by discussions on this post).
HN not being representative of an average user aside, I don't disagree. My point is that there are two different expectations of what should happen and they can conflict and cause errors.
> you're complaining it doesn't work
I'm really sad you got that impression. I'm fascinated and think this an architectural problem of the web. My post is an attempt to describe the issue and raise awareness.
Separately, do browsers currently return expired data to AJAX calls? Which ones?
That's because SPAs are, at heart, an abuse of the Web and of the power Web browsers offer. They are to the Web what a text editor written in Brainf*ck would be: an abuse of extensibility, rather than of Turing completeness.
> Note: if history list mechanisms unnecessarily prevent users from viewing stale resources, this will tend to force service authors to avoid using HTTP expiration controls and cache controls when they would otherwise like to. Service authors may consider it portant that users not be presented with error messages or warning messages when they use navigation controls (such as BACK) to view previously fetched resources. Even though sometimes such resources ought not to cached, or ought to expire quickly, user interface considerations may force service authors to resort to other means of preventing caching (e.g. “once-only” URLs) in order not to suffer the effects of improperly functioning history mechanisms.
I don't get what he fails to understand: if the back function obeyed expiration headers, then going back could potentially reload the page, potentially causing a re-GET or even a re-POST.
For example, you post something that increases your total message counter, and the URL is changed (single page app: the page is not reloaded, only modified by Javascript), for example showing the new message (think "forum" as an example). If the user clicks "Back" they may get the page-state with the previous counter value, confusing the user. Ideally you would want the counter to be updated.
One can construct similar scenarios for regular web apps/pages where a new page is loaded, but I think the caching behavior is more out of line for SPAs. It comes down to the web serving as app platform and not just as "HTML pages for reading". You don't expect - in an application (compare behavior of a regular non-web application) - that when you go back the GUI may not reflect current state, in an app it always does, even if you go back to a previous form.
I think there will always be misunderstandings because of people who always think of the original web, a bunch of linked pages, and others who see it as (also) an application platform. The requirements needed for either often are fundamentally or sometimes subtly different. Is it ideal that we have a platform that is supposed to do such extremely different things all in one? Maybe not, but I think we actually managed surprisingly well to reconcile two very different concepts and requirements in the "web platform" thus far.
I think it would be valuable for discussion when authors a) state if they are talking about one or the other kind of web platform use b) consider that the other one that they are not talking about also exists and has equal value.
But really, one should avoid SPAs like the plague. Write web sites consisting of web pages. Only if the site or pages need more should one add JavaScript, and only if it's insufficient to purpose should one write an SPA (as an example, I have a hard time envisioning Mattermost, IRC or Slack working as web pages).
There's already behaviour in place in most (all?) browsers to cover this case, at least for POST. When you go back to a page with had form data attached to the request, they'll ask you whether to re-submit the form.
This doesn't happen for GET, but then you probably shouldn't be using GET for data anyway.
If I hit the back button, it's usually because something on the previous page caught my attention and I want to find it again. If I want to reload a page, I'll refresh or click on the site logo (in the case of getting to the root of the site).
But I'm also of the school that wants View Source to view the source that was just downloaded, not re-download a new copy of the source.
I'm even irked when I go back and the ads change.
I assume this is actually a big reason people use (so many) tabs... the back button doesn't work right!
Sigh!
Imagine a page which shows a number that increments every second the page is loaded. When you open a new tab, it continues to increment. When you go back, should it continue from where you left it, or behave as if it was loaded the whole time? The answer will be different for different sites, and the browser's default behaviour will sometimes be wrong.
usually I'll right-mouse-button click + open in new tab on any link instead of just clicking on it.
Eventually, like garbage collection, I'll stop, go back to the start of the tabs and close a bunch of them, then go back to what i was looking at.
And if I'm on a site that doesn't allow right clicking on a link? well the site had better be important otherwise it's gonna get closed.
But more importantly, you can't use either method if the link is a javascript function.
> I generally want a back button that rewinds time
More generally, you shouldn't make a "single-page app" unless you really need to. The web is designed for navigating between multiple documents. Browser features like history and bookmarks will work better if you stick to the standard behavior.
The relevant spec is at https://html.spec.whatwg.org/multipage/browsers.html#the-ses...
Note:
> An entry with persisted user state is one that also has user-agent defined state. This specification does not specify what kind of state can be stored.
> User agents may discard the Document objects of entries other than the current entry that are not referenced from any script, reloading the pages afresh when the user or script navigates back to such pages. This specification does not specify when user agents should discard Document objects and when they should cache them.
and from https://html.spec.whatwg.org/multipage/browsers.html#travers...
> If entry no longer holds a Document object, then navigate the browsing context to entry's URL
and
> If entry has a different Document object than the current entry,
> ...
> Make entry's Document object the active document
------
Browsers try to treat the back button as if the user had never left the page. So the XHR requests aren't re-made because the page simply isn't reloaded, it's just made active.
The fact that Chrome says "from cache" might be a bug here, but what the devtools show isn't visible to JS/etc, so this isn't a compatibility issue. AFAICT Chrome and Firefox (and presumably Safari) behave the same here, except from a difference in how the bfcache is invalidated. (chrome seems to invalidate when the domain changes).
I'm not clear why all of this is a problem though. If the page is reloaded, it's reloaded. If it's loaded from the bfcache, it's as if it was never unloaded (almost the same as the user switching a tab and coming back, except of course JS was suspended). Both behaviors seem ... fine for a webapp?
For example, if I click through to the http 1.1 spec in the first paragraph, then hit "Back" I see the scrollbar shrink as new content is loaded and uBlock's block count increases as new content loads.
If I scroll to the bottom of the page, click a link, and then click back, I don't even go back to the same spot - I'm at the end of the article and content loads below it...
My expectation as a user, regardless of the spec, is that I should see exactly what I saw when I was just on the page. Render to a bitmap, and when I click "back" display the bitmap. If going back to the page requires any network requests then the page is doing it wrong.
The exception that proves the rule would be streaming content.
The back button has not changed functionality--it still works as expected on all non-webapp webpages.
From my perspective, I think the author should be asking for browsers to implement a new button that follows his desired "load previous URL" behavior.