Silently updating Ember-app on client

Design
1

We update our ember.js app and backend API constantly. Sometimes twice a day. So we need an approach to silently update client-side app, so user won’t notice that.

My current idea is:

  1. notify client-side about new version available (long-poll/web-socket)
  2. client-side use iframe/web-worker to download new version as background activity
  3. when any router transition happens stop it, copy URL and reinit page with that URL (window.location = URL). Since scripts already cached at previous step transition should be smooth

At a first glance properly designed ember-app should work that way, but I’m not sure. How do you think guys?

2 Likes
2

I wrote a bit on this subject recently here: http://cball.me/realtime-app-version-notices. It’s using a mix of technologies but maybe it will be of some help. To do this transparently in ember, I’d set a property when the socket message comes in, and check for that property in a willTransition hook. If the property is set you can grab the url and reload the page. If you’ve set up your routing correctly then the user should be right back where they left off.

1 Like
3

thx. Good article! Yep basically you said what I was thinking of: catch willTransition event and reopen page.

Will see how it works then =)

4

Awesome! Look forward to hearing how things work out.

5

Right now I have no idea how to get URL from transition object

6

There may be a better way to do this, but here’s one:

willTransition: function(transition) {
  if (versionsDontMatch) {
    var url = this.router.generate(transition.targetName);
    window.location.href = url;
  }
}
7

cool! Is there any hook to build up query params?

8

So here is the first raw version https://gist.github.com/H1D/37629132f15dd23ade69 i’ve stripped backend-dependened code of course

I’m using didTransition for couple of reasons:

  1. I want to wait until transition is done becuase it might be aborted by user (unsaved changes warning) or it’s a complex transition with redirects and/or replaceWith
  2. simple window.location.reload() is better because I don’t have to use non-public ember API (router.generate)