History HTML5 and page source

Question

I'm using html5 history API and I have the following problem:

1. Go to my app: app.mysite.io
2. Browsing using history API (app.mysite.io/hello etc..). I don't charge all HTML page but only the partial content I need.
3. Close the page (CTRL + W in Chrome) and reopen (CTRL + SHIFT + T in Chrome)
4. At this moment, I see only the last AjaxCall and its response (the partial content because I think that it looks like an ajax request).

I created a Router that listen when the url change but I can't detect when a page is closed and then re-open.

edit: I'm using Symfony2 and I load two different template, ajax-layout.html.twig or full-layout.html.twig

edit2 That's my code:

var Devmanager = {
    environment: 'prod',
    prefix: '',
    name: '',
    routes: [
        "dashboard/",
        "project/add/",
        "project/view\/(.*)\/",
        "project/",
        "team/add/",
        "team/view\/(.*)\/",
        "settings/upgrade/",
        "settings/",
        "help/support/",
        "help/video/",
        "help/suggest/"
    ],

    config: function(options){
        this.environment = options && options.environment;
        this.name = options && options.name;
        this.prefix = (this.environment === 'prod') ? '/' : '/app_dev.php/';

        Router.config({ mode: 'history', root: this.prefix});
    },


    register: function(){
        var that = this;

        for(var i=0; i < that.routes.length; i++){
            (function(){
                const _route = that.routes[i];
                Router.add(_route, function() {
                    arg0 = (arguments[0]) ? arguments[0] : '';
                    Devmanager.call({
                        path: Router.root + _route.replace('(.*)', arg0),
                        method: "GET",
                        data: {},
                        success: function(response, status, request){
                            $("section#content").html(response);
                        }
                    });
                });
            })();
        }
        Router.listen();
    },

    run: function(){
        this.register();
        this.bind();
    },

    bind: function(){
        $(document).on('click', '.nav-primary a, .navbar-nav  a.upgrade, .main-menu a:not(.external), .nav-project a', function (e) { Devmanager.goto(e) });
    },

    call: function(options){
        NProgress.start();
        $.ajax({
            url: options.path,
            data: options.data,
            method: options.method,
            success: options.success,
            error: options.error && function(){
                location.href = Router.root;
            },
            complete: function (request) {
                Devmanager.toolbar(request);
                NProgress.isStarted() && NProgress.done();
            }
        });
    },

    goto: function(e){
        var $this = $(e.target);
        $this.is('a') || ($this = $this.closest('a'));
        if(!$this.next().is('ul')) Router.navigate($this.attr('href'));
        e.preventDefault();
    },

    toolbar: function(request){
        if (typeof Sfjs === "undefined" || this.environment === 'prod') return;

        var sf = $('.sf-toolbar')[0];
        var xdebugToken = request.getResponseHeader('X-Debug-Token');
        Sfjs.load(sf.id, '/app_dev.php/_wdt/'+ xdebugToken);
    }
};

var Router = {
    routes: [],
    mode: null,
    root: '/',

    config: function(options) {
        this.mode = options && options.mode && options.mode == 'history'
        && !!(history.pushState) ? 'history' : 'hash';
        this.root = options && options.root ? options.root : '/';
        return this;
    },

    getFragment: function() {
        var fragment = '';
        if(this.mode === 'history') {
            fragment = this.clearSlashes(decodeURI(location.pathname + location.search));
            fragment = fragment.replace(/\?(.*)$/, '');
            fragment = this.root != '/' ? fragment.replace(this.root, '') : fragment;
        } else {
            var match = window.location.href.match(/#(.*)$/);
            fragment = match ? match[1] : '';
        }
        return this.clearSlashes(fragment);
    },

    clearSlashes: function(path) {
        return path.toString().replace(/\/$/, '').replace(/^\//, '');
    },

    add: function(re, handler) {
        if(typeof re == 'function') {
            handler = re;
            re = '';
        }
        this.routes.push({ re: this.clearSlashes(this.root + re), handler: handler});
        return this;
    },

    remove: function(param) {
        for(var i=0, r; i<this.routes.length, r = this.routes[i]; i++) {
            if(r.handler === param || r.re.toString() === param.toString()) {
                this.routes.splice(i, 1);
                return this;
            }
        }
        return this;
    },

    flush: function() {
        this.routes = [];
        this.mode = null;
        this.root = '/';
        return this;
    },

    check: function(f) {
        var fragment = f || this.getFragment();
        for(var i=0; i<this.routes.length; i++) {
            var match = fragment.match(this.routes[i].re);
            if(match) {
                match.shift();
                this.routes[i].handler.apply({}, match);
                return this;
            }
        }
        return this;
    },

    listen: function() {
        var self = this;
        var current = self.getFragment();
        var fn = function() {
            if(current !== self.getFragment()) {
                current = self.getFragment();
                self.check(current);
            }
        };
        clearInterval(this.interval);
        this.interval = setInterval(fn, 50);
        return this;
    },

    clearRoot: function (path) {
        return path.replace(this.root, '');
    },

    navigate: function(path) {
        path = (path == undefined) ? '' : this.clearRoot(path);
        if(this.mode === 'history') {
            History.pushState(null, Devmanager.name, this.root + this.clearSlashes(path) + '/');
        } else {
            window.location.href.match(/#(.*)$/);
            window.location.href = window.location.href.replace(/#(.*)$/, '') + '#' + path;
        }
        return this;
    }
};

Answer 1

I solved and I'm writing for the user having the same problem:

Insert the option cache:false in the $.ajax method as below:

$.ajax({
     url: options.path,
     data: options.data,
     method: options.method,
     success: options.success,
     cache: false,
     error: options.error && function(){
         location.href = Router.root;
     },
     complete: function (request) {
         Devmanager.toolbar(request);
         NProgress.isStarted() && NProgress.done();
     }
 });