ios iOS HTML5 games?

[ramshreyas]

HTML5 options seem pretty dismal on iOS, or am I missing something?

I'm trying to figure out the best way to "wrap" my HTML5 game. It's three.js but that's not really relevant, other than the fact I want it to run fast.

Here are the options I've explored/tinkered with:

 

• UIWebView
  • Pros: Easy to use, no headaches
  • Cons: Slow and might be deprecated soon
• WKWebView
  • Pros: Fast (great WebGL speed, etc.)
  • Cons: Can't support loading local resources; security restrictions on local .html and .js files
    • Workarounds:
      • Copy resources to /Documents or /tmp directory
      • Host files with embedded web server
• Cordova
  • Pros: Plugin that wraps the WKWebView with web server solution; other bells and whistles
  • Cons: Seems not not be under active development; build/config errors
• Intel XDK
  • Pros: Nice IDE, can use Cordova plugins
  • Cons: Deploying to device incredibly clunky and slow
• Ejecta
  • Pros: Fast
  • Cons: Getting it to work with three.js not straightforward

I'm currently using the UIWebView solution, which might NOT have good enough performance to release the game. WKWebView seems unusable; I suppose I can try to get Ejecta working.

Any insight or opinions here?

Thanks!

[b10b]

Try combining WKWebView with a local webserver plugin - e.g. "cordova-plugin-wkwebview" + "cordova-plugin-webserver".  Either Cordova or XDK will work, eventually.  And if relying on WebGL limit the iOS version to >=8 iirc.

Edit: I take that back.  Currently not working as expected because XDK version of Cordova (>5) is not compatible with cordova-plugin-wkwebview (<4) ... I am investigating an alternative or fix.

Edit again ... I got XDK + WKWebView + Latest Cordova (6.2.0) working using Apache's plugins and some tweaks:

Install this cordova plugin by Apache:

https://github.com/apache/cordova-plugins/tree/master/wkwebview-engine-localhost

Which will install CordovaLocalWebserver and CordovaWKWebViewEngine as dependencies.

Then tweak these config files:

file: project/plugins/ios.json

"cordova-labs-local-webserver": {
            "src": "http://localhost:49000",
            "PACKAGE_NAME": "io.cordova.hellocordova"
        },

file: project/project.xdk

"startFile": "http://localhost:49000",

        "id": "cordova-labs-local-webserver",
        ...
        "paramvals": {
          "src": "http://localhost:49000"
        },
        ...

These tweaks are needed to set the src parameter to a specific port to preserve LocalStorage.  You may achieve basic results by just setting the StartFile value instead.

Good luck!