Opting out of beforeunload and using BFCache

[agundermann]

I think it would be great to allow opting out of using beforeunload for the following reasons:

1. Usability is controversial. Personally, I would avoid it in most cases and save the data to localStorage to restore it on the next visit rather than annoying the user with a modal when he tries to close the browser window. There's even a discussion about disabling it by default at bugzilla.
2. It comes with the non-apparent side effect of disabling BFCache which freezes the DOM and scripts when the page is left so they can be quickly restored/resumed when navigating back to the page.

Incidentally, using beforeunload to disable BFCache fixes this bug which occurs when re-entering the cached page at a different URL. But as far as I can tell we can fix this in a better way by using the pageshow event. Something like

function pageShowListener(event) {
  if (event.persisted)
    history.transitionTo(getCurrentLocation());
} 

That way, when using a browser with BFCache, re-entering our app at the same URL wouldn't require any re-renders, and re-entering at a different URL would allow for render optimizations such as React's reconciliation (DOM diffing).

[mjackson]

Hmm, interesting. What do you think about adding a flag to the options object?

var history = createHistory({
  useBeforeUnload: false
});

I'd think if you want to disable something like this you'd want to disable it for all transition hooks, so setting the option globally makes sense.

As far as listening for the pageshow event, let's get that added in a separate PR and close the router bug.

[mjackson]

Personally, I would avoid it in most cases

Just re-read this. I think you're right. Maybe we make it opt-in instead in that case?

var history = createHistory({
  useBeforeUnload: true
});

[agundermann]

Yeah, I'd actually prefer opt-in. Also agree with your reasoning for using an options flag.

[mjackson]

Taking a look at this today. I think it makes sense to opt-in to beforeunload handling using an enhancer, ala enableQueries. It's different enough from normal transitions that I think it warrants its own API.