Browser-sync for SPA: how to synchronize document fragments: # / contact

Question

I am developing a SPA (single page application) and using grunt-browsers synchronization. It seems like all browser synchronization features work: CSS insert, scroll and form synchronization.

This is a SPA, so there is no navigation to other pages. Navigation is carried out along the routes in the document fragment (for this I use the SammyJs library)

mysite.com/#/home
mysite.com/#/contact
mysite.com/#/...

It seems that BrowserSync does not synchronize the parts of the document . I think this is because document fragments are processed by the browser and are not requested on the BrowserSync server / proxy.

Is there a way to get the script to work?

PS: I have a javascript callback on navigation that I can use to send a new url to BrowserSync during development (if BrowserSync supports something like that)

Answer 1

I also tried using browser sync for a one-page base application.

Route changes are mostly triggered by clicking on the anchors. Unfortunately, browser synchronization does not work very well with events that have stopPropagation, and therefore the click did not start in other browsers, and the routes were synchronized.

Since then, I have branched and fixed this plus other issues, namely event synchronization for mouseup, mousedown, keyup, keydown, and contenteditable div.

pull-request , - https://github.com/nitinsurana/browser-sync-client

, , . , -

, , .

var bs     = require("browser-sync").create();
var client = require("./");

client["plugin:name"] = "client:script";

bs.use(client);

bs.init({
    //server: {
    //    baseDir: ["test/fixtures"]
    //},
    proxy: 'http://localhost:8080',
    open: false,
    minify: false,
    snippetOptions: {
        rule: {
            //match: /SHNAE/,
            match: /<\/head>/i,
            fn: function (snippet) {
                return snippet + "\n</head>";
            }
        }
    },
    clientEvents: [
        "scroll",
        "input:text",
        "input:toggles",
        "input:keydown",
        "input:keypress",
        "form:submit",
        "form:reset",
        "click",
        "contenteditable:input",
        "mouseup",
        "mousedown",
        "select:change"
    ],
    ghostMode: {
        clicks: true,
        scroll: true,
        forms: {
            submit: true,
            inputs: true,
            toggles: true,
            keypress: true,
            keydown: true,
            contenteditable: true,
            change: true
        },
        mouseup: true,
        mousedown: true
    },
    capture:true
});