Live reload inhibits bfcache behavior

[akbyrd]

Browsers will cache pages in memory to allow instantaneous back/forward navigation. When the cache is used the page is able to be restored without making any HTTP requests. This is an important optimization for user experience.

In some situations browsers will disable the cache and navigating to or from a page results in a full reload. One of those situations is when WebSockets are in use. livereload.js uses a socket to handle change notifications. This prevents the bfcache from working when iterating on a Hugo site. This can be seen in Chrome by going to Application -> Back/forward cache or running Lighthouse.

Ideally, Hugo / livereload.js would close the socket when the page is navigated away from and reopen it upon returning. This should be possible by handling the pagehide and pageshow events, but I have not tested it.

For context, my site contains a comment system and loading comments is unfortunately pretty slow. Github's API takes up to ~500ms to return comments so the caching is important for both responsiveness and maintaining scroll position. I use multiple configurations when developing (dev, staging, and prod) and I have live reloading disabled in prod so I can test bfcache behavior. However, there's no situation where I actually want the cache disabled. I'd like to be able to test caching without having to hit my production endpoints or temporarily modify a dev configuration to disable live reloading.

[bep]

I have tested a little in #3290 -- but I have so far failed to find a working setup.