-
-
Notifications
You must be signed in to change notification settings - Fork 1.3k
The State of the HTML5 History API
The HTML5 History API is hugely important as it finally allows us to create stateful web sites.
This works by pushing or replacing states via history.pushState(data,title,url) and history.replaceState(data,title,url) respectively.
-
data: is a json object (optional) -
title: is the title of the state (optional) -
url: is the url of the state
Before the HTML5 History API we had to implement hacking workarounds such as transforming the traditional anchor in a url, into a stateful hash. Which caused and is still causing the web to break for search engines and javascript disabled users for websites which implement the hash workaround.
The HTML5 History API should provide us with a way forward, but it does still have it's problems which libraries such as History.js attempt to resolve.
The HTML5 History API adoption rate has been very quick by browser vendors. It is currently supported by the following browsers:
- Firefox 4+
- Google Chrome
- Safari 5+
- iOS 4
However, just because those browsers have implemented the HTML5 History API, the functionality of it is incoherent across all implementations. Which is a serious problem.
| Firefox | Chrome | Safari | iOS | Opera | IE | History.js | |
|---|---|---|---|---|---|---|---|
| Minimum Working Version | 4 | 8 | 5 | 4.3 | None | None | 1.7 |
Supports onpopstate
|
4+ | 8+ | 5+ | 4.2+ | 11+ | None | onstatechange |
Supports onhashchange
|
3.6+ | 1+ | 5+ | 4.0+ | 8+ | None | onanchorchange |
Initial onpopstate
|
No | Yes | No | No | ? | ? | No |
Initial onhashchange
|
No | Yes | No | No | ? | ? | No |
Fires onpopstate with hash changes |
Yes | Yes | No | No | ? | ? | Only on state changes |
Fires onhashchange with hash changes |
Yes | Yes | No | No | ? | ? | Only on anchor changes |
| States still set when busy report | Yes | Yes | Yes | Yes | No | ? | Yes |
| State still fire when busy report | Yes | Yes | No | No | No | ? | Yes |
| Can replace a hashed url report | Yes | Yes | No | No | ? | ? | No |
| Back buttons work with new states | Yes | Yes | Yes | 4.3+ | ? | ? | Yes |
| back/forward/bookmark/etc will trigger `onpopstate` | Yes | Yes | Yes | Yes | ? | ? | Yes |
| `pushState` and `replaceState` will trigger `onpopstate` | No | No | No | No | ? | ? | Yes |
| `pushState` and `replaceState` will set `document.title` | No | No | No | No | No | ? | Yes |
| State data persists when navigated away and back | ? | One state only | ? | ? | ? | ? | Optional |
| Transparent HTML4 Fallback | No | No | No | No | No | ? | Optional |