building native mapping apps with phonegap: advanced ...€¦ · building native mapping apps with...

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

Upload: others

Post on 25-Jun-2020

23 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Building Native Mapping Apps with PhoneGap: Advanced ...€¦ · Building Native Mapping Apps with PhoneGap: Advanced Techniques, 2015 Esri User Conference—Presentation, 2015 Esri

Building Native Mapping Apps with PhoneGap: Advanced Techniques

Andy Gup@agup

Page 2: Building Native Mapping Apps with PhoneGap: Advanced ...€¦ · Building Native Mapping Apps with PhoneGap: Advanced Techniques, 2015 Esri User Conference—Presentation, 2015 Esri

AgendaApplication life-cycleWorking with UI frameworksSecurityGeolocationOffline

Page 3: Building Native Mapping Apps with PhoneGap: Advanced ...€¦ · Building Native Mapping Apps with PhoneGap: Advanced Techniques, 2015 Esri User Conference—Presentation, 2015 Esri

ExpectationsExperience with PhoneGap and/or CordovaIntermediate/Advanced JS, CSSMobile JS debugging skillsNative app debugging skills

Page 4: Building Native Mapping Apps with PhoneGap: Advanced ...€¦ · Building Native Mapping Apps with PhoneGap: Advanced Techniques, 2015 Esri User Conference—Presentation, 2015 Esri

RequirementsArcGIS JS API v3.10 – v3.14PhoneGap/Cordova 5.xLatest gen iPhone and/or Android

Page 5: Building Native Mapping Apps with PhoneGap: Advanced ...€¦ · Building Native Mapping Apps with PhoneGap: Advanced Techniques, 2015 Esri User Conference—Presentation, 2015 Esri

CaveatsPhoneGap/Cordova not officially supportedThere may be hidden gotchasBest practices will minimize gotchas

Page 6: Building Native Mapping Apps with PhoneGap: Advanced ...€¦ · Building Native Mapping Apps with PhoneGap: Advanced Techniques, 2015 Esri User Conference—Presentation, 2015 Esri

quickstart-map-phonegapgithub.com/Esri/quickstart-map-phonegap

SamplesBest practices

Page 7: Building Native Mapping Apps with PhoneGap: Advanced ...€¦ · Building Native Mapping Apps with PhoneGap: Advanced Techniques, 2015 Esri User Conference—Presentation, 2015 Esri

PhoneGap Application Lifecycle

Page 8: Building Native Mapping Apps with PhoneGap: Advanced ...€¦ · Building Native Mapping Apps with PhoneGap: Advanced Techniques, 2015 Esri User Conference—Presentation, 2015 Esri

LifecyclePart 1

NativePhoneGapApplication

Page 9: Building Native Mapping Apps with PhoneGap: Advanced ...€¦ · Building Native Mapping Apps with PhoneGap: Advanced Techniques, 2015 Esri User Conference—Presentation, 2015 Esri

LifecyclePart 2

HTML, CSS, JSNativePhoneGapApplication

Native WebView<!DOCTYPE html><html><head><meta charset="utf-8"><title>Map</title>

</head><body>

. . .</body></html>

Page 10: Building Native Mapping Apps with PhoneGap: Advanced ...€¦ · Building Native Mapping Apps with PhoneGap: Advanced Techniques, 2015 Esri User Conference—Presentation, 2015 Esri

LifecyclePart 3

HTML, CSS, JS

ArcGIS JS API

NativePhoneGapApplication

Page 11: Building Native Mapping Apps with PhoneGap: Advanced ...€¦ · Building Native Mapping Apps with PhoneGap: Advanced Techniques, 2015 Esri User Conference—Presentation, 2015 Esri

LifecyclePart 4

HTML, CSS, JS

ArcGIS JS API

Map

NativePhoneGapApplication

Page 12: Building Native Mapping Apps with PhoneGap: Advanced ...€¦ · Building Native Mapping Apps with PhoneGap: Advanced Techniques, 2015 Esri User Conference—Presentation, 2015 Esri

LifecyclePart 5

HTML, CSS, JS

ArcGIS JS API

Map

Layers

NativePhoneGapApplication

Page 13: Building Native Mapping Apps with PhoneGap: Advanced ...€¦ · Building Native Mapping Apps with PhoneGap: Advanced Techniques, 2015 Esri User Conference—Presentation, 2015 Esri

UX Frameworks

Page 14: Building Native Mapping Apps with PhoneGap: Advanced ...€¦ · Building Native Mapping Apps with PhoneGap: Advanced Techniques, 2015 Esri User Conference—Presentation, 2015 Esri

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?

Page 15: Building Native Mapping Apps with PhoneGap: Advanced ...€¦ · Building Native Mapping Apps with PhoneGap: Advanced Techniques, 2015 Esri User Conference—Presentation, 2015 Esri

Bootstrap-map-jsgithub.com/Esri/bootstrap-map-js

Auto-resize mapAuto-center mapNot PhoneGap tested

Page 16: Building Native Mapping Apps with PhoneGap: Advanced ...€¦ · Building Native Mapping Apps with PhoneGap: Advanced Techniques, 2015 Esri User Conference—Presentation, 2015 Esri

Jquery-mobile-map-jsgithub.com/Esri/jquery-mobile-map-js

Auto-resize mapAuto-center map

Page 17: Building Native Mapping Apps with PhoneGap: Advanced ...€¦ · Building Native Mapping Apps with PhoneGap: Advanced Techniques, 2015 Esri User Conference—Presentation, 2015 Esri

View-based ApproachSingle page, single viewSingle page, multi-view Multi-page

Page 18: Building Native Mapping Apps with PhoneGap: Advanced ...€¦ · Building Native Mapping Apps with PhoneGap: Advanced Techniques, 2015 Esri User Conference—Presentation, 2015 Esri
Page 19: Building Native Mapping Apps with PhoneGap: Advanced ...€¦ · Building Native Mapping Apps with PhoneGap: Advanced Techniques, 2015 Esri User Conference—Presentation, 2015 Esri

VIEW 1 VIEW 2

Page 20: Building Native Mapping Apps with PhoneGap: Advanced ...€¦ · Building Native Mapping Apps with PhoneGap: Advanced Techniques, 2015 Esri User Conference—Presentation, 2015 Esri

JS library loading

Synchronous vs

Asynchronous

Page 21: Building Native Mapping Apps with PhoneGap: Advanced ...€¦ · Building Native Mapping Apps with PhoneGap: Advanced Techniques, 2015 Esri User Conference—Presentation, 2015 Esri

Synchronous vs asyncTrade-offs in map load performanceDependencies between libs?Synchronous forces life cycle managementConsider concatenating JS libs

Page 22: Building Native Mapping Apps with PhoneGap: Advanced ...€¦ · Building Native Mapping Apps with PhoneGap: Advanced Techniques, 2015 Esri User Conference—Presentation, 2015 Esri

Time (milliseconds)

map.css

jquery.css

gp.js

Synchronous

Page 23: Building Native Mapping Apps with PhoneGap: Advanced ...€¦ · Building Native Mapping Apps with PhoneGap: Advanced Techniques, 2015 Esri User Conference—Presentation, 2015 Esri

Time (milliseconds)

map.css

jquery.css

gp.js

Async

Page 24: Building Native Mapping Apps with PhoneGap: Advanced ...€¦ · Building Native Mapping Apps with PhoneGap: Advanced Techniques, 2015 Esri User Conference—Presentation, 2015 Esri

Host files locallyHTML, CSS, JS, imagesSignificantly faster load times!Security (no interceptions)

Page 25: Building Native Mapping Apps with PhoneGap: Advanced ...€¦ · Building Native Mapping Apps with PhoneGap: Advanced Techniques, 2015 Esri User Conference—Presentation, 2015 Esri

ArcGIS Web OptimizerOne JS library file!http://jso.arcgis.com/

Page 26: Building Native Mapping Apps with PhoneGap: Advanced ...€¦ · Building Native Mapping Apps with PhoneGap: Advanced Techniques, 2015 Esri User Conference—Presentation, 2015 Esri

SecurityWhitelisting (as of Cordova 4.0)Content Security Policy (CSP)iOS 4.0.0 +Android 4.0.0 +

Page 27: Building Native Mapping Apps with PhoneGap: Advanced ...€¦ · Building Native Mapping Apps with PhoneGap: Advanced Techniques, 2015 Esri User Conference—Presentation, 2015 Esri

SecurityMitigate XSS attacksData injection attacksUnauthorized images

Page 28: Building Native Mapping Apps with PhoneGap: Advanced ...€¦ · Building Native Mapping Apps with PhoneGap: Advanced Techniques, 2015 Esri User Conference—Presentation, 2015 Esri

config.xml - Navigation Whitelist

Page 29: Building Native Mapping Apps with PhoneGap: Advanced ...€¦ · Building Native Mapping Apps with PhoneGap: Advanced Techniques, 2015 Esri User Conference—Presentation, 2015 Esri

config.xml - Intent Whitelist

Page 30: Building Native Mapping Apps with PhoneGap: Advanced ...€¦ · Building Native Mapping Apps with PhoneGap: Advanced Techniques, 2015 Esri User Conference—Presentation, 2015 Esri

Content Security Policy (CSP)

Page 31: Building Native Mapping Apps with PhoneGap: Advanced ...€¦ · Building Native Mapping Apps with PhoneGap: Advanced Techniques, 2015 Esri User Conference—Presentation, 2015 Esri

Content Security Policy (CSP)

Page 32: Building Native Mapping Apps with PhoneGap: Advanced ...€¦ · Building Native Mapping Apps with PhoneGap: Advanced Techniques, 2015 Esri User Conference—Presentation, 2015 Esri

Geolocation with PhoneGap

Page 33: Building Native Mapping Apps with PhoneGap: Advanced ...€¦ · Building Native Mapping Apps with PhoneGap: Advanced Techniques, 2015 Esri User Conference—Presentation, 2015 Esri

Geolocation with PhoneGapSame coding pattern.Works online and offlineApproximate location Still always requires user opt-in.

Page 34: Building Native Mapping Apps with PhoneGap: Advanced ...€¦ · Building Native Mapping Apps with PhoneGap: Advanced Techniques, 2015 Esri User Conference—Presentation, 2015 Esri

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

Page 35: Building Native Mapping Apps with PhoneGap: Advanced ...€¦ · Building Native Mapping Apps with PhoneGap: Advanced Techniques, 2015 Esri User Conference—Presentation, 2015 Esri

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

Page 36: Building Native Mapping Apps with PhoneGap: Advanced ...€¦ · Building Native Mapping Apps with PhoneGap: Advanced Techniques, 2015 Esri User Conference—Presentation, 2015 Esri

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

Page 37: Building Native Mapping Apps with PhoneGap: Advanced ...€¦ · Building Native Mapping Apps with PhoneGap: Advanced Techniques, 2015 Esri User Conference—Presentation, 2015 Esri

Offline JS

Page 38: Building Native Mapping Apps with PhoneGap: Advanced ...€¦ · Building Native Mapping Apps with PhoneGap: Advanced Techniques, 2015 Esri User Conference—Presentation, 2015 Esri

Bad pattern!

Page 39: Building Native Mapping Apps with PhoneGap: Advanced ...€¦ · Building Native Mapping Apps with PhoneGap: Advanced Techniques, 2015 Esri User Conference—Presentation, 2015 Esri

Good pattern!

Page 40: Building Native Mapping Apps with PhoneGap: Advanced ...€¦ · Building Native Mapping Apps with PhoneGap: Advanced Techniques, 2015 Esri User Conference—Presentation, 2015 Esri

Offline JSIntermittent or no internet

Ability to reload or restart app offline

Lightweight cross-browser functionality

Github.com/esri/Offline-editor-js

Page 41: Building Native Mapping Apps with PhoneGap: Advanced ...€¦ · Building Native Mapping Apps with PhoneGap: Advanced Techniques, 2015 Esri User Conference—Presentation, 2015 Esri

Offline JSOffline tiled maps for small areas

Offline editing and basic attachments

Offline TPKs (Tile Packages)

Github.com/esri/Offline-editor-js

Page 42: Building Native Mapping Apps with PhoneGap: Advanced ...€¦ · Building Native Mapping Apps with PhoneGap: Advanced Techniques, 2015 Esri User Conference—Presentation, 2015 Esri

Offline JS – detect network statusgithub.hubspot.com/offline

cordova-plugin-network-information

Page 43: Building Native Mapping Apps with PhoneGap: Advanced ...€¦ · Building Native Mapping Apps with PhoneGap: Advanced Techniques, 2015 Esri User Conference—Presentation, 2015 Esri

cordova-plugin-network-information

Page 44: Building Native Mapping Apps with PhoneGap: Advanced ...€¦ · Building Native Mapping Apps with PhoneGap: Advanced Techniques, 2015 Esri User Conference—Presentation, 2015 Esri

Caveats:Use in addition to Offline.jsMainly benefits Android usersiOS can’t detect connection typeEmulators may return Connection.UNKNOWN

cordova-plugin-network-information

Page 45: Building Native Mapping Apps with PhoneGap: Advanced ...€¦ · Building Native Mapping Apps with PhoneGap: Advanced Techniques, 2015 Esri User Conference—Presentation, 2015 Esri

Offline JSMore good info:slides.com/andyg/offline-jsandygup.net/web-mobile/

Page 46: Building Native Mapping Apps with PhoneGap: Advanced ...€¦ · Building Native Mapping Apps with PhoneGap: Advanced Techniques, 2015 Esri User Conference—Presentation, 2015 Esri

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.

Page 47: Building Native Mapping Apps with PhoneGap: Advanced ...€¦ · Building Native Mapping Apps with PhoneGap: Advanced Techniques, 2015 Esri User Conference—Presentation, 2015 Esri

Best practicesMonitor & handle offline conditionsProtect all HTTP requestsHost HTML, CSS, JS and images locallyCache resources when feasible

Page 48: Building Native Mapping Apps with PhoneGap: Advanced ...€¦ · Building Native Mapping Apps with PhoneGap: Advanced Techniques, 2015 Esri User Conference—Presentation, 2015 Esri

Use as little memory as possible

Page 49: Building Native Mapping Apps with PhoneGap: Advanced ...€¦ · Building Native Mapping Apps with PhoneGap: Advanced Techniques, 2015 Esri User Conference—Presentation, 2015 Esri

Bonus slide – Debugging!Chrome and Safari remote debugging

Page 51: Building Native Mapping Apps with PhoneGap: Advanced ...€¦ · Building Native Mapping Apps with PhoneGap: Advanced Techniques, 2015 Esri User Conference—Presentation, 2015 Esri