Mobile Web Application 甘苦談

by othree

Slide 1

Slide 1 text

Mobile Web Application ⽢甘苦談 othree @ MOPCON 2013

Slide 2

Slide 2 text

me • @othree • MozTW member • PhD Candidate of civil engineering • F2E at HTC • https://blog.othree.net/

Slide 3

Slide 3 text

• Front End related • Experience sharing • No code listing

Slide 4

Slide 4 text

Why Mobile • We are HTC....

Slide 5

Slide 5 text

Mozilla Summit 2013

Slide 6

Slide 6 text

Mozilla Summit 2013

Slide 7

Slide 7 text

PM Says “We are going to support mobile browsers”

Slide 8

Slide 8 text

What We Thought • Web Standards rule the web • Not big problem

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

What browser you use on smartphone?

Slide 12

Slide 12 text

What browser you use on smartphone? b) You install browser by yourself a) Default browser from your phone

Slide 13

Slide 13 text

Android Browser

Slide 14

Slide 14 text

Android Browser • No updates anymore • Google use Chrome as new default • Still exists: HTC, Samsung Galaxy S3

Slide 15

Slide 15 text

Mozilla Summit 2013

Slide 16

Slide 16 text

• Have bugs, issues

Slide 17

Slide 17 text

S4 Chrome?

Slide 18

Slide 18 text

S4 Chrome?

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

Suggestion to Users • Use Chrome or Firefox or …

Slide 21

Slide 21 text

So...

Slide 22

Slide 22 text

So... Issues

Slide 23

Slide 23 text

Issues • No repaint • Ghost Click • Toggle location bar will not trigger resize • preventDefault not work on touch event • HTML5 Video

Slide 24

Slide 24 text

Repaint • To save power, browser will reduce repaint • It predicts best timing for repaint, what to repaint • Prediction might fail

Slide 25

Slide 25 text

If Not Repaint • Things will disappear, in wrong position...etc

Slide 26

Slide 26 text

Force Repaint • Access some attribute related to layout • ex: offsetHeight

Slide 27

Slide 27 text

Ghost Click • Mobile device don’t have real ‘click’ event • Simulate ‘click’ using touch events • ‘click’ has 300ms delay after ‘touchend’ 

Slide 28

Slide 28 text

Avoid Lag • Use ‘touchend’ • tap.js  https://github.com/alexgibson/tap.js • fastbutton  https://developers.google.com/mobile/ articles/fast_buttons

Slide 29

Slide 29 text

But.. • Android Browser • Trigger simulated click on wrong element

Slide 30

Slide 30 text

Demo

Slide 31

Slide 31 text

Location Bar • 3 states in Android Browser • show • hide • pinned

Slide 32

Slide 32 text

Location Bar • 3 states in Android Browser • show • hide • pinned

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

Fix • Time Interval to check window size change • 200ms interval will cause video not play • Manuel trigger resize handler when window size might change

Slide 38

Slide 38 text

preventDefault • Can used to prevent user scroll web page • Not work on HTC browser • Not a bug, its spec...

Slide 39

Slide 39 text

HTML5 Video • Loop not work • Play event not reliable • Duration update issue • iPhone, iPod have different implementation

Slide 40

Slide 40 text

Loop • Video loop not work on all mobile browser • But you can call `play()` on ‘ended’ event

Slide 41

Slide 41 text

Video Bugs • ‘play’, ‘playing’ event not reliable • Duration have default value • Won't stop when buffer ready even if `pause()` were called

Slide 42

Slide 42 text

MOPCON 2013

Slide 43

Slide 43 text

pause() not work play() download buffer pause() buffer ready, play playing play

Slide 44

Slide 44 text

RobustVideo • A video wrapper to ﬁx issues above • https://github.com/othree/robust-video

Slide 45

Slide 45 text

iPhone • Open native player to play HTML5 video

Slide 46

Slide 46 text

iPhone • Open native player to play HTML5 video

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

Limitation • Video needs visible to be able to play • Poster will not used to render in web page • No video event is available

Slide 50

Slide 50 text

Limitation • Video needs visible to be able to play • Poster will not used to render in web page • No video event is available

Slide 51

Slide 51 text

Tip • Video element outside of window • Tap img(poster) to trigger `video.play()`

Slide 52

Slide 52 text

Tip • Video element outside of window • Tap img(poster) to trigger `video.play()`

Slide 53

Slide 53 text

呼...

Slide 54

Slide 54 text

Next Time PM Says “We are going to support mobile browsers”

Slide 55

Slide 55 text

We Say “Well, it takes x times longer to do it.”

Slide 56

Slide 56 text

We Say “Well, it takes x times longer to do it.” Mobile Debugging  How to

Slide 57

Slide 57 text

Browsers • Safari • Chrome • Firefox/Opera • Android Browser

Slide 58

Slide 58 text

Safari • Enable Debug • Connect iDevice to your Mac • Open Safari https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/DebuggingSafarioniPhoneContent/DebuggingSafarioniPhoneContent.html

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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