How is your experience with the OutSystems Community?
19
Views
4
Comments
Javascript Cache Match

I'm trying to use the local cache with OutSystems 11 Reactive.

I'm looking to use it as a way to get around the lack of caching on images etc in OS11 React.

I can put stuff in the cache just fine and see it there:

function CachePut(Id, ImageFileName, ImageBinary) {
   const cache = caches.open('my-cache').then(function(cache) {
           cache.put(new Request('binary_'   + Id), new Response(ImageBinary));
           cache.put(new Request('filename_' + Id), new Response(ImageFileName));
   });
}

The problem is, I can only get back a promise, that then returns Undefined, and can't find any examples anywhere of how to get back a response from an async function.... OutSystems simply rejects the await keyword.  Any ideas? 

function CacheMatchFilename(Id) {
           const cache = caches.open("my-cache").then(function(cache) {
               const response = cache.match(new Request("filename_" + Id)).then(function(response) {
                   if (typeof response !== 'undefined') { return response; } else { return ""; }
               });
           });
}

Any ideas anyone?

URL to Cache Storage for reference:
https://developer.mozilla.org/en-US/docs/Web/API/CacheStorage

2026-01-28 16-57-48
Mihai Melencu
Champion

Hi @Nathan Hobbs ,

The issue is that the return inside the nested .then() only returns from that callback. Also, cache.match() gives you a Response object, so you need response.text() to retrieve the filename.

You can handle this directly in a JavaScript node using $resolve() and $reject(), without needing await. Set the output through $parameters before calling $resolve().

Documentation link: Defining Asynchronous JavaScript Code - OutSystems 11 Documentation

You can test this approach with the following code.

Writing to the cache:


  • caches.open("my-cache")
  •     .then(function (cache) {
  •         return cache.put(
  •             new Request("filename_777"),
  •             new Response("test-image.png")
  •         );
  •     })
  •     .then(function () {
  •         $resolve();
  •     })
  •     .catch(function (error) {
  •         $reject(error);
  •     });

Reading from the cache:


  • caches.open("my-cache")
  •     .then(function (cache) {
  •         return cache.match(
  •             new Request("filename_777 )
  •         );
  •     })
  •     .then(function (response) {
  •         return response ? response.text() : "";
  •     })
  •     .then(function (filename) {
  •         $parameters.Filename = filename;
  •         $resolve();
  •     })
  •     .catch(function (error) {
  •         $reject(error);
  •     });

You can have each JS node in a different client action and call them from a button, and save the filename in a local variable for minimal testing. Also you can inspect the entry: F12 > Application > Cache Storage > my-cache .

If you need more help, it would be helpful to know the source of your images.

2018-07-06 11-13-55
Nathan Hobbs

Hi Mihai,

Many thanks... my code worked fine to add items to the cache, and I could see them in the F12 developer mode, I just couldn't get them back!

My logic gets the images from a big table, I'm trying to avoid repeated calls to the table when the image is used repeatedly on a page, as the image is used dozens of times, and there's no way to cache it on the client side built in to OutSystems, which is quite... disappointing.

So the logic will check in the filename is blank, and if not, call a similar CacheMatchBinary(Id) function.  If it is blank, it fetches the image from the entity, stores in in the Cache with the CachePut function, then returns the image.

I'll try the tweak you provided today, and see if it works.

Kind Regards,

Nathan

2018-07-06 11-13-55
Nathan Hobbs

Hi Mihai,

Many thanks... with a few tweaks, your code did the job.

This actually solves a major problem with OutSystems Reactive!

I'd like to do a write up about it and share it with the community, but I've never done that before, is there anywhere anyone her can recommend?  Do OutSystems have an option for community members to contribute to their documentation???

Kind Regards,

Nathan

2026-01-28 16-57-48
Mihai Melencu
Champion

Hi Nathan, you can create an article on medium.com and share it.

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.