$30 off During Our Annual Pro Sale. View Details »

Mobile Web Application 甘苦談

othree
October 27, 2013

Mobile Web Application 甘苦談

othree

October 27, 2013
Tweet

More Decks by othree

Other Decks in Technology

Transcript

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

    View Slide

  2. me
    • @othree

    • MozTW member

    • PhD Candidate of civil engineering

    • F2E at HTC

    • https://blog.othree.net/

    View Slide

  3. • Front End related

    • Experience sharing

    • No code listing

    View Slide

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

    View Slide

  5. Mozilla Summit 2013

    View Slide

  6. Mozilla Summit 2013

    View Slide

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

    View Slide

  8. What We Thought
    • Web Standards rule the web

    • Not big problem

    View Slide

  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

    View Slide

  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

    View Slide

  11. What browser you use
    on smartphone?

    View Slide

  12. What browser you use
    on smartphone?
    b) You install browser by
    yourself
    a) Default browser from
    your phone

    View Slide

  13. Android Browser

    View Slide

  14. Android Browser
    • No updates anymore

    • Google use Chrome as new default

    • Still exists: HTC, Samsung Galaxy S3

    View Slide

  15. Mozilla Summit 2013

    View Slide

  16. • Have bugs, issues

    View Slide

  17. S4 Chrome?

    View Slide

  18. S4 Chrome?

    View Slide

  19. View Slide

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

    View Slide

  21. So...

    View Slide

  22. So...
    Issues

    View Slide

  23. Issues
    • No repaint

    • Ghost Click

    • Toggle location bar will not trigger resize

    • preventDefault not work on touch event

    • HTML5 Video

    View Slide

  24. Repaint
    • To save power, browser will reduce repaint

    • It predicts best timing for repaint, what to
    repaint

    • Prediction might fail

    View Slide

  25. If Not Repaint
    • Things will disappear, in wrong position...etc

    View Slide

  26. Force Repaint
    • Access some attribute related to layout

    • ex: offsetHeight

    View Slide

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

    • Simulate ‘click’ using touch events

    • ‘click’ has 300ms delay after ‘touchend’


    View Slide

  28. Avoid Lag
    • Use ‘touchend’

    • tap.js

    https://github.com/alexgibson/tap.js

    • fastbutton

    https://developers.google.com/mobile/
    articles/fast_buttons

    View Slide

  29. But..
    • Android Browser

    • Trigger simulated click on wrong element

    View Slide

  30. Demo

    View Slide

  31. Location Bar
    • 3 states in Android Browser

    • show

    • hide

    • pinned

    View Slide

  32. Location Bar
    • 3 states in Android Browser

    • show

    • hide

    • pinned

    View Slide

  33. View Slide

  34. View Slide

  35. View Slide

  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

    View Slide

  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

    View Slide

  38. preventDefault
    • Can used to prevent user scroll web page

    • Not work on HTC browser

    • Not a bug, its spec...

    View Slide

  39. HTML5 Video
    • Loop not work

    • Play event not reliable

    • Duration update issue

    • iPhone, iPod have different implementation

    View Slide

  40. Loop
    • Video loop not work on all mobile browser

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

    View Slide

  41. Video Bugs
    • ‘play’, ‘playing’ event not reliable

    • Duration have default value

    • Won't stop when buffer ready even if
    `pause()` were called

    View Slide

  42. MOPCON 2013

    View Slide

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

    View Slide

  44. RobustVideo
    • A video wrapper to fix issues above

    • https://github.com/othree/robust-video

    View Slide

  45. iPhone
    • Open native player to play HTML5 video

    View Slide

  46. iPhone
    • Open native player to play HTML5 video

    View Slide

  47. View Slide

  48. View Slide

  49. Limitation
    • Video needs visible to be able to play

    • Poster will not used to render in web page

    • No video event is available

    View Slide

  50. Limitation
    • Video needs visible to be able to play

    • Poster will not used to render in web page

    • No video event is available

    View Slide

  51. Tip
    • Video element outside of window

    • Tap img(poster) to trigger `video.play()`

    View Slide

  52. Tip
    • Video element outside of window

    • Tap img(poster) to trigger `video.play()`


    View Slide

  53. 呼...

    View Slide

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

    View Slide

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

    View Slide

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

    How to

    View Slide

  57. Browsers
    • Safari

    • Chrome

    • Firefox/Opera

    • Android Browser

    View Slide

  58. Safari
    • Enable Debug

    • Connect iDevice to your Mac

    • Open Safari
    https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/DebuggingSafarioniPhoneContent/DebuggingSafarioniPhoneContent.html

    View Slide

  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

    View Slide

  60. View Slide

  61. Firefox
    • https://hacks.mozilla.org/2012/08/remote-
    debugging-on-firefox-for-android/

    View Slide

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


    View Slide

  63. View Slide

  64. View Slide

  65. View Slide

  66. View Slide

  67. View Slide

  68. Demo
    Q

    View Slide

  69. Thanks

    View Slide