Mobile Web Application 甘苦談

C4ce16f549c450f4759eb37f5d5d1a63?s=47 othree
October 27, 2013

Mobile Web Application 甘苦談

C4ce16f549c450f4759eb37f5d5d1a63?s=128

othree

October 27, 2013
Tweet

Transcript

  1. 2.

    me • @othree • MozTW member • PhD Candidate of

    civil engineering • F2E at HTC • https://blog.othree.net/
  2. 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
  3. 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
  4. 12.

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

    by yourself a) Default browser from your phone
  5. 14.

    Android Browser • No updates anymore • Google use Chrome

    as new default • Still exists: HTC, Samsung Galaxy S3
  6. 19.
  7. 21.
  8. 23.

    Issues • No repaint • Ghost Click • Toggle location

    bar will not trigger resize • preventDefault not work on touch event • HTML5 Video
  9. 24.

    Repaint • To save power, browser will reduce repaint •

    It predicts best timing for repaint, what to repaint • Prediction might fail
  10. 27.

    Ghost Click • Mobile device don’t have real ‘click’ event

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

  11. 30.
  12. 33.
  13. 34.
  14. 35.
  15. 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
  16. 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
  17. 38.

    preventDefault • Can used to prevent user scroll web page

    • Not work on HTC browser • Not a bug, its spec...
  18. 39.

    HTML5 Video • Loop not work • Play event not

    reliable • Duration update issue • iPhone, iPod have different implementation
  19. 40.

    Loop • Video loop not work on all mobile browser

    • But you can call `play()` on ‘ended’ event
  20. 41.

    Video Bugs • ‘play’, ‘playing’ event not reliable • Duration

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

    RobustVideo • A video wrapper to fix issues above •

    https://github.com/othree/robust-video
  22. 47.
  23. 48.
  24. 49.

    Limitation • Video needs visible to be able to play

    • Poster will not used to render in web page • No video event is available
  25. 50.

    Limitation • Video needs visible to be able to play

    • Poster will not used to render in web page • No video event is available
  26. 52.

    Tip • Video element outside of window • Tap img(poster)

    to trigger `video.play()` <video> <img>
  27. 53.
  28. 56.

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

    it.” Mobile Debugging
 How to
  29. 58.

    Safari • Enable Debug • Connect iDevice to your Mac

    • Open Safari https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/DebuggingSafarioniPhoneContent/DebuggingSafarioniPhoneContent.html
  30. 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
  31. 60.
  32. 63.
  33. 64.
  34. 65.
  35. 66.
  36. 67.
  37. 68.
  38. 69.