friend.coffee

Friend = DS.Model.extend Cacheable,
  avatar_url: DS.attr()
  
  cachableAvatarImage: Em.computed 'avatar_url', ->
    id = @get('id')
    lfKey = "user-avatar-#{id}"
    avatarUrl = @get('avatar_url')
    showAsBlob = false

    ObjectPromiseProxy = Ember.ObjectProxy.extend(Ember.PromiseProxyMixin)

    return ObjectPromiseProxy.create
      promise: new Promise (resolve)->
        localforage.getItem(lfKey).then (cached)->
          if cached
            if showAsBlob == true
              # return blob://
              urlCreator = window.URL || window.webkitURL
              imageUrl = urlCreator.createObjectURL(cached)
              resolve(Ember.Object.create(val: imageUrl))
            else
              # respond with data:image/jpeg;base64,
              reader = new window.FileReader()
              reader.readAsDataURL(cached)
              reader.onloadend = ->
                resolve(Ember.Object.create(val: reader.result))
          else
            request = new Promise (res, rej)->
              oReq = new XMLHttpRequest()
              oReq.open("GET", avatarUrl, true)
              oReq.responseType = "blob"
              
              oReq.onload = (oEvent)->
                blob = oReq.response
                res(blob)
              oReq.onerror = (error)->
                rej(error)

              oReq.send()

            request.then (image)->
              localforage.setItem(lfKey, image)
            .catch (jqxhr)->
              Ember.Logger.warn "error: ", jqxhr.error

            resolve(Ember.Object.create(val: avatarUrl))

template.hbs

{{#if friend.cachableAvatarImage.isFulfilled}}
  <img src={{friend.cachableAvatarImage.val}}>
{{/if}}