Building Native Mapping Apps with PhoneGap: Advanced Techniques Andy

Size: px

Start display at page:

Download "Building Native Mapping Apps with PhoneGap: Advanced Techniques Andy"

Aubrey Armstrong
6 years ago
Views:

1 Building Native Mapping Apps with PhoneGap: Advanced Techniques Andy

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 Part 1 Native PhoneGap Application

9 Lifecycle Part 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 Lifecycle Part 3 Native PhoneGap Application HTML, CSS, JS ArcGIS JS API

11 Lifecycle Part 4 Native PhoneGap Application HTML, CSS, JS ArcGIS JS API Map

12 Lifecycle Part 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

19 VIEW 1 VIEW 2

20 JS library loading Synchronous vs Asynchronous

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

22 Synchronous map.css jquery.css gp.js Time (milliseconds)

23 Async map.css jquery.css gp.js Time (milliseconds)

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

25 ArcGIS Web Optimizer One JS library file!

26 Security Whitelisting (as of Cordova 4.0) Content Security Policy (CSP) ios Android

27 Security Mitigate XSS attacks Data injection attacks Unauthorized images

28 config.xml - Navigation Whitelist

29 config.xml - Intent Whitelist

30 Content Security Policy (CSP)

31 Content Security Policy (CSP)

32 Geolocation with PhoneGap

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

34 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

35 Geolocation (online) Online location - Location Service (Google, Microsoft, Apple) - WiFi info - GPS - Cell network info

36 Geolocation (offline) Offline location determination - GPS only!!

37 Offline JS

38 Bad pattern!

39 Good pattern!

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

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

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

43 cordova-plugin-network-information

44 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

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

46 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.

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

48 Use as little memory as possible

49 Bonus slide Debugging! Chrome and Safari remote debugging

50 Andy

Building Native Apps with ArcGIS API for JavaScript Using PhoneGap and jquery. Andy Gup, Lloyd Heberlie

Building Native Apps with ArcGIS API for JavaScript Using PhoneGap and jquery Andy Gup, Lloyd Heberlie Agenda Getting to know PhoneGap jquery overview jquery and ArcGIS API for JavaScript Putting it all