• Like
Mobile web application
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Mobile web application

  • 229 views
Published

 

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
229
On SlideShare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
7
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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?
  • 19. Suggestion to Users • Use Chrome or Firefox or …
  • 20. So...
  • 21. Issues So...
  • 22. Issues • No repaint • Ghost Click • Toggle location bar will not trigger resize • preventDefault not work on touch event • HTML5 Video
  • 23. Repaint • To save power, browser will reduce repaint • It predicts best timing for repaint, what to repaint • Prediction might fail
  • 24. If Not Repaint • Things will disappear, in wrong position...etc
  • 25. Force Repaint • Access some attribute related to layout • ex: offsetHeight
  • 26. Ghost Click • Mobile device don’t have real ‘click’ event • Simulate ‘click’ using touch events • ‘click’ has 300ms delay after ‘touchend’

  • 27. Avoid Lag • Use ‘touchend’ • tap.js
 https://github.com/alexgibson/tap.js • fastbutton
 https://developers.google.com/mobile/ articles/fast_buttons
  • 28. But.. • Android Browser • Trigger simulated click on wrong element
  • 29. Demo
  • 30. Location Bar • 3 states in Android Browser • show • hide • pinned
  • 31. Location Bar • 3 states in Android Browser • show • hide • pinned
  • 32. 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
  • 33. Fix • Time Interval to check window size change • 200ms interval will cause video not play • Manuel trigger resize handler when window size might change
  • 34. preventDefault • Can used to prevent user scroll web page • Not work on HTC browser • Not a bug, its spec...
  • 35. HTML5 Video • Loop not work • Play event not reliable • Duration update issue • iPhone, iPod have different implementation
  • 36. Loop • Video loop not work on all mobile browser • But you can call `play()` on ‘ended’ event
  • 37. Video Bugs • ‘play’, ‘playing’ event not reliable • Duration have default value • Won't stop when buffer ready even if `pause()` were called
  • 38. MOPCON 2013
  • 39. pause() not work play playing download buffer buffer ready, play play() pause()
  • 40. RobustVideo • A video wrapper to fix issues above • https://github.com/othree/robust-video
  • 41. iPhone • Open native player to play HTML5 video
  • 42. iPhone • Open native player to play HTML5 video
  • 43. Limitation • Video needs visible to be able to play • Poster will not used to render in web page • No video event is available
  • 44. Limitation • Video needs visible to be able to play • Poster will not used to render in web page • No video event is available
  • 45. Tip • Video element outside of window • Tap img(poster) to trigger `video.play()`
  • 46. Tip <video> <img> • Video element outside of window • Tap img(poster) to trigger `video.play()`
  • 47. 呼...
  • 48. Next Time PM Says “We are going to support mobile browsers”
  • 49. We Say “Well, it takes x times longer to do it.”
  • 50. We Say Mobile Debugging
 “Well, it takes x times longer to do it.” How to
  • 51. Browsers • Safari • Chrome • Firefox/Opera • Android Browser
  • 52. Safari • Enable Debug • Connect iDevice to your Mac • Open Safari https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/DebuggingSafarioniPhoneContent/DebuggingSafarioniPhoneContent.html
  • 53. 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
  • 54. Firefox • https://hacks.mozilla.org/2012/08/remotedebugging-on-firefox-for-android/
  • 55. Android Browser • Weinre http://people.apache.org/~pmuellr/weinre/ docs/latest/

  • 56. Q Demo
  • 57. Thanks