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
Survey
• Ambiguous standards
• Hard to debug on some browser
• Any issue might be new, not like IE

11. What browser you use
on smartphone?

12. What browser youbrowser by
b) You install use
yourself
on smartphone?
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?

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

21. So...

22. Issues
So...

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

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
playing
download buffer
buffer ready, play
play()
pause()

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

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>
<img>
• Video element outside of window
• Tap img(poster) to trigger `video.play()`

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
Mobile Debugging
“Well, it takes x times longer to do it.”
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

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

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

68. Q
Demo

69. Thanks