Mobile Web Application 甘苦談

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