Mobile Web Application 甘苦談

C4ce16f549c450f4759eb37f5d5d1a63?s=47 othree
October 27, 2013

Mobile Web Application 甘苦談

C4ce16f549c450f4759eb37f5d5d1a63?s=128

othree

October 27, 2013
Tweet

Transcript

  1. Mobile Web Application ⽢甘苦談 othree @ MOPCON 2013

  2. me • @othree • MozTW member • PhD Candidate of

    civil engineering • F2E at HTC • https://blog.othree.net/
  3. • Front End related • Experience sharing • No code

    listing
  4. Why Mobile • We are HTC....

  5. Mozilla Summit 2013

  6. Mozilla Summit 2013

  7. PM Says “We are going to support mobile browsers”

  8. What We Thought • Web Standards rule the web •

    Not big problem
  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. 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 Survey
  11. What browser you use on smartphone?

  12. What browser you use on smartphone? b) You install browser

    by yourself a) Default browser from your phone
  13. Android Browser

  14. Android Browser • No updates anymore • Google use Chrome

    as new default • Still exists: HTC, Samsung Galaxy S3
  15. Mozilla Summit 2013

  16. • Have bugs, issues

  17. S4 Chrome?

  18. S4 Chrome?

  19. None
  20. Suggestion to Users • Use Chrome or Firefox or …

  21. So...

  22. So... Issues

  23. Issues • No repaint • Ghost Click • Toggle location

    bar will not trigger resize • preventDefault not work on touch event • HTML5 Video
  24. Repaint • To save power, browser will reduce repaint •

    It predicts best timing for repaint, what to repaint • Prediction might fail
  25. If Not Repaint • Things will disappear, in wrong position...etc

  26. Force Repaint • Access some attribute related to layout •

    ex: offsetHeight
  27. Ghost Click • Mobile device don’t have real ‘click’ event

    • Simulate ‘click’ using touch events • ‘click’ has 300ms delay after ‘touchend’

  28. Avoid Lag • Use ‘touchend’ • tap.js
 https://github.com/alexgibson/tap.js • fastbutton


    https://developers.google.com/mobile/ articles/fast_buttons
  29. But.. • Android Browser • Trigger simulated click on wrong

    element
  30. Demo

  31. Location Bar • 3 states in Android Browser • show

    • hide • pinned
  32. Location Bar • 3 states in Android Browser • show

    • hide • pinned
  33. None
  34. None
  35. None
  36. 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
  37. Fix • Time Interval to check window size change •

    200ms interval will cause video not play • Manuel trigger resize handler when window size might change
  38. preventDefault • Can used to prevent user scroll web page

    • Not work on HTC browser • Not a bug, its spec...
  39. HTML5 Video • Loop not work • Play event not

    reliable • Duration update issue • iPhone, iPod have different implementation
  40. Loop • Video loop not work on all mobile browser

    • But you can call `play()` on ‘ended’ event
  41. Video Bugs • ‘play’, ‘playing’ event not reliable • Duration

    have default value • Won't stop when buffer ready even if `pause()` were called
  42. MOPCON 2013

  43. pause() not work play() download buffer pause() buffer ready, play

    playing play
  44. RobustVideo • A video wrapper to fix issues above •

    https://github.com/othree/robust-video
  45. iPhone • Open native player to play HTML5 video

  46. iPhone • Open native player to play HTML5 video

  47. None
  48. None
  49. Limitation • Video needs visible to be able to play

    • Poster will not used to render in web page • No video event is available
  50. Limitation • Video needs visible to be able to play

    • Poster will not used to render in web page • No video event is available
  51. Tip • Video element outside of window • Tap img(poster)

    to trigger `video.play()`
  52. Tip • Video element outside of window • Tap img(poster)

    to trigger `video.play()` <video> <img>
  53. 呼...

  54. Next Time PM Says “We are going to support mobile

    browsers”
  55. We Say “Well, it takes x times longer to do

    it.”
  56. We Say “Well, it takes x times longer to do

    it.” Mobile Debugging
 How to
  57. Browsers • Safari • Chrome • Firefox/Opera • Android Browser

  58. Safari • Enable Debug • Connect iDevice to your Mac

    • Open Safari https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/DebuggingSafarioniPhoneContent/DebuggingSafarioniPhoneContent.html
  59. 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
  60. None
  61. Firefox • https://hacks.mozilla.org/2012/08/remote- debugging-on-firefox-for-android/

  62. Android Browser • Weinre http://people.apache.org/~pmuellr/weinre/ docs/latest/


  63. None
  64. None
  65. None
  66. None
  67. None
  68. Demo Q

  69. Thanks