Mobile Web Application ⽢甘苦談

othree @ MOPCON 2013

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

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 IE

Survey

What browser you use on smartphone?

What browser you use on smartphone?

b) You install browser by yourself

a) Default browser from your phone

Android Browser

Android Browser

• No updates anymore

• Google use Chrome as new default

• Still exists: HTC, Samsung Galaxy S3

Mozilla Summit 2013

• Have bugs, issues

S4 Chrome?

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 to repaint

• 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.jshttps://github.com/alexgibson/tap.js

• fastbuttonhttps://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

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: No

http://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 window size 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 work

play()

download buffer

pause()

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

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

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()`

Tip

• Video element outside of window

• Tap img(poster) to trigger `video.play()`

<video>

<img>

呼...

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 DebuggingHow to

Browsers

• Safari

• Chrome

• Firefox/Opera

• Android Browser

Safari

• Enable Debug

• Connect iDevice to your Mac

• Open Safari

https://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/Mac

https://developers.google.com/chrome-developer-tools/docs/remote-debugging

Firefox

• https://hacks.mozilla.org/2012/08/remote-debugging-on-firefox-for-android/

Android Browser

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

DemoQ

Thanks