Mobile Web Application⽢甘苦談othree @ MOPCON 2013
View Slide
me• @othree • MozTW member • PhD Candidate of civil engineering • F2E at HTC • https://blog.othree.net/
• Front End related • Experience sharing • No code listing
Why Mobile• We are HTC....
Mozilla Summit 2013
PM Says“We are going to support mobile browsers”
What We Thought• Web Standards rule the web • Not big problem
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
Reality• Browser have bugs • Standard implementation not the same • Ambiguous standards • Hard to debug on some browser • Any issue might be new, not like IESurvey
What browser you useon smartphone?
What browser you useon smartphone?b) You install browser byyourselfa) Default browser fromyour phone
Android Browser
Android Browser• No updates anymore • Google use Chrome as new default • Still exists: HTC, Samsung Galaxy S3
• Have bugs, issues
S4 Chrome?
Suggestion to Users• Use Chrome or Firefox or …
So...
So...Issues
Issues• No repaint • Ghost Click • Toggle location bar will not trigger resize • preventDefault not work on touch event • HTML5 Video
Repaint• To save power, browser will reduce repaint • It predicts best timing for repaint, what torepaint • Prediction might fail
If Not Repaint• Things will disappear, in wrong position...etc
Force Repaint• Access some attribute related to layout • ex: offsetHeight
Ghost Click• Mobile device don’t have real ‘click’ event • Simulate ‘click’ using touch events • ‘click’ has 300ms delay after ‘touchend’
Avoid Lag• Use ‘touchend’ • tap.js https://github.com/alexgibson/tap.js • fastbutton https://developers.google.com/mobile/articles/fast_buttons
But..• Android Browser • Trigger simulated click on wrong element
Demo
Location Bar• 3 states in Android Browser • show • hide • pinned
What’s the Deal• Window size changes • Trigger ‘resize’ event? • Android 2: Yes • Android 3: Nohttp://www.quirksmode.org/dom/events/resize_mobile.html
Fix• Time Interval to check window size change • 200ms interval will cause video not play • Manuel trigger resize handler when windowsize might change
preventDefault• Can used to prevent user scroll web page • Not work on HTC browser • Not a bug, its spec...
HTML5 Video• Loop not work • Play event not reliable • Duration update issue • iPhone, iPod have different implementation
Loop• Video loop not work on all mobile browser • But you can call `play()` on ‘ended’ event
Video Bugs• ‘play’, ‘playing’ event not reliable • Duration have default value • Won't stop when buffer ready even if`pause()` were called
MOPCON 2013
pause() not workplay()download bufferpause()buffer ready, playplayingplay
RobustVideo• A video wrapper to fix issues above • https://github.com/othree/robust-video
iPhone• Open native player to play HTML5 video
Limitation• Video needs visible to be able to play • Poster will not used to render in web page • No video event is available
Tip• Video element outside of window • Tap img(poster) to trigger `video.play()`
呼...
Next Time PM Says“We are going to support mobile browsers”
We Say“Well, it takes x times longer to do it.”
We Say“Well, it takes x times longer to do it.”Mobile Debugging How to
Browsers• Safari • Chrome • Firefox/Opera • Android Browser
Safari• Enable Debug • Connect iDevice to your Mac • Open Safarihttps://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/DebuggingSafarioniPhoneContent/DebuggingSafarioniPhoneContent.html
Chrome• Install the ADB Chrome extension • Install driver of your device • Enable Debug • Connect device to PC/Machttps://developers.google.com/chrome-developer-tools/docs/remote-debugging
Firefox• https://hacks.mozilla.org/2012/08/remote-debugging-on-firefox-for-android/
Android Browser• Weinrehttp://people.apache.org/~pmuellr/weinre/docs/latest/
DemoQ
Thanks