Loading map completely offline

[dsimcic]

Hello,
I'm using the OfflineTilesAdvanced object with Offline library v. 3.7.
I can't load map with previously downloaded tiles in DB when i try to start the page completely offline (LAN cable disconnected).
I'm using an appcache file with map service url specified but it doesn't work (i've read documentation about it)
If i start the page online and then i switch to offline everything works like expected.
It seems that the map object can't initialize some map service properties when starts offline.
I've also added some graphics in a graphic layer on the map that i can see properly.
Zoom and pan of the map object are working.
I've noticed also that the event "onExtentChange" doesn't raise the method "_onExtentChangeHandler" of the OfflineTilesAdvanced object so i think that the "_updateTiles" method is not called properly.
I've tried to connect manually with no luck.
I think this maybe could be the reason why i can't see downloaded tiles on the map.
I'm including this scenario in a Cordova solution and is not so easy for me sharing code due the complexity of this solution.
Thank you so much for any suggestion.

Dario

[andygup]

@dsimcic my suggestion is to build a simple non-Cordova, plain old JavaScript version of the app and see if you can make that basic functionality work that way. Plus you'll be able to share the non-Cordova test app and I can help troubleshoot.

[dsimcic]

Hello @andygup,
thank you so much for your reply.
I've created a zip file with a modified version of the simple-tiles.html that reflects all the methods of my Cordova solution.
This is the Wetransfer url https://we.tl/t-avEUbfyC1I
If you unzip the archive in your web root folder you should open the file with the url http://localhost/offline-editor-js-master/samples/simple-tiles.html.
If you use it online, download the map tiles and go offline it works correctly, but if you try to open the page when you're completely offline the map object can't load.
This is the console log that i get:
database opened successfully
../dist/offline-tiles-advanced-src.js:560 _getTileInfoPrivate failed: [object ProgressEvent]

Thank you for any suggestion.

Best regards.

[andygup]

@dsimcic can you drag and drop the unzipped files into the issue here in github? Or even better, can you create a github repo with the files? Sorry, I don't have any way to safely open the zip file.

[dsimcic]

@andygup i've created a new private github repo. You should have received the collaboration request.
Here's the url https://github.com/dsimcic/offline-editor-js-sample
Let me know if you have problems.
Thank you so much!

[andygup]

@dsimcic the implementation in simple-tiles.html won't work for full offline workflows that involve restarting the browser. If you want to be able to restart the app while offline you'll have to strictly follow the coding patterns used in appcache-tiles.html, note that debugging the full offline application life-cycle can be very challenging.

Additional information is available here: https://github.com/Esri/offline-editor-js/blob/master/doc/howtousetiles.md#approach-2---tiled-map-services-full-offline

And, just a reminder that there are tile storage limitations that you should be aware of: #468 (comment).

Because of these and other issues, we recommend using our native Runtime SDKs which offer robust, scalable and fully supported offline workflows.

[andygup]

Last quick item - as noted under Supported Browsers using this library in a hybrid (Cordova/Ionic, etc) environment is not supported. I can only offer suggestions for plain old browser implementations.

Reference: http://esri.github.io/offline-editor-js/demo/ (scroll to the bottom of the page). Sorry, I just noticed there's no longer a link to the Supported Browsers Table from the README.

[dsimcic]

Hello @andygup,
i've modified the simple-tiles file using the coding pattern of appcache-tiles.html.
I get this GET error but i think it's related to some problem with the use of the appcache file.
offline.min.js:2 GET https://www.valtellinaoutdoor.it/arcgis/rest/services/ValtellinaNT/Outdoor_Basemap_Estiva_DBT/MapServer?f=pjson net::ERR_INTERNET_DISCONNECTED
I think that this request should be redirected locally using appcache.

I've noticed also the original sample appcache-tiles.html isn't working when i click on download tiles.
I have to modify some code or additional configuration is needed?
Thank you so much.

Regards.

[andygup]

net::ERR_INTERNET_DISCONNECTED

This error is most likely because the app isn't correctly recognizing that it's offline. If the app was fully offline it would try to retrieve tiles from the local database and not from https://www.valtellinaoutdoor.it/. I haven't looked at the offline detection library in several years so there's no telling if that's working correctly or not.

I recommend checking if the offline detection is working. When the app first loads set a break point here: https://github.com/Esri/offline-editor-js/blob/master/samples/appcache-tiles.html#L261.

I've noticed also the original sample appcache-tiles.html isn't working

Gotcha, in the online original sample it looks like there is at least one fatal errors due to insecure/mixed content and a few warnings about using Application Cache instead of service workers. If I have time I'll fix the mixed content error, but there's no telling what else might break. This repo has been in maintenance mode for just about exactly 3 years.

Mixed Content: The page at 'https://esri.github.io/offline-editor-js/samples/appcache-tiles.html' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer?f=pjson'. This request has been blocked; the content must be served over HTTPS.

[dsimcic]

Thank you for the tip @andygup!
I've debugged the Offline.check() method and if i start the app completely offline the status property is set to true even it should be false.
I tried also to force it with the goOffline method of the OfflineAdvancedBasemap but it doesn't work.
Do you have any suggestion to force this check of the Offline tool?
Thank you so much for your advices.

Regards.

[andygup]

Any console errors? I don't have any way to test it right now. Your best best is to set up multiple break points and step thru the offline library code until you find the issue.

[dsimcic]

Hi @andygup,
i don't have any useful console error. I've also tried to force the value of Offline.state to "down" but when i call the Offline.check() method the value is set again to "up" even if i'm disconnected. I will try a step-by-step debug to get more informations.
Thank you!

Regards.

[dsimcic]

Hi @andygup,
i was able to fix the single html page and is working also when i start completely offline and without the appcache file.
I was trying to fix the cordova code using the logic of the single page code but i can't make it works.
I'm still working on a modified version of the offline library.
Maybe some wrong url checks are causing the issue.
Do you know if the map and layers events in cordova are managed in different ways from the standard html page?
Thank you so much.

Regards.

[andygup]

i was able to fix the single html page and is working also when i start completely offline and without the appcache file.

You got the app to restart correctly while fully offline without an appcache file? That doesn't sound right, or you are relying on the default browser cache which isn't a best practice for a full offline web app, and prone to problems later on down the line.

Do you know if the map and layers events in cordova are managed in different ways from the standard html page?

Make sure to listen for the onDeviceReady event in Cordova before starting up the ArcGIS JS API, here's an example: https://github.com/Esri/quickstart-map-phonegap. Other than that, all the JavaScript API aspects should work that same as in a desktop browser.

[dsimcic]

Hi @andygup,
i confirm that the single page loaded in Cordova simulator environment works even if i don't use an appcache file.
I've tested with chrome's anonymous navigation.
When i try it on a physical device it doesn't works. I was testing both of the page and i noticed that on physical device the getTileUrl method is not called.
I also confirm that the onDeviceReady event is connected and used for application initialization.
Using AMD define instead of dojo.require to initialize the app could generate some unexpected behavior?
It seems the only difference between standard html and cordova environment.
Now i'm debugging the calls to getTileUrl method in Cordova offline mode.
Thank you so much for your patience.

Regards.

[andygup]

When i try it on a physical device it doesn't works. I was testing both of the page and i noticed that on physical device the getTileUrl method is not called.

I should clarify - app cache is required and not optional. Not sure if that's your primary issue, but it will eventually cause a problem if you aren't using app cache.

Using AMD define instead of dojo.require to initialize the app could generate some unexpected behavior?

Not sure what you mean, can you provide an example? The patterns in the Appcache Tiles Only sample represents the best practice for loading this library and the ArcGIS API for JavaScript v3.x - I am aware the sample has a few bugs when running in the most recent version of Chrome, but you should be able to easily fix those in your local copy of the code.

[dsimcic]

Hi @andygup,
finally i was able to fix the code of the cordova application.
I've added a very simple appcache file specifying only the url of the map service.
When the app starts normally i save in localstorage the json response of the mapservice.
Instead, when tha app starts offline, i reload this informations from storage and call the _parseTileInfo method with this data.
I've noticed also that i was adding in map an empty graphic layer that was changing all the map events and status.
When i've removed this layer i was able to load tiles locally adding only the OfflineTilesAdvanced layer.
Thank you for your help and your patience.
If you need some code for any reason i'm glad to share with you.

Best regards and thank you so much again.

[andygup]

Glad to help. As long as you are happy and your implementation is meeting your requirements I'll close this.