Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
COMMON PHONEGAP GOTCHAS
PHONEGAP DAY EU 2016
YankoPayanko (pixabay)
HELLO!
MY NAME IS KERRI
Photo by Bill Bertram
PURPOSE • IDENTIFY PAIN POINTS
• LEARN THE "EASY" WAY
• HAPPIER USERS
• KEEP BRAIN CELLS
COMMON
PAIN POINTS*
• PLUGIN ISSUES
• XHR / AJAX FAILURES / CSP / CORS
• CLI INSTALLATION
• ICONS / LAUNCH SCREENS
• TREAT...
CLI
INSTALLATION
• WINDOWS SEEMS TO BE
PROBLEMATIC FOR USERS
• NETWORK RESTRICTIONS /
PROXIES GET IN THE WAY
• OFTEN HAVE ...
NOT A
BROWSER
• DON'T WRAP A WEBSITE
• KEEP CODE LOCAL
Browser
Web View
HTML
CSS
JS
PhoneGap
Web View
HTML
CSS
JS
Browser PhoneGap
Web View
HTML
CSS
JS
Native Code
Core
Plugins
Bridge
Device
Contacts
Storage
Sharing
IAP
SDKs
•••
Interfa...
SINGLE PAGE
APP (SPA)
• DYNAMIC DOM
• EASIER ANIMATION
• EASIER APP STATE
• FASTER
NOT A
SERVER
Server
PHP
function
consol
}
Node
function
consol
}
.NET
function
consol
}
etc.
function
consol
}
MySQL
SQL
Server
SQLite ...
Web ServerDatabase Server
PHP
function
consol
}
Node
function
consol
}
.NET
function
consol
}
etc.
function
consol
}
MySQL...
CLI, DESKTOP,
DEVELOPER, BUILD,
OH MY!
• ONE OF THE FIRST
QUESTIONS I ASK:
WHICH TOOL ARE YOU
USING?
• DEVELOPER DOESN'T
S...
CLI Desktop App Developer App Build
What
Command line interface
for creating, building,
managing, and running
PhoneGap app...
PUT A PIN IN IT
Platform
$ cordova platform add ios@4.1.0 --save
(config.xml)

<engine name="ios" spec="4.1.0" />
Plugins
$ cordova plugin ...
PLUGIN
ISSUES
• NOT INSTALLED OR INSTALLED
INCORRECTLY
• NOT WAITING FOR
DEVICEREADY
• PASSING INCORRECT/
MALFORMED PARAME...
DATA
STORAGE
• LOCALSTORAGE IS
TEMPTING, BUT A POOR
CHOICE
• SYNC IS A BIG QUESTION
(COUCHDB & POUCHDB)
• USE THE BEST STO...
localStorage
WHAT IS IT GOOD FOR?NOT MUCH
localStorage File API Web SQL IndexedDB
SQLite
(1, 2, 3)
App Prefs Keychain
Quota ~5mb n/a 5 - 50mb 5 - 50mb n/a
platform
...
DON'T STORE SENSITIVE
INFORMATION
YOUR USER'S DATA AND
PRIVACY ARE PRICELESS
ALWAYS USE HTTPS
DON'T TRUST
YOUR DATA
• VALIDATE EVERYWHERE
• DOM INJECTION
• SQL INJECTION
// DOM INJECTION:
let untrustedData = `<button onclick="doSomethingNefarious();"/>`;
el.innerHTML = untrustedData; // SUSC...
NETWORK
CONNECTIVITY
• LOTS OF
MISUNDERSTANDING
ABOUT WHITELIST AND
CONTENT-SECURITY-
POLICY
CONFIGURE THE
WHITELIST
Network
Access
<access origin="https://www.example.com" />
<access origin="https://*.example.com" />
<access origin="*" />...
CSP META
TAG
• TIGHTEN AS MUCH AS
POSSIBLE
• DEV WILL BE MORE
PERMISSIVE
<!-- Development CSP -->
<meta http-equiv="Content-Security-Policy"
content="default-src 'self' gap: https://ssl.gstatic.c...
'self' Required to load local resources
gap: UIWebView only (iOS) — used by web-native bridge
ws: Web socket support (need...
CROSS-ORIGIN
RESOURCE
SHARING (CORS)
• SERVER-SIDE
• REQUIRED FOR
WKWEBVIEW,
PHONEGAP SERVE, AND
BROWSER
CONNECTIVITY IS NOT
GUARANTEED
if (!navigator.onLine) {
throw new OfflineError(); // offline; don't bother
}
let xhr = new XMLHttpRequest();
xhr.open(met...
ICONS & LAUNCH
SCREENS
• PATHS ARE RELATIVE TO
CONFIG.XML
• USE MODERN <SPLASH>
AND <ICON> TAGS
• MAKE SURE THE IMAGE IS
S...
PERCEIVED
AS SLOW
• 300MS DELAY **SIGH**
• JANKY ANIMATIONS
• PROFILE!
BAN SLOW
INTERACTIONS
• FAST CLICK OR GESTURE
LIBRARY (1, 2)
• AFFORDANCES
• DELAY WORK UNTIL
AFTER ANIMATIONS
PROFILE • TRACK MEMORY, FRAMES,
EXECUTION TIME
• CHROME / SAFARI +
INSTRUMENTS
• SCREEN RECORDING
PERFORMANCE
MATTERS Quantifiable Performance

Bruce Lefebvre 11:20am
DESIGN
RESPONSIVELY
• HTML IS ALREADY RESPONSIVE
• RESPONSIVE UNITS (%, REM,
VIEWPORT
UNITS:VH,VW,VMAX,VMIN)
• MEDIA QUERI...
iPhone iPad (landscape)
MOBILE IS
QUIRKY
• MOBILE WEB IS QUIRKY
• ACCEPT DEVICE & PLATFORM-
SPECIFIC WORKAROUNDS
• DEVICE PLUGIN
• CROSSWALK
• WKW...
My finger is actually here
Touch is registered here
iOS UIWebView Scroll
Offset Bug
# iOS 9 (UIWebView on iOS 8)
$ cordova plugin add cordova-plugin-wkwebview-engine --save
# iOS 8 & 9
$ cordova plugin add ...
MANAGE THE
KEYBOARD
Handling the keyboard in
hybrid applications

Tim Lancina 10:15am
THANK YOU! @photokandy
www.photokandy.com
Common PhoneGap Gotchas (#PGDay EU 2016)
Upcoming SlideShare
Loading in …5
×

Common PhoneGap Gotchas (#PGDay EU 2016)

950 views

Published on

Slides from my presentation at PhoneGap Day EU in Amsterdam (May 19, 2016). If you have any questions or comments, I'd be happy to hear from you!

Common PhoneGap Gotchas (#PGDay EU 2016)

  1. 1. COMMON PHONEGAP GOTCHAS PHONEGAP DAY EU 2016 YankoPayanko (pixabay)
  2. 2. HELLO! MY NAME IS KERRI Photo by Bill Bertram
  3. 3. PURPOSE • IDENTIFY PAIN POINTS • LEARN THE "EASY" WAY • HAPPIER USERS • KEEP BRAIN CELLS
  4. 4. COMMON PAIN POINTS* • PLUGIN ISSUES • XHR / AJAX FAILURES / CSP / CORS • CLI INSTALLATION • ICONS / LAUNCH SCREENS • TREATING PHONEGAP AS A BROWSER / SERVER • MISUNDERSTANDING PHONEGAP TOOLS • DATA STORAGE • RESPONSIVE DESIGN • SLOW • DIDN'T EXPECT PLATFORM QUIRKS *NOT SCIENTIFICALLY DETERMINED
  5. 5. CLI INSTALLATION • WINDOWS SEEMS TO BE PROBLEMATIC FOR USERS • NETWORK RESTRICTIONS / PROXIES GET IN THE WAY • OFTEN HAVE DIFFICULTY CONFIGURING ENVIRONMENT VARIABLES CORRECTLY • SOMETIMES SECURITY PROGRAMS CAUSE INSTALL PROBLEMS • NPM WARNINGS LOOK SCARY • SOME GRUMBLING ABOUT NUMBER OF PREREQUISITES
  6. 6. NOT A BROWSER • DON'T WRAP A WEBSITE • KEEP CODE LOCAL
  7. 7. Browser Web View HTML CSS JS PhoneGap Web View HTML CSS JS
  8. 8. Browser PhoneGap Web View HTML CSS JS Native Code Core Plugins Bridge Device Contacts Storage Sharing IAP SDKs ••• Interfaces with Browser Chrome User Interface Visible Security; Download UI Web View HTML CSS JS Device GPS Accelerometer Limited Storage ••• Device Interfaces With Bookmarks Non- sandboxed Storage ••• Interfaces With Browser PhoneGap Web View HTML CSS JS Native Code Core Plugins Bridge Device Contacts Storage Sharing IAP SDKs ••• Interfaces with Browser Chrome User Interface Visible Security; Download UI Web View HTML CSS JS Device GPS Accelerometer Limited Storage ••• Device Interfaces With Bookmarks Non- sandboxed Storage ••• Interfaces With
  9. 9. SINGLE PAGE APP (SPA) • DYNAMIC DOM • EASIER ANIMATION • EASIER APP STATE • FASTER
  10. 10. NOT A SERVER
  11. 11. Server PHP function consol } Node function consol } .NET function consol } etc. function consol } MySQL SQL Server SQLite etc. PhoneGap JS function consol } CSS nav { dispp z-ind } HTML <nav id= <a hr </nav> SQLite Indexed DB
  12. 12. Web ServerDatabase Server PHP function consol } Node function consol } .NET function consol } etc. function consol } MySQL SQL Server SQLite etc. Mobile Device PhoneGap App Firewall XMLHttpRequest
  13. 13. CLI, DESKTOP, DEVELOPER, BUILD, OH MY! • ONE OF THE FIRST QUESTIONS I ASK: WHICH TOOL ARE YOU USING? • DEVELOPER DOESN'T SUPPORT EVERY PLUGIN • BUILD HAS DIFFERENT STRUCTURE THAN CLI • DESKTOP'S TEMPLATES NEED UPDATED
  14. 14. CLI Desktop App Developer App Build What Command line interface for creating, building, managing, and running PhoneGap apps Graphical user interface for creating, managing, and quickly testing PhoneGap apps Mobile app that connects to the Desktop app or `phonegap serve` for rapid iteration purposes Cloud service that builds apps for you without needing a local development environment Benefits Complete control Quickly create, manage, and serve apps Rapid iteration with quick reload Don't need a local dev environment Upload from CLI, .zip, GitHub Easy distribution Disadvantages Need to install prereqs & SDKS More maintenance Template is out-of-date Have to use CLI to add platforms/plugins Connection difficulties Only core + select plugins lots of edge cases not present in built apps Connection difficulties Different project structure PGB vs NPM plugin repo
  15. 15. PUT A PIN IN IT
  16. 16. Platform $ cordova platform add ios@4.1.0 --save (config.xml)
 <engine name="ios" spec="4.1.0" /> Plugins $ cordova plugin add cordova-plugin-device@1.1.1 
 --save (config.xml) <plugin name = "cordova-plugin-device"
 spec = "1.1.1" /> PhoneGap Build CLI Version <preference name = "phonegap-version" 
 value = "cli-6.0.0"/>
  17. 17. PLUGIN ISSUES • NOT INSTALLED OR INSTALLED INCORRECTLY • NOT WAITING FOR DEVICEREADY • PASSING INCORRECT/ MALFORMED PARAMETERS • PAY ATTENTION TO ERROR CALLBACK! • DOCUMENTATION IS OFTEN AN ISSUE • CAN LEAD TO FEELINGS OF POOR QUALITY
  18. 18. DATA STORAGE • LOCALSTORAGE IS TEMPTING, BUT A POOR CHOICE • SYNC IS A BIG QUESTION (COUCHDB & POUCHDB) • USE THE BEST STORAGE OPTION FOR THE DATA
  19. 19. localStorage WHAT IS IT GOOD FOR?NOT MUCH
  20. 20. localStorage File API Web SQL IndexedDB SQLite (1, 2, 3) App Prefs Keychain Quota ~5mb n/a 5 - 50mb 5 - 50mb n/a platform specific platform specific Async? ✕ ✓ ✕ ~ ~ ✓ ✓ Format Key / String Text / Binary Structured data Store / Key / Object Structured data Key / String Key / String Good for Not much Caching Temporary data Saving and loading documents Storing & querying structured data Storing semi- structured JavaScript objects Large amounts of structured data User Settings Sensitive Information Note Not persistent, No callback Persistent and temporary file systems Deprecated Bugged on iOS (buggyfill) Keep result set small! Not good for lots of data Not good for lots of data
  21. 21. DON'T STORE SENSITIVE INFORMATION
  22. 22. YOUR USER'S DATA AND PRIVACY ARE PRICELESS
  23. 23. ALWAYS USE HTTPS
  24. 24. DON'T TRUST YOUR DATA • VALIDATE EVERYWHERE • DOM INJECTION • SQL INJECTION
  25. 25. // DOM INJECTION: let untrustedData = `<button onclick="doSomethingNefarious();"/>`; el.innerHTML = untrustedData; // SUSCEPTIBLE el.textContent = untrustedData; // SAFE // SQL INJECTION: { let sql = "select * from user where username = " + username; db.transaction(tx => tx.executeSql(sql)); } // SUSCEPTIBLE { let sql = `select * from users where username = ?`; db.transaction(tx => tx.executeSql(sql, [username])); } // SAFE
  26. 26. NETWORK CONNECTIVITY • LOTS OF MISUNDERSTANDING ABOUT WHITELIST AND CONTENT-SECURITY- POLICY
  27. 27. CONFIGURE THE WHITELIST
  28. 28. Network Access <access origin="https://www.example.com" /> <access origin="https://*.example.com" /> <access origin="*" /> <!-- NOT SECURE --> Top-level Navigation (location .href) <allow-navigation href="https://*.example.com/*" /> $ cordova plugin add cordova-plugin-whitelist --save
  29. 29. CSP META TAG • TIGHTEN AS MUCH AS POSSIBLE • DEV WILL BE MORE PERMISSIVE
  30. 30. <!-- Development CSP --> <meta http-equiv="Content-Security-Policy" content="default-src 'self' gap: https://ssl.gstatic.com; connect-src 'self' ws: https://test.example.com; img-src 'self' data:; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-eval' 'unsafe-inline' gap:;"/> <!-- Production CSP --> <meta http-equiv="Content-Security-Policy" content="default-src 'self' gap: https://ssl.gstatic.com; connect-src 'self' https://www.example.com; img-src 'self' data:; style-src 'self'; script-src 'self' gap:;"/>
  31. 31. 'self' Required to load local resources gap: UIWebView only (iOS) — used by web-native bridge ws: Web socket support (needed for live reload) https://ssl.gstatic.com Android TalkBack (Accessibility) data: Inline images, including SVG use 'unsafe-eval' Try to avoid, but not always possible (live reload / plugins) 'unsafe-inline' Try to avoid, but not always possible (live reload / plugins)
  32. 32. CROSS-ORIGIN RESOURCE SHARING (CORS) • SERVER-SIDE • REQUIRED FOR WKWEBVIEW, PHONEGAP SERVE, AND BROWSER
  33. 33. CONNECTIVITY IS NOT GUARANTEED
  34. 34. if (!navigator.onLine) { throw new OfflineError(); // offline; don't bother } let xhr = new XMLHttpRequest(); xhr.open(method, URI, true); xhr.timeout = 30000; // 30 second timeout xhr.ontimeout = function() { throw new TimeoutError(); // might be offline or unreachable. If online, try // again (throttle); error after too many failures // Watch for long-running queries! } xhr.onerror = function() { throw new XHRError(); // try again; error after too many failures } xhr.onload = function() { if (this.status >= 200 && this.status <= 299) { /* success! */ } else { throw new HTTPError(this.status); } } xhr.send(data);
  35. 35. ICONS & LAUNCH SCREENS • PATHS ARE RELATIVE TO CONFIG.XML • USE MODERN <SPLASH> AND <ICON> TAGS • MAKE SURE THE IMAGE IS SAME SIZE AS SPECIFIED IN CONFIG.XML • KEEP LAUNCH SCREEN SIMPLE
  36. 36. PERCEIVED AS SLOW • 300MS DELAY **SIGH** • JANKY ANIMATIONS • PROFILE!
  37. 37. BAN SLOW INTERACTIONS • FAST CLICK OR GESTURE LIBRARY (1, 2) • AFFORDANCES • DELAY WORK UNTIL AFTER ANIMATIONS
  38. 38. PROFILE • TRACK MEMORY, FRAMES, EXECUTION TIME • CHROME / SAFARI + INSTRUMENTS • SCREEN RECORDING
  39. 39. PERFORMANCE MATTERS Quantifiable Performance
 Bruce Lefebvre 11:20am
  40. 40. DESIGN RESPONSIVELY • HTML IS ALREADY RESPONSIVE • RESPONSIVE UNITS (%, REM, VIEWPORT UNITS:VH,VW,VMAX,VMIN) • MEDIA QUERIES & DEVICE PLUGIN • FLEXBOX LAYOUT
  41. 41. iPhone iPad (landscape)
  42. 42. MOBILE IS QUIRKY • MOBILE WEB IS QUIRKY • ACCEPT DEVICE & PLATFORM- SPECIFIC WORKAROUNDS • DEVICE PLUGIN • CROSSWALK • WKWEBVIEW
  43. 43. My finger is actually here Touch is registered here iOS UIWebView Scroll Offset Bug
  44. 44. # iOS 9 (UIWebView on iOS 8) $ cordova plugin add cordova-plugin-wkwebview-engine --save # iOS 8 & 9 $ cordova plugin add https://github.com/apache/cordova- plugins.git#master:wkwebview-engine-localhost —save # Then, edit config.xml <platform name="ios"> <content src="http://localhost:49000"/> </platform> # Android $ cordova plugin add cordova-plugin-crosswalk-webview --save
  45. 45. MANAGE THE KEYBOARD Handling the keyboard in hybrid applications
 Tim Lancina 10:15am
  46. 46. THANK YOU! @photokandy www.photokandy.com

×