Getting initial state using HTML5 history api

Question

Everything I've been searching for is just a tutorial how to use pushState , replaceState , history.state , etc. Those concepts are simple but one thing I'm wondering how people solve is how to know what the initial state is.

Say you SPA is hosted at https://example.com/en-us/myapp/ . Go there and your home page of the app is loaded, click around and it does a pushState to see you to https://example.com/en-us/myapp/get/users . Great, now you see a list of users and thanks to the history api, it wasn't an actual page load.

But now let's pretend a user had that https://example.com/en-us/myapp/get/users state bookmarked and the started the app off at this URL. Ok, so your server listens to that and serves up the app. My question is, how do you know that get/users is the current state and you need to show the associated view? Do you just know that your app is hosted at https://example.com/en-us/myapp/ and so you get whatever is after that to know?

Something like this:

function getState (uri) {
    return uri.match(/^https:\/{2}(?:w{3}\.)?example.com\/en-us\/myapp\/?(.*)/i)[1];
}

var state = getState(location.href);

and if state is falsey then load the initial view, otherwise handle the state and show the list of users when state === 'get/users' ?

Answer 1

Yes, that is quite right. However, you could try using location.pathname to fetch the state, so that your regex does not need to include the domain name.

For example:

function getState (uri){
  var path = uri.split("myapp", 2)[1];    // This will split the pathname after 'myapp'
  console.log(path)                       // Just for debugging purposes

  // Now we can decide what to do with the path (i.e. "/get/users")
  // For example, we can use a switch or a simple if statement

  if (path === '/get/users'){
    return true
  } else {
    return false
  }

}

var state = getState(location.pathname);

That is just a simple example of a router. You can now try building your very own router for your SPA. Also, there are many libraries out there for you to use if you would like a different approach. You can take a look at these ones if you would like.

• navigo
• router.js

Also, if you are using a framework to build your SPA, they often have their own routing ability built in. These are just some of the many frameworks that have routers built in. (Sorry, I've <10 reputation so I'm not allowed more than two links).

• Vue.js — vuejs.org/v2/guide/routing.html
• Mithril.js — mithril.js.org/#routing
• Ember.js — guides.emberjs.com/v2.13.0/routing/

Of course, it is ultimately your choice which to use. You could expand upon the example I've provided, by simply implementing a switch for different links/pages in your SPA. I wish you the best with your app!