Mobile web application

663 views

Published on

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
663
On SlideShare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
14
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Mobile web application

  1. 1. Mobile Web Application ⽢甘苦談 othree @ MOPCON 2013
  2. 2. me • @othree • MozTW member • PhD Candidate of civil engineering • F2E at HTC • https://blog.othree.net/
  3. 3. • Front End related • Experience sharing • No code listing
  4. 4. Why Mobile • We are HTC....
  5. 5. Mozilla Summit 2013
  6. 6. Mozilla Summit 2013
  7. 7. PM Says “We are going to support mobile browsers”
  8. 8. What We Thought • Web Standards rule the web • Not big problem
  9. 9. Reality • Browser have bugs • Standard implementation not the same • Ambiguous standards • Hard to debug on some browser • Any issue might be new, not like IE
  10. 10. Reality • Browser have bugs • Standard implementation not the same Survey • Ambiguous standards • Hard to debug on some browser • Any issue might be new, not like IE
  11. 11. What browser you use on smartphone?
  12. 12. What browser youbrowser by b) You install use yourself on smartphone? a) Default browser from your phone
  13. 13. Android Browser
  14. 14. Android Browser • No updates anymore • Google use Chrome as new default • Still exists: HTC, Samsung Galaxy S3
  15. 15. Mozilla Summit 2013
  16. 16. • Have bugs, issues
  17. 17. S4 Chrome?
  18. 18. S4 Chrome?
  19. 19. Suggestion to Users • Use Chrome or Firefox or …
  20. 20. So...
  21. 21. Issues So...
  22. 22. Issues • No repaint • Ghost Click • Toggle location bar will not trigger resize • preventDefault not work on touch event • HTML5 Video
  23. 23. Repaint • To save power, browser will reduce repaint • It predicts best timing for repaint, what to repaint • Prediction might fail
  24. 24. If Not Repaint • Things will disappear, in wrong position...etc
  25. 25. Force Repaint • Access some attribute related to layout • ex: offsetHeight
  26. 26. Ghost Click • Mobile device don’t have real ‘click’ event • Simulate ‘click’ using touch events • ‘click’ has 300ms delay after ‘touchend’

  27. 27. Avoid Lag • Use ‘touchend’ • tap.js
 https://github.com/alexgibson/tap.js • fastbutton
 https://developers.google.com/mobile/ articles/fast_buttons
  28. 28. But.. • Android Browser • Trigger simulated click on wrong element
  29. 29. Demo
  30. 30. Location Bar • 3 states in Android Browser • show • hide • pinned
  31. 31. Location Bar • 3 states in Android Browser • show • hide • pinned
  32. 32. What’s the Deal • Window size changes • Trigger ‘resize’ event? • Android 2:Yes • Android 3: No http://www.quirksmode.org/dom/events/resize_mobile.html
  33. 33. Fix • Time Interval to check window size change • 200ms interval will cause video not play • Manuel trigger resize handler when window size might change
  34. 34. preventDefault • Can used to prevent user scroll web page • Not work on HTC browser • Not a bug, its spec...
  35. 35. HTML5 Video • Loop not work • Play event not reliable • Duration update issue • iPhone, iPod have different implementation
  36. 36. Loop • Video loop not work on all mobile browser • But you can call `play()` on ‘ended’ event
  37. 37. Video Bugs • ‘play’, ‘playing’ event not reliable • Duration have default value • Won't stop when buffer ready even if `pause()` were called
  38. 38. MOPCON 2013
  39. 39. pause() not work play playing download buffer buffer ready, play play() pause()
  40. 40. RobustVideo • A video wrapper to fix issues above • https://github.com/othree/robust-video
  41. 41. iPhone • Open native player to play HTML5 video
  42. 42. iPhone • Open native player to play HTML5 video
  43. 43. Limitation • Video needs visible to be able to play • Poster will not used to render in web page • No video event is available
  44. 44. Limitation • Video needs visible to be able to play • Poster will not used to render in web page • No video event is available
  45. 45. Tip • Video element outside of window • Tap img(poster) to trigger `video.play()`
  46. 46. Tip <video> <img> • Video element outside of window • Tap img(poster) to trigger `video.play()`
  47. 47. 呼...
  48. 48. Next Time PM Says “We are going to support mobile browsers”
  49. 49. We Say “Well, it takes x times longer to do it.”
  50. 50. We Say Mobile Debugging
 “Well, it takes x times longer to do it.” How to
  51. 51. Browsers • Safari • Chrome • Firefox/Opera • Android Browser
  52. 52. Safari • Enable Debug • Connect iDevice to your Mac • Open Safari https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/DebuggingSafarioniPhoneContent/DebuggingSafarioniPhoneContent.html
  53. 53. Chrome • Install the ADB Chrome extension • Install driver of your device • Enable Debug • Connect device to PC/Mac https://developers.google.com/chrome-developer-tools/docs/remote-debugging
  54. 54. Firefox • https://hacks.mozilla.org/2012/08/remotedebugging-on-firefox-for-android/
  55. 55. Android Browser • Weinre http://people.apache.org/~pmuellr/weinre/ docs/latest/

  56. 56. Q Demo
  57. 57. Thanks

×