1 / 51

Building Native Mapping Apps with PhoneGap : Advanced Techniques

Building Native Mapping Apps with PhoneGap : Advanced Techniques. Andy Gup @agup. Agenda. Application life-cycle Working with UI frameworks Security Geolocation Offline. Expectations. Experience with PhoneGap and/or Cordova Intermediate/Advanced JS, CSS Mobile JS debugging skills

lenore-fields
Download Presentation

Building Native Mapping Apps with PhoneGap : Advanced Techniques

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Building Native Mapping Apps with PhoneGap: Advanced Techniques Andy Gup @agup

  2. Agenda Application life-cycle Working with UI frameworks Security Geolocation Offline

  3. Expectations Experience with PhoneGap and/or Cordova Intermediate/Advanced JS, CSS Mobile JS debugging skills Native app debugging skills

  4. Requirements ArcGIS JS API v3.10 – v3.14 PhoneGap/Cordova 5.x Latest gen iPhone and/or Android

  5. Caveats PhoneGap/Cordova not officially supported There may be hidden gotchas Best practices will minimize gotchas

  6. quickstart-map-phonegap github.com/Esri/quickstart-map-phonegap Samples Best practices

  7. PhoneGap Application Lifecycle

  8. LifecyclePart 1 Native PhoneGap Application

  9. LifecyclePart 2 Native PhoneGap Application HTML, CSS, JS Native WebView <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Map</title> </head> <body> . . . </body> </html>

  10. LifecyclePart 3 Native PhoneGap Application HTML, CSS, JS ArcGIS JS API

  11. LifecyclePart 4 Native PhoneGap Application HTML, CSS, JS ArcGIS JS API Map

  12. LifecyclePart 5 Native PhoneGap Application HTML, CSS, JS ArcGIS JS API Map Layers

  13. UX Frameworks

  14. UX Frameworks + Maps Some considerations: Do view transitions cache pages? Does map get re-created after transition? Map widgets work portrait & landscape? Gracefully handle loss of internet?

  15. Bootstrap-map-js github.com/Esri/bootstrap-map-js Auto-resize map Auto-center map Not PhoneGap tested

  16. Jquery-mobile-map-js github.com/Esri/jquery-mobile-map-js Auto-resize map Auto-center map

  17. View-based Approach Single page, single view Single page, multi-view Multi-page

  18. VIEW 1 VIEW 2

  19. JS library loadingSynchronous vsAsynchronous

  20. Synchronous vs async Trade-offs in map load performance Dependencies between libs? Synchronous forces life cycle management Consider concatenating JS libs

  21. Synchronous

  22. Async

  23. Host files locally HTML, CSS, JS, images Significantly faster load times! Security (no interceptions)

  24. ArcGIS Web Optimizer One JS library file! http://jso.arcgis.com/

  25. Security Whitelisting (as of Cordova 4.0) Content Security Policy (CSP) iOS 4.0.0 + Android 4.0.0 +

  26. Security Mitigate XSS attacks Data injection attacks Unauthorized images

  27. config.xml - Navigation Whitelist

  28. config.xml - Intent Whitelist

  29. Content Security Policy (CSP)

  30. Content Security Policy (CSP) Policy Directives

  31. Geolocation with PhoneGap

  32. Geolocation with PhoneGap Same coding pattern. Works online and offline Approximate location Still always requires user opt-in.

  33. Geolocation with PhoneGap Can allow for passive location Does not increase accuracy Does not speed up acquisitions times Outdoors – turn off WiFi! github.com/Esri/html5-geolocation-tool-js

  34. Geolocation (online) Online location • Location Service (Google, Microsoft, Apple) • WiFi info • GPS • Cell network info

  35. Geolocation (offline) Offline location determination • GPS only!!

  36. Offline JS

  37. Bad pattern!

  38. Good pattern!

  39. Offline JS Intermittent or no internet Ability to reload or restart app offline Lightweight cross-browser functionality Github.com/esri/Offline-editor-js

  40. Offline JS Offline tiled maps for small areas Offline editing and basic attachments Offline TPKs (Tile Packages) Github.com/esri/Offline-editor-js

  41. Offline JS – detect network status github.hubspot.com/offline cordova-plugin-network-information

  42. cordova-plugin-network-information

  43. cordova-plugin-network-information Caveats: Use in addition to Offline.js Mainly benefits Android users iOS can’t detect connection type Emulators may return Connection.UNKNOWN

  44. Offline JS More good info: slides.com/andyg/offline-js andygup.net/web-mobile/

  45. Offline JS Need a full features, robust offline solution? • ArcGIS Runtime SDKs • Integrated offline support for editing and sync • Support for related tables, domains, subtypes and more.

  46. Best practices Monitor & handle offline conditions Protect all HTTP requests Host HTML, CSS, JS and images locally Cache resources when feasible

  47. Use as little memory as possible

  48. Bonus slide – Debugging! Chrome and Safari remote debugging

  49. Andy Gup agup@esri.com @agup

More Related