Download presentation
Presentation is loading. Please wait.
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
Lifecycle Native HTML, CSS, JS PhoneGap Application ArcGIS JS API Map
Layers
9
Lifecycle Part 1 Native PhoneGap Application
10
Lifecycle Part 2 Native HTML, CSS, JS PhoneGap Application
Native WebView <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Map</title> </head> <body> . . . </body> </html>
11
Lifecycle Part 3 Native HTML, CSS, JS PhoneGap Application
ArcGIS JS API
12
Lifecycle Part 4 Native HTML, CSS, JS PhoneGap Application
ArcGIS JS API Map
13
Lifecycle Part 5 Native HTML, CSS, JS PhoneGap Application
ArcGIS JS API Map Layers
14
UX Frameworks
15
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?
16
Bootstrap-map-js github.com/Esri/bootstrap-map-js Auto-resize map Auto-center map Not PhoneGap tested
17
Jquery-mobile-map-js
github.com/Esri/jquery-mobile-map-js Auto-resize map Auto-center map
18
View-based Approach Single page, single view Single page, multi-view Multi-page
20
VIEW 1 VIEW 2
21
JS library loading Synchronous vs Asynchronous
22
Synchronous vs async Trade-offs in map load performance Dependencies between libs? Synchronous forces life cycle management Consider concatenating JS libs
23
Synchronous Time (milliseconds) map.css jquery.css gp.js
24
Async Time (milliseconds) map.css jquery.css gp.js
25
Host files locally HTML, CSS, JS, images Significantly faster load times! Security (no interceptions)
26
ArcGIS Web Optimizer One JS library file!
27
Security Whitelisting (as of Cordova 4.0) Content Security Policy (CSP) iOS Android
28
Security Mitigate XSS attacks Data injection attacks Unauthorized images
29
config.xml - Navigation Whitelist
30
config.xml - Intent Whitelist
31
Content Security Policy (CSP)
32
Content Security Policy (CSP)
Directives
33
Geolocation with PhoneGap
34
Geolocation with PhoneGap
Same coding pattern. Works online and offline Approximate location Still always requires user opt-in.
35
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
36
Geolocation (online) Online location
Location Service (Google, Microsoft, Apple) WiFi info GPS Cell network info
37
Geolocation (offline)
Offline location determination GPS only!!
38
Offline JS
39
Bad pattern!
40
Good pattern!
41
Offline JS Intermittent or no internet Ability to reload or restart app offline Lightweight cross-browser functionality Github.com/esri/Offline-editor-js
42
Offline JS Offline tiled maps for small areas Offline editing and basic attachments Offline TPKs (Tile Packages) Github.com/esri/Offline-editor-js
43
Offline JS – detect network status
github.hubspot.com/offline cordova-plugin-network-information
44
cordova-plugin-network-information
45
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
46
Offline JS More good info: slides.com/andyg/offline-js andygup.net/web-mobile/
47
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.
48
Best practices Monitor & handle offline conditions Protect all HTTP requests Host HTML, CSS, JS and images locally Cache resources when feasible
49
Use as little memory as possible
50
Bonus slide – Debugging!
Chrome and Safari remote debugging
51
Andy Gup @agup
Similar presentations
![WHAT IS AJAX? Zack Sheppard [zts2101] WHIM April 19, 2011.](/16/5109876/big_thumb.jpg "WHAT IS AJAX? Zack Sheppard [zts2101] WHIM April 19, 2011.>")
