Caching dynamically created images - and other cache questions

[ForgeableSum]

Suppose I create my own texture inside Phaser by doing some manipulations as a bitmapdata object, converting it to a base64 (toDataURL) and loading the texture into a sprite. How can that dynamically created image be cached so when the user reloads the page, the process doesn't need to be repeated? 

I thought about using local storage, but I want a less messy solution. 

Another thing I've always wondered about is if Phaser.Loader takes advantage of browser cache? For example, if you load a normal image with Phaser.Loader and refresh the browser -- will it re-download the image or use the image in the browser cache?

[rich]

You can't, not without storing it locally (localStorage) or on a server and then retrieving it when the game starts. There are size limits on localStorage too.

The Loader just uses the browser to request the file. If the browser decides it can get it from its local cache, it will. There is no 'cache busting' built in to the Loader, so it'll do whatever the browser wants. Equally though, it has no control either. If the browser wants to download it again, nothing can stop it.

[ForgeableSum]

8 hours ago, rich said:

You can't, not without storing it locally (localStorage) or on a server and then retrieving it when the game starts. There are size limits on localStorage too.

The Loader just uses the browser to request the file. If the browser decides it can get it from its local cache, it will. There is no 'cache busting' built in to the Loader, so it'll do whatever the browser wants. Equally though, it has no control either. If the browser wants to download it again, nothing can stop it.

That's how i thought it worked. Thanks for the clarification. 

[ForgeableSum]

You know, I'm a bit surprised that browsers have no way of caching dynamically created image objects. Sure, I can understand why it doesn't/can't happen automatically (there is no URI, and your javascript code would need to manually check the cache to determine wether the images needed to be regenerated), but I'm surprised there is no way to manually cache it with code. After all, it's an image loaded into the DOM, regardless of how it got there, all the information to cache it is there - and the incentive for benefiting user experience is there. Creating a key for the cache without a URL is problem, but I don't think an unsolvable one. Surely Google could figure it out.

I think what it comes down to is that dynamically created images in the browser are so incredibly rare, that it's just not worth the hassle and possible security implications.  Plus it wasn't really possible without HTML5... plus, if the images are really small, the amount of time it takes to re-create them is negligible. 

Of course, that doesn't help me because I have HUGE textures being generated in-game and would benefit tremendously from caching. 

 

[rich]

Local Storage was created specifically for storing large items client-side, and retrieving them later, and there's no reason you can't put dynamically generated images in there. In modern browsers you can also use Service Workers and the Fetch API. Quite a few choices, none of them supported in old browsers though: https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API and https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API