app.js

.. snip ...

  installPushStateEvents() {
    this.router.pushState.actions.set('ChangeState', (state) => {
      if (state['StateTabOpen'] === 'hide' || !state['StateTabOpen']) {
        this.closeTab();
      } else if (state['StateTabOpen']) {
        this.openTab(state['StateTabOpen']);
      }
      if (state['StateTopicID'] && state['StateTopicID'] !== this.topicState.currentTopicId) {
        this.topicState.changeTopic(state['StateTopicID'], true);
      }
    });
  }
  
 .. snip ..
 
       // after a state change (topic/tab change) action was run ..
       this.router.pushState.push({
        action: 'ChangeState',
        tab_open: this.toggleState.view,
        topic_id: this.topicState.currentTopicId
      });


.. snip ...

push-state.js

import {inject, TaskQueue} from 'aurelia-framework';

@inject(TaskQueue)
export class PushState {

  // [action, callback]
  actions = new Map();

  // {back: boolean, forward: boolean}
  navigationState = {};

  constructor(taskQueue) {
    this.taskQueue = taskQueue;
    this.firstRun();
    window.onpopstate = this.popStateListener;
  }

  popStateListener = (event) => {

    this.checkState();
    let state = Object.assign({}, window.history.state);

    if (this.navigationState.back || this.navigationState.forward) {
      let action = state['StateAction'];
      if (action && this.actions.has(action)) {
        this.taskQueue.queueTask(() => {
          this.actions.get(action)(state);
        });
      }
    }

  };

  getState(key) {
    let state = Object.assign({}, window.history.state);
    return state[key];
  }

  push = (params) => {
    let state = Object.assign({}, window.history.state);
    let currentStateTimestamp = Date.now();
    state['StateTimestamp'] = currentStateTimestamp;
    if (params.action) {
      state['StateAction'] = params.action;
    }
    if (params.topic_id) {
      state['StateTopicID'] = params.topic_id;
    }
    if (params.tab_open) {
      state['StateTabOpen'] = params.tab_open;
    }
    window.history.pushState(state, null, null);
    this.lastStateTimestamp = currentStateTimestamp;
  };

  firstRun = () => {
    let state = Object.assign({}, window.history.state);
    let currentTimeStamp = Date.now();
    window.history.replaceState({
      'StateAction': 'ChangeState',
      'StateTimestamp': currentTimeStamp,
      'StateTopicID': state['StateTopicID'],
      'StateTabOpen': 'hide'
    }, null, null);
    this.lastStateTimestamp = currentTimeStamp;
  };

  checkState() {
    if (window.history.state) {
      this.reset();
      let currentStateTimestamp = this.getState('StateTimestamp');
      if (currentStateTimestamp > this.lastStateTimestamp) {
        this.navigationState.forward = true;
      } else if (currentStateTimestamp < this.lastStateTimestamp) {
        this.navigationState.back = true;
      }
      if (!currentStateTimestamp) {
        currentStateTimestamp = Date.now();
        let state = Object.assign({}, window.history.state);
        state['StateTimestamp'] = currentStateTimestamp;
        window.history.replaceState(state, null, null);
      }
      this.lastStateTimestamp = currentStateTimestamp;
    }
  }

  reset() {
    this.navigationState.forward = false;
    this.navigationState.back = false;
  }

}