HTML5
History
Object
Objectives
-
Modify the address bar with history.pushState
-
Describe how bookmarking a single page application works
History
HTML5 introduced the history object
history.back();
history.forward();
history.pushState({}, 'title', '/newpage');Allows javascript to manipulate the browser history
Changes To History
Changes the url address bar
Changes the browser's local navigation history
DOES NOT cause the browser to make a GET request
History
More Info
What Will We Use History For?
To create a good single page application, we want to have it feel like a normal website
Browser back button, internal links, etc should all seem to behave like a page with server rendering
Server Side Rendering
GET /
index.html (fully rendered)
GET /signin
/signin (fully rendered)
Node.js
HTML
Client Side Rendering (React)
GET /
index.html (only div id="root")
Node.js
React
Render react app
Change address to /signin
Render /signin component
Handling A Bookmark
GET /user/55
index.html (only div id="root")
Node.js
React
Render react app with
correct user component
Bookmarked /user/55
Server side support is required
HTML5 History Object
By Elie Schoppik
