Offline mode - caching - how?

[matt3]

Hi,

I’m loading a list of articles, each has a main image and I want to initially use a cached image on disk, if it’s not there then use a placeholder image until I manage to download and save them via HTTP.

Now, I can call my API to get the list of articles and run through them to create a file using Storage using something like

            fetch('http://example.com/article_image.jpg')
            .then(function(response) {
                return response.blob();
            })
            .then(function(responseBlob) {
                storage.write('myImageCache/2751963f7e234ddb4f04e34690112abf.jpg', responseBlob);
            });

And, despite Storage missing a way of checking what files exist, I can maintain a file with a JSON array to manage it. (Hint: FUSE - a cache API would be gorgeous).

And I’m pretty certain that if I use an Observer for the images in question that I can replace the image with the downloaded one when it comes available.

So what is my problem?

My problem is how the heck do I reference myImageCache/2751963f7e234ddb4f04e34690112abf.jpg in the image tag or in FuseJS? The following, as expected, doesn’t work.

    <Image File="myImageCache/2751963f7e234ddb4f04e34690112abf.jpg" />

Any ideas?

[edA-qa_mort-ora-y]

If you use <Image Url="some_url"/> you’ll take advantage of the OS HTTP caching mechanism. I’m checking now whether that would also apply to fetch.

Or is there some reason you wouldn’t be able to use the built-in caching to do what you want?

[Bjorn-Olav_Strand]

I’ve created a prototype caching imagesource. You can find it here:

https://gist.github.com/bolav/7f4eb260957569249046

I was trying to extend the originals in Fuse, but was unable to do that because of restrictive permissions, so this imagesource does not handle memory allocations and things like that as well as the native fuse sources. However it should be a nice starting point to get you where you want in terms of caching.

[Bjorn-Olav_Strand]

@mortoray: Does that work if you are in flight mode?

[matt3]

Thanks for suggestions, a few reasons.

1. When it’s trying to download the whole Page just locks up and jitters so I was hoping to eliminate that.

2. When I do this, some images are cached, others aren’t so I need finer grained control as the user expects to see all the images. Multiple retries seem to make less and less images available offline. See below for missing images and how it should look.

1. When I get a push notification I pull the article list and cache the images before showing the user the UI so it’s all ready to go.

2. The articles I am caching have multiple images in them so I cache them all so when the user selects an article from the list the HTML displayed refers to the local cached copy.

[matt3]

Bjørn-Olav Strand wrote:

I’ve created a prototype caching imagesource. You can find it here:

https://gist.github.com/bolav/7f4eb260957569249046

I was trying to extend the originals in Fuse, but was unable to do that because of restrictive permissions, so this imagesource does not handle memory allocations and things like that as well as the native fuse sources. However it should be a nice starting point to get you where you want in terms of caching.

Thank you, i’ll have a look at that.

[edA-qa_mort-ora-y]

I’ll look to see if we can get some kind of finer control over the caching of images on the HTTP cache.

For the fetch request you should be able to call request.EnableCache(true) to have them cached.

[edA-qa_mort-ora-y]

Caching is enabled by default on fetch as well.

The size of the cache is OS specific by default, but you can change it with Uno.Net.HTTP.HttpMessageCache.MaxCacheSizeInBytes in Uno code.

[matt3]

edA-qa mort-ora-y wrote:

I’ll look to see if we can get some kind of finer control over the caching of images on the HTTP cache.

For the fetch request you should be able to call request.EnableCache(true) to have them cached.

Thank you.

Thats interesting. Given that I have saved an image to Storage via a Fetch how would I then reference said file in FuseJS to assign it to an tag.

[Bjorn-Olav_Strand]

matt@roxburghm.com wrote: Thats interesting. Given that I have saved an image to Storage via a Fetch how would I then reference said file in FuseJS to assign it to an tag.

There is no pure JS way of doing this yet. You have to create some Uno helpers.