Hi, guys.
Could anyone point me documents and/ or tutorials on how to download images and JSON files from a remote server and store it locally ?
My idea is to provide extra items for users. My intention is to do it for browser games and for mobile games (packaged using Cordova).
Thank you in advance.
I guess you will not bundle some assets. You will let game download them after the game has reached something.
I think you know how to download. Just use one of phaser loader like this.load.image etc. or fetch or XHR, last two are the standard web way of making downloads uploads. Phaser gonna to with them under the hood anyway and any browser library will do.
But to save, if you mean persist, you may need some more advanced stuff. You can keep a kind of state about them to indicate that they must be available and download them each time when needed as well. But if you want to persist them you may try localStorage, indexedDB, or Cache API. These are Web standards in browser that can be used with JavaScript. Not sure if the first one of them is the best solution for binary data, as your assets.
Just be careful about the CORS policy about making http requests from a client served from one origin, your app web page etc. to a resource resides on another origin, like the extra assets you think of serving to your app. The assets server will need to be configured to permit cross origin access. On client, I guess Phaser loader also has a crossOrigin setting that can be set in the game config object something like (pseudo code):
loader: {crossOrigin: true}
and web api’s I have mentioned have their own similar way of enabling that.
@fselcukcan Thank you for reply.
On https://labs.phaser.io/ I’m doing this:
To enable CORS I followed the docs:
this.load.crossOrigin = 'anonymous';
Trying to load an image:
this.load.baseURL = 'https://www.google.com.br/';
this.load.image('imageKey', 'images/branding/googlelogo/1x/googlelogo_color_272x92dp.png');
Error:
Access to XMLHttpRequest at 'https://www.google.com.br/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png' from origin 'https://labs.phaser.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Trying to load a text file:
this.load.baseURL = 'https://pt.y8.com/';
this.load.text('mytxt', 'robots.txt');
Error:
Access to XMLHttpRequest at 'https://pt.y8.com/robots.txt' from origin 'https://labs.phaser.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
It seems that
this.load.crossOrigin = 'anonymous';
is not working.
Do you have any idea why?
Also, you’re right: localStorage is just for text. According to Mozilla:
IndexedDB is a low-level API for client-side storage of significant amounts of structured data
Thanks.
My idea is it is due to that. They are not web pages that serve other origins.
The quote you show is about indexdb which is fine for binary data afaik.
@plicatibu Any progress?
@fselcukcan I discovered one has to enable CORS on web server.
This link shows how to enable CORS on nginx.
But before I do it I have to enable HTTPS on my server. When I get it ready I’ll share results here.
Regards.
I have tried to point to that early in the thread 
. Glad you have progress.