際際滷

際際滷Share a Scribd company logo

Common PhoneGap Gotchas (#PGDay EU 2016)

Kerri Shotts
Kerri Shotts

際際滷s 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!

1 of 47
Downloaded 10 times
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 TREATING PHONEGAP AS A BROWSER / SERVER MISUNDERSTANDING PHONEGAP TOOLS DATA STORAGE RESPONSIVE DESIGN SLOW DIDN'T EXPECT PLATFORM QUIRKS *NOT SCIENTIFICALLY DETERMINED
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
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 ≒≒ 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
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 etc. PhoneGap JS function consol } CSS nav { dispp z-ind } HTML <nav id= <a hr </nav> SQLite Indexed DB
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
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
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 Bene鍖ts 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 dif鍖culties Only core + select plugins lots of edge cases not present in built apps Connection dif鍖culties Different project structure PGB vs NPM plugin repo
PUT A PIN IN IT
Platform $ cordova platform add ios@4.1.0 --save (con鍖g.xml) <engine name="ios" spec="4.1.0" /> Plugins $ cordova plugin add cordova-plugin-device@1.1.1 --save (con鍖g.xml) <plugin name = "cordova-plugin-device" spec = "1.1.1" /> PhoneGap Build CLI Version <preference name = "phonegap-version" value = "cli-6.0.0"/>
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
DATA STORAGE LOCALSTORAGE IS TEMPTING, BUT A POOR CHOICE SYNC IS A BIG QUESTION (COUCHDB & POUCHDB) USE THE BEST STORAGE OPTION FOR THE DATA
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 speci鍖c platform speci鍖c 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 鍖le systems Deprecated Bugged on iOS (buggy鍖ll) Keep result set small! Not good for lots of data Not good for lots of data
DON'T STORE SENSITIVE INFORMATION
YOUR USER'S DATA AND PRIVACY ARE PRICELESS
ALWAYS USE HTTPS
Common PhoneGap Gotchas (#PGDay EU 2016)
DON'T TRUST YOUR DATA VALIDATE EVERYWHERE DOM INJECTION SQL INJECTION
// 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
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="*" /> <!-- NOT SECURE --> Top-level Navigation (location .href) <allow-navigation href="https://*.example.com/*" /> $ cordova plugin add cordova-plugin-whitelist --save
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.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:;"/>
'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)
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(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);
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
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 Quanti鍖able Performance Bruce Lefebvre 11:20am
DESIGN RESPONSIVELY HTML IS ALREADY RESPONSIVE RESPONSIVE UNITS (%, REM, VIEWPORT UNITS:VH,VW,VMAX,VMIN) MEDIA QUERIES & DEVICE PLUGIN FLEXBOX LAYOUT
iPhone iPad (landscape)
MOBILE IS QUIRKY MOBILE WEB IS QUIRKY ACCEPT DEVICE & PLATFORM- SPECIFIC WORKAROUNDS DEVICE PLUGIN CROSSWALK WKWEBVIEW
My 鍖nger 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 https://github.com/apache/cordova- plugins.git#master:wkwebview-engine-localhost save # Then, edit config.xml <platform name="ios"> <content src=/slideshow/common-phonegap-gotchas-pgday-eu-2016/62176572/"http:/localhost:49000"/> </platform> # Android $ cordova plugin add cordova-plugin-crosswalk-webview --save
MANAGE THE KEYBOARD Handling the keyboard in hybrid applications Tim Lancina 10:15am
THANK YOU! @photokandy www.photokandy.com

More Related Content

Common PhoneGap Gotchas (#PGDay EU 2016)

  • 1. COMMON PHONEGAP GOTCHAS PHONEGAP DAY EU 2016 YankoPayanko (pixabay)
  • 2. HELLO! MY NAME IS KERRI Photo by Bill Bertram
  • 3. PURPOSE IDENTIFY PAIN POINTS LEARN THE "EASY" WAY HAPPIER USERS KEEP BRAIN CELLS
  • 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. 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. NOT A BROWSER DON'T WRAP A WEBSITE KEEP CODE LOCAL
  • 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. SINGLE PAGE APP (SPA) DYNAMIC DOM EASIER ANIMATION EASIER APP STATE FASTER
  • 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. 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 Bene鍖ts 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 dif鍖culties Only core + select plugins lots of edge cases not present in built apps Connection dif鍖culties Different project structure PGB vs NPM plugin repo
  • 15. PUT A PIN IN IT
  • 16. Platform $ cordova platform add ios@4.1.0 --save (con鍖g.xml) <engine name="ios" spec="4.1.0" /> Plugins $ cordova plugin add cordova-plugin-device@1.1.1 --save (con鍖g.xml) <plugin name = "cordova-plugin-device" spec = "1.1.1" /> PhoneGap Build CLI Version <preference name = "phonegap-version" value = "cli-6.0.0"/>
  • 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. 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. localStorage WHAT IS IT GOOD FOR?NOT MUCH
  • 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 speci鍖c platform speci鍖c 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 鍖le systems Deprecated Bugged on iOS (buggy鍖ll) Keep result set small! Not good for lots of data Not good for lots of data
  • 22. YOUR USER'S DATA AND PRIVACY ARE PRICELESS
  • 25. DON'T TRUST YOUR DATA VALIDATE EVERYWHERE DOM INJECTION SQL INJECTION
  • 26. // 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
  • 27. NETWORK CONNECTIVITY LOTS OF MISUNDERSTANDING ABOUT WHITELIST AND CONTENT-SECURITY- POLICY
  • 29. 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
  • 30. CSP META TAG TIGHTEN AS MUCH AS POSSIBLE DEV WILL BE MORE PERMISSIVE
  • 31. <!-- 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:;"/>
  • 32. '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)
  • 33. CROSS-ORIGIN RESOURCE SHARING (CORS) SERVER-SIDE REQUIRED FOR WKWEBVIEW, PHONEGAP SERVE, AND BROWSER
  • 35. 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);
  • 36. 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
  • 37. PERCEIVED AS SLOW 300MS DELAY **SIGH** JANKY ANIMATIONS PROFILE!
  • 38. BAN SLOW INTERACTIONS FAST CLICK OR GESTURE LIBRARY (1, 2) AFFORDANCES DELAY WORK UNTIL AFTER ANIMATIONS
  • 39. PROFILE TRACK MEMORY, FRAMES, EXECUTION TIME CHROME / SAFARI + INSTRUMENTS SCREEN RECORDING
  • 41. DESIGN RESPONSIVELY HTML IS ALREADY RESPONSIVE RESPONSIVE UNITS (%, REM, VIEWPORT UNITS:VH,VW,VMAX,VMIN) MEDIA QUERIES & DEVICE PLUGIN FLEXBOX LAYOUT
  • 43. MOBILE IS QUIRKY MOBILE WEB IS QUIRKY ACCEPT DEVICE & PLATFORM- SPECIFIC WORKAROUNDS DEVICE PLUGIN CROSSWALK WKWEBVIEW
  • 44. My 鍖nger is actually here Touch is registered here iOS UIWebView Scroll Offset Bug
  • 45. # 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=/slideshow/common-phonegap-gotchas-pgday-eu-2016/62176572/"http:/localhost:49000"/> </platform> # Android $ cordova plugin add cordova-plugin-crosswalk-webview --save
  • 46. MANAGE THE KEYBOARD Handling the keyboard in hybrid applications Tim Lancina 10:15am