17

For single page apps, what methods are there for forcing the page and/or JavaScript files to be reloaded when there have been updates deployed to the server?

One obvious way would be to poll some server resource to see if the current version of the app is running in the browser and if not then load the updated resources.

I'm wondering if there are more generally accepted methods that make use of specific HTTP or DOM features.

update

I'm reading about the HTML5 Appcache. This seems to be geared more towards applications that can run without requiring a server connection. I don't think this could be relevant for updating a SPA's resources (including the page itself) from the server. Am I correct?

Community
  • 1
  • 1
Ronnie Overby
  • 45,287
  • 73
  • 267
  • 346
  • You could always add a time-stamp query parameter, or with URL rewriting to leverage caching with lame proxies (many "web accelerator proxies" will avoid caching any URL with a query parameter) – Jason Sperske Jul 23 '13 at 18:16
  • @JasonSperske I've read about that technique to avoid using a resource cached at the client at the time that the resource is being requested. I'm talking more about forcing a refresh of the resources, potentially while the user is actively using the application. – Ronnie Overby Jul 23 '13 at 18:18
  • I have come to the same conclusion about appcache. It is an offline cache to make apps available when user is offline... but it may be used even if the user is online so that the page loads faster. – Miguel Angelo Jul 23 '13 at 19:13
  • 2
    What I do is add an HTTP header to each response. The header value is the site version code. The client just reloads itself if it sees a mismatch. – Pointy Jul 23 '13 at 19:14
  • Have you considered [Socket.io](http://socket.io/)? – Sukima Jul 22 '15 at 01:48
  • Deprecated "This feature has been removed from the Web standards. Though some browsers may still support it, it is in the process of being dropped. Avoid using it and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time." – catbadger Apr 04 '17 at 18:20

4 Answers4

1

You could use a long polling request to know when there are updates without having to do requests in certain intervals, and when the long polling request returns, you could update the whole page, since old javascript files and events would be bound to DOM elements, so it'd be easier to just reload the page.

EDIT

I read your comment about letting the user continue to use the page, while things are updated, but I think this is very dangerous... would it be too bad to just show a notification to tell the user that there are updates, and recommend that he/she reloads the page?

Otherwise you would have to undo previous scripts, such as unbinding events from DOM elements.

You can unbind events quite easily using jQuery: how to unbind all event using jquery This works for one DOM element, you'd have to do this for each DOM element in the page.

Community
  • 1
  • 1
Miguel Angelo
  • 23,796
  • 16
  • 59
  • 82
  • Sorry, what I meant in my comment is not that they would use the page during an update, but rather that they could be using the page at the point that a page refresh is forced upon them. – Ronnie Overby Jul 23 '13 at 18:28
1

If you are using .NET, you could use SignalR to notify all clients of an update, and then trigger a reload in the client.

Jacques Snyman
  • 4,115
  • 1
  • 29
  • 49
1

You could start running a timer when long-poll returns and if the user:

A. performs an ajax request

B. switches tabs

C. is inactive for the duration of the timer

You can trigger a refresh.

This is about as close as it gets to updating a single page app without getting in the user's way or asking them to refresh the page.

paulkon
  • 1,755
  • 2
  • 20
  • 34
1

applicationCache would be an excellent option as of this writing, but it is marked deprecated and standards are moving to Service Workers, which is not presently widely supported.

General Strategies with applicationCache

  1. Manage a single file that you update with unique hashes for all your resources
  2. Create a unique cache file name PER RELEASE containing your (assumed) static resources

I'd be inclined towards option #2 where a deployment removes the prior cache file completely and replaces it with one having a different name, which triggers the obsolete event that you could fire a page reload.

JavaScript

appCache.addEventListener('obsolete', handleCacheEvent, false);

function handleCacheEvent()
{
   // magic here ... prompt user, force reload, etc.
}

HTML

<html manifest="http://yoursite/appinfo.semver-here.mf">

If you went with option #1, then you'd subscribe to the updateready event instead:

appCache.addEventListener('updateready', handleCacheEvent, false);

For starters you could make wildcard entries and/or keep most of your assets marked as NETWORK resources and gradually roll them into the CACHE area as you got comfortable.

See:

Brett Veenstra
  • 47,674
  • 18
  • 70
  • 86
  • 1
    Deprecated This feature has been removed from the Web standards. Though some browsers may still support it, it is in the process of being dropped. Avoid using it and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time. – catbadger Apr 04 '17 at 18:22