Cache downloaded image for next load

[pyre]

Hi guys,

I load about 10mb of data for my game. But each time I refresh the page, everything has to be re-downloaded. It's like phaser can't save anything in the browser cache?

Is there any way to fix this?

Thanks,

pyre

[FakeWizard]

well  I don't think the Phaser.Cache works the same way as Browser cache does.  

https://phaser.io/docs/2.6.2/Phaser.Cache.html#getItem

" In a typical game set-up the cache is populated once after the main game has loaded and
then used as an asset store."

So the cache is populated as soon as the game starts , meaning all the game assets that are added later are at your disposal throughout game run-time. 

For most people, the way to enable caching is to add some code to a .htaccess on your web host/server (apache.).

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>
## EXPIRES CACHING ##

Or if you would like to apply some global rule for all kind of resources then you can do something like this (Cache-Control):

# 1 Month for most static assets
<filesMatch ".(css|jpg|jpeg|png|gif|js|ico)$">
Header set Cache-Control "max-age=2592000, public"
</filesMatch>

The above code is setting a cache control header depending on file type. ( max-age is in seconds )

So once you have this setup on your webserver, then after visiting your page for second time you should be able to see in your Network tab (in Developer's tools) that images are being loaded from cache rather than directly from server. Also on the server side in the access.log you should be able to see that some requests returned with result code 304 (NOT MODIFIED), meaning that the resource was loaded from cache. 

Another way to check that the caching is working is by checking the chrome://cache/ or ( about:cache for Firefox) ,where you should be able to see a list of all cached resources. 

But be aware that I wouldn't recommend caching when your game isn't fully finished , cause it's highly possible that if you do any changes to your resources it may take some time for the resources to get updated on client side. 

[samme]

Phaser just asks the browser to download things. If you want the browser to cache things, you have to mark them so: https://developers.google.com/speed/docs/insights/LeverageBrowserCaching

[pyre]

Awesome, thanks guys! :-)

You're both completely right. It didn't occur to me that it'd be my web server which wasn't setup correctly to handle caching.

pyre