building native mapping apps with phonegap: advanced techniques andy gup @agup
Post on 12-Jan-2016
221 Views
Preview:
TRANSCRIPT
Building Native Mapping Apps with PhoneGap: Advanced Techniques
Andy Gup@agup
AgendaApplication life-cycleWorking with UI frameworksSecurityGeolocationOffline
ExpectationsExperience with PhoneGap and/or CordovaIntermediate/Advanced JS, CSSMobile JS debugging skillsNative app debugging skills
RequirementsArcGIS JS API v3.10 – v3.14PhoneGap/Cordova 5.xLatest gen iPhone and/or Android
CaveatsPhoneGap/Cordova not officially supportedThere may be hidden gotchasBest practices will minimize gotchas
quickstart-map-phonegapgithub.com/Esri/quickstart-map-phonegap
SamplesBest practices
PhoneGap Application Lifecycle
LifecyclePart 1
NativePhoneGapApplication
LifecyclePart 2
HTML, CSS, JSNativePhoneGapApplication
Native WebView<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Map</title></head><body> . . .</body></html>
LifecyclePart 3
HTML, CSS, JS
ArcGIS JS API
NativePhoneGapApplication
LifecyclePart 4
HTML, CSS, JS
ArcGIS JS API
Map
NativePhoneGapApplication
LifecyclePart 5
HTML, CSS, JS
ArcGIS JS API
Map
Layers
NativePhoneGapApplication
UX Frameworks
UX Frameworks + MapsSome considerations:
Do view transitions cache pages?Does map get re-created after transition?Map widgets work portrait & landscape?Gracefully handle loss of internet?
Bootstrap-map-jsgithub.com/Esri/bootstrap-map-js
Auto-resize mapAuto-center mapNot PhoneGap tested
Jquery-mobile-map-jsgithub.com/Esri/jquery-mobile-map-js
Auto-resize mapAuto-center map
View-based ApproachSingle page, single viewSingle page, multi-view Multi-page
VIEW 1 VIEW 2
JS library loading
Synchronous vs
Asynchronous
Synchronous vs asyncTrade-offs in map load performanceDependencies between libs?Synchronous forces life cycle managementConsider concatenating JS libs
Time (milliseconds)
map.css
jquery.css
gp.js
Synchronous
Time (milliseconds)
map.css
jquery.css
gp.js
Async
Host files locallyHTML, CSS, JS, imagesSignificantly faster load times!Security (no interceptions)
ArcGIS Web OptimizerOne JS library file!http://jso.arcgis.com/
SecurityWhitelisting (as of Cordova 4.0)Content Security Policy (CSP)iOS 4.0.0 +Android 4.0.0 +
SecurityMitigate XSS attacksData injection attacksUnauthorized images
config.xml - Navigation Whitelist
config.xml - Intent Whitelist
Content Security Policy (CSP)
Content Security Policy (CSP)
Policy
Directives
Geolocation with PhoneGap
Geolocation with PhoneGapSame coding pattern.Works online and offlineApproximate location Still always requires user opt-in.
Geolocation with PhoneGapCan allow for passive locationDoes not increase accuracyDoes not speed up acquisitions timesOutdoors – turn off WiFi!
github.com/Esri/html5-geolocation-tool-js
Geolocation (online)Online location-Location Service (Google, Microsoft, Apple)-WiFi info-GPS-Cell network info
Geolocation (offline)Offline location determination-GPS only!!
Offline JS
Bad pattern!
Good pattern!
Offline JSIntermittent or no internet
Ability to reload or restart app offline
Lightweight cross-browser functionality
Github.com/esri/Offline-editor-js
Offline JSOffline tiled maps for small areas
Offline editing and basic attachments
Offline TPKs (Tile Packages)
Github.com/esri/Offline-editor-js
Offline JS – detect network statusgithub.hubspot.com/offline
cordova-plugin-network-information
cordova-plugin-network-information
Caveats:Use in addition to Offline.jsMainly benefits Android usersiOS can’t detect connection typeEmulators may return Connection.UNKNOWN
cordova-plugin-network-information
Offline JSMore good info:slides.com/andyg/offline-jsandygup.net/web-mobile/
Offline JSNeed a full features, robust offline solution?•ArcGIS Runtime SDKs•Integrated offline support for editing and sync•Support for related tables, domains, subtypes and more.
Best practicesMonitor & handle offline conditionsProtect all HTTP requestsHost HTML, CSS, JS and images locallyCache resources when feasible
Use as little memory as possible
Bonus slide – Debugging!Chrome and Safari remote debugging
Andy Gupagup@esri.com@agup
top related