Mobile web application
3 likes906 views
This document discusses challenges in developing mobile web applications. It summarizes issues encountered like lack of repainting, ghost clicks, and HTML5 video bugs across different mobile browsers. It also provides suggestions for debugging mobile browsers like enabling debugging in Safari, using the ADB Chrome extension, and Weinre for the Android Browser. Mobile development requires extra effort to account for variations in browser standards implementation and behavior.
More Related Content
What's hot (20)
Viewers also liked (6)
Similar to Mobile web application (20)
More from 偉格 高 (7)
Recently uploaded (20)
Mobile web application
- 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....
- 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
- 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
- 68. Q Demo
- 69. Thanks