Best Practice for controlling web cache

I found this issue with caching, which might have several ways to be solved, but maybe you can share your experience with solving it.

I have compiled JS for the game, I have JSON with frames, I have big PNG file with all the images in it.

Because of cache control JSON can be load from server and PNG file from cache, in that case the whole game is ruined.

Is this common issue? Or I maybe doing something wrong?

Is there any way I can control cache from phaser?

Thank you

If you are using webpack, you can simply use the file loader to import the json file to your game. It will add a contenthash to the file name, when building your game.

For the images: I guess you use a software to generate the atlas. I’m sure there is an option to add a hash as well.

After you have added a hash to all filenames (including .js), you can safely increase your webserver’s cache control to infinit.

In case you do not know how to set it up in webpack, I have created a new branch in my car example, where I use a texture atlas, to show you how it works.

Check the last commit to see all changes I made.

// install file-loader
npm i -D file-loader

// get the url of the hashed texture atlas file 
import textureAtlasUrl from '../../assets/textureAtlas.json'

// load the atlas into phaser
this.load.multiatlas('atlas', `${textureAtlasUrl}`, 'assets')

Now you have a hash on the .json file. Unfortunately, I could not figure out how to to automatically add a hash to the .png file directly from TexturePacker (Is this even possible?). So I guess you have to change the texture file name each time before creating the Atlas. (At least if your are using TexturePacker)

Hope this helps :smiley:

If you have control over the server hosting the assets, you can add cache control (https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control) headers to the assets being served with either no cache or no store directives.