phaser: Loader can't load from file:// [$50]

Hi guys, Thanks for investigating this, I guess if it’s not a pure Phaser problem, then this can be closed. However, I would believe that we need an “official” way of dealing with this, since we will not be the only ones having this issue. A Cordova section in tutorials or somewhere exposed should clarify how Phaser can work with Android/iOS. There might be other “tweaks” to do for mobile development as well and having a dedicated section will greatly help everyone.

I was very excited to start a project that uses phaser3-typescript-webpack-cordova. Everything works perfectly until I start testing the cordova with the build package. The phaser assets loader isn’t designed for loading assets from IOS. Really hope there’s an official instruction of how to load assets from Cordova wrapped app. Thanks.

Adding the cordova-plugin-ionic-webview as suggested by @ghybs and @sftsk worked for me.

At least it started loading my json file then. For the spritesheets to show up i had to change:

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">

to:

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content: blob:;">

In the cordova index.html. Adding the blob: in at the end.

Still need to add sound to my current project though. If i need to do anything special for that i’ll post it here.

I have finally had time looking into this and got into the same solution as proposed by @ghybs .

Installing https://github.com/ionic-team/cordova-plugin-ionic-webview with Cordova fixes the issue. This will only be a fix for iOS, although probably for Android exists something similar.

I don’t think there is anything to be done within Phaser as this XHR Cross Origin policy seems to be a limitation that can’t be easily worked around on mobile. Chrome has a flag --disable-web-security that will allow the requests, not sure if that could be an option for Android.

Anyway, thanks for all the help, issue can be closed from my point of view. Perhaps add some instructions to the manual of needing the mentioned plugin when wrapping an app with Cordova.

Hi,

@sftsk: incompatibility of Phaser 3 with direct loading through file:// protocol looks to be a design choice, as explained in the Getting Started tutorial part 1: https://phaser.io/tutorials/getting-started-phaser3

As described the solution for desktop browsers is to serve files through a server, which is a very standard practice nowadays, even for development.

As for Cordova in iOS, which is OP’s described situation, the above solution is more complex to implement, but it is still a known and widely used practice as well. There are many Cordova plugins that patch the Webview, for example:

• Ionic Webview: uses an intermediary server to load files https://github.com/ionic-team/cordova-plugin-ionic-webview
• Oracle’s cordova-plugin-wkwebview-file-xhr: bypasses file loading with native code https://github.com/oracle/cordova-plugin-wkwebview-file-xhr

While @Huararanga’s workaround is probably valid, a drawback is that all files are now base64 strings in your code, making it much heavier. Furthermore, browsers and Webview cache files loaded the standard way, so rendering multiple instances of them is no problem. On the contrary, performance degrades when using base64 data multiple times.

Hope this helps.