Offline image support

[David Salvagnini]

I have a requirement for complete offline transparency within my angular application.  In summary, it's a beefed up PowerPoint viewer so there are a lot of images that need to be viewable offline.  I've tried two approaches:

Approach 1:

using https://github.com/chrisben/imgcache.js/

with https://github.com/jBenes/angular-imgcache.js/tree/master

Storing the image locations in local storage and reading from the that when the http request fails (the user is offline).

This works great however it's not supported by IE, which is a problem in my organization for some users.

Approach 2:

Encoding the images in base64 and returning that to the angular app from the server.

This seems to be locking the main ui thread for rendering of the images, which is surprisingly long for the number of images that i have to reference.

NOTE: approach 1 does not lock the main thread; it's very smooth (damn you IE)

Also the base 64 strings are so large that i can only store a few in localstorage within the 5 MB limit so i'll need to use some browser database that doesn't have a limit.

I feel like there must be a better way, any ideas?

[Sander Elias]

Hi David,

I know it's not without quirks(small understatement..) but did you look ad appcache?

Regards

Sander

[David Salvagnini]

Yeah, i'm actually using appcache to cache the html however the images are dynamic.

I wonder if i could dynamically create the appcache manifest, however that would probably imply a triple refresh, one to make the call to create the manifest + the standard double refresh...

[Sander Elias]

Hi David,

You can use wildcards with appcache. But it stays a PITA to work with.

Another solution would be, store your images in an IndexDB instance. No 5Mb limit there, also (I'm not entirely sure on IE here!) you can store binary in there. no need for base64 anymore.

Regards

Sander 

[Armando Couto - Gmail]

Have you seen it?

https://github.com/ocombe/angular-localForage

https://oclazyload.readme.io/v1.0/docs

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

--

Att

Armando Couto 

CSM - LKU

www.armandocouto.com.br