Version 2.0 – HTML5 History
When viewing a list of reports on FixMyStreet, you might want to look at a few reports one after the other, much as you can on a Google Maps or OpenStreetMap results screen.
This feature uses HTML5’s History API, ie.
update the URL as the page changes. That means that when you share it,
the page that loads will always be the one that the user intended it to be.
This improvement did not come without problems, however. Overriding the browser’s own behaviour when it comes to history and navigation means you have to think carefully, and I’m sure we’ll need to make further refinements to ensure that everything works as the user would expect.
There were small issues: for example,
pushState stores the document title at
the point when it’s called, for the ‘Back’ button list, meaning we had to make
sure any title change happened after that. Some browsers have a
page load, which can cause an issue if you assume it’s only fired due to
There was the complication of needing to tell the difference between someone
clicking back to the ‘initial state’ of the page, and an internal hashchange or
other less crucial event – as well as using a
replaceState on page
load, we store the original URL and title for use in such a situation.
Then we forgot that the code would be running on
/reports lists as well as
/around which led to some confusion until we realised what was happening! And
We also used
pushState in the new report process, to update the URL as you
select the report’s location, and on list pages when you select one of the
filters or sort. This has worked well, and is certainly much more preferable to
the ‘hash-bang’ technique used by some sites in previous years (and still now),