Use html 5 history API - push

[brainmatter95]

why does fullPage.js still use fragment identifiers instead of the history API?

[alvarotrigo]

• History API is not supported by old browsers to which fullpage.js still giving support (IE 8, Opera 12, Opera mini...)
• I never managed to make the back and forward buttons work properly with the history API.

Feel free to commit a pull request if you are able to:

• Do it providing a fallback for old browsers
• Keep the back and forward browser buttons functionality

[brainmatter95]

have you considered using https://github.com/browserstate/history.js/ ?. Except for a few issues, it does the job. It gracefully fallbacks to hashes in older browsers. It'd be great if you could contribute to it

[alvarotrigo]

I would prefer not to add dependencies. And if so, they should be optional.

[davidmann4]

+1 would be a great feature to switch from hashes to "real urls"

[alvarotrigo]

@davidmann4 the issue stills open, which means I may consider it for future releases! :)

[alanalvarado]

Hello @alvarotrigo your plugin is amazing, thank you!
Probably I can implement it conforming to your requirements, need to check fullpage.js code thoroughly, just did it in a fast pass. probably something like (I still need to familiarize with your internal functions)

function setUrlHash(url){
    if(options.recordHistory){
        if(options.historyAPI){
            window.replaceState(null, null, url);
        } else {
            location.hash = url;
        }
    }

and inside function init()

if(options.historyAPI){
    window.addEventListener('popstate', function(e) {
        //Modified version of next function to accept parameters and getAnchorsURL() to slice section and slide
        window.pushState(e.state, null e.state);
        scrollToAnchor(e.state)
    }
}

That might be the easy part, what happens when users navigate directly to the URL or simply reloads the page ?
mysite.com/mysection/ won't exist. we just have mysite.com/index.html

So how is acceptable for the plugin to handle that?
htaccess to redirect urls and then a function to get the partial ?
maybe using sessionStorage or localStorage ?

[alvarotrigo]

That might be the easy part, what happens when users navigate directly to the URL or simply reloads the page ?

Yeap, that's the issue here :)
Doesn't seem to be possible without getting into the server configuration.

[alanalvarado]

And what about real existing urls (each section or slide is a full html 5 file) customers.html contact.html, then we load the other sections dynamically from the point of entrance? (in this case no server redirects are needed)

[alvarotrigo]

@alanalvarado that sounds too complicated :).

People want just a single endpoint with a centralised version of their page, not 10 that can get out of sync and that have to maintain separately.

We could perhaps add the push state feature and give advice to developers on how to deal with the URL routes.
We can add examples for the most popular servers and frameworks, like Vue does.

I think that's the best way to go for :)

[alanalvarado]

People want just a single endpoint with a centralised version of their page, not 10 that can get out of sync and that have to maintain separately.

haha got excited because I use pug and a very complex grunt-webpack pipeline and maintain only 1 partial anyway _header.pug _footer.pug _nav.pug _section1.pug section1_slide1.pug (all in the name of SEO)

@alvarotrigo Actively working on it. I'm just having problem getting slides to write the correct url, still getting for example mydomain.com/section/slide1 but when I click an anchor inside the slide, i.e a href="#section" then it writes mydomaain.com/section/section/slide1

[alvarotrigo]

Perhaps you can try replaceState