CODEWITHSUNDEEP
javascripthtmlhttpsingle-page-application
Ronnie Overby
Ronnie Overby

Reputation: 46470

Forcing a single page application to update

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?

Upvotes: 17

Views: 4064

Answers (4)

Brett Veenstra
Brett Veenstra

Reputation: 48474

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:

Upvotes: 1

paulkon
paulkon

Reputation: 1855

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.

Upvotes: 1

Jacques Snyman
Jacques Snyman

Reputation: 4290

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

Upvotes: 1

Miguel Angelo
Miguel Angelo

Reputation: 24192

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.

Upvotes: 1

Related Questions