I managed to download some On-Demand Resources into my Cordova App using a custom plugin that I built.
What I need to do now is load them inside an iframe in my App. Is this possible??
If they were located in the (sigh, read-only) www folder I could simply point to ${cordova.file.applicationDirectory}/www/game.html
...but being them in the Library folder (eg. see path below) is there a way to display them inside an iframe?
('/var/mobile/Library/OnDemandResources/AssetPacks/2F2887A0-7B16-4S5D-83C2-1C588A69DA80/15533301173473852725/com.us-company.sports-beta-enterprise.asset-pack-5a105e8b9d10e3329780d62ea2265d8a.assetpack/game.html')
The only way I managed to display them so far is:
1. InAppBrowser using a cdvfile://localhost path (see below) --> but I would like to avoid this
(cdvfile://localhost/root/Users/user/Library/Developer/CoreSimulator/Devices/D016D3BC-E9F9-43F2-8EC1-9A471819A9B5/data/Library/OnDemandResources/AssetPacks/11129225-E96A-4BEC-9051-735912378DB0/15538308173473832725/com.us-company-us.sports-beta-enterprise.asset-pack-5a105e8b9d40e1329780d62ea2265d8a.assetpack/flying-block-game.html)
2. Parsing the html text myself using document.createRange + createContextualFragment --> becomes complex to manage for non-trivial games.
Any help displaying this inside an iframe in the App itself so that all requests go through the Ionic engine and have my own iosapp:// custom scheme instead of cdvfile://localhost (that will likely result in CORS blockers)?
In alternative, would it work using a different plugin for a local webserver that serves those ODR downloaded files?
I easily fixed my problem using cordova-plugin-ionic-webview's window.Ionic.WebView.convertFileSrc
:
The game loads correctly inside an iframe in my Cordova App in this way:
var iframe = document.createElement('iframe');
iframe.src = window.Ionic.WebView.convertFileSrc('file:////Users/gsacchi/Library/Developer/CoreSimulator/Devices/D016D2BC-E9F9-43F2-8EC1-9A471819A9B5/data/Library/OnDemandResources/AssetPacks/11159225-E96A-4BEC-9051-735912378DB0/15538308173473832725/com.company-us.sports-beta-enterprise.asset-pack-5a105e8b9d40e2329780d62ea2265d8a.assetpack/flying-block-game.html');
var target = document.body.appendChild(iframe);
Regarding CORS issues, third parties usually don't whitelist file:/// or localhost, the good news though is that: the requests going out from the iframe have the same custom hostname and scheme as the App so there are no CORS issues!