Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Mobile Web Application 甘苦談
Search
othree
October 27, 2013
Technology
6
1.5k
Mobile Web Application 甘苦談
othree
October 27, 2013
Tweet
Share
More Decks by othree
See All by othree
How GitHub Supports Vim License Detection, The Five Years Journey
othree
1
1.7k
WAT JavaScript Date
othree
3
1.8k
Modern HTML Email Development
othree
3
2.5k
MRT & GIT
othree
1
1.9k
YAJS.vim and Vim Syntax Highlight
othree
1
2.5k
Web Trends to 2015
othree
4
300
Transducer
othree
9
2.7k
HITCON 11 Photographer
othree
4
460
fetch is the new XHR
othree
6
3.4k
Other Decks in Technology
See All in Technology
頼られるのが大好きな 皆さんへ - 支援相手との期待の合わせ方、突き放し方 -/For_people_who_like_to_be_relied_on
naitosatoshi
1
290
テスト・設計研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
170
Git 研修 Advanced【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
200
What is DRE? - Road to SRE NEXT@広島
chanyou0311
3
630
AutomatedLabを使って内部ペンテストを勉強しよう! -やられ社内ネットワークの自動構築-
n_etupirka
1
610
Git 研修 Basic【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
310
ギークの理想が7つ集まるエムスリーで夢を叶えよう - エムスリー株式会社
m3_engineering
1
260
たくさん本を読んだけど 1年後には綺麗サッパリ!を乗り越えて 学習の鬼になるぞ👹
yum3
0
160
開発生産性をむしろ向上させる セキュリティパートナーの作り方 / Dev Productivity Con 2024
flatt_security
0
380
DevIO2024_レガシー運用からの脱却 -クラウド活用の実践事例とベストプラクティス-
jun2882
0
210
AOAI Dev Day LLMシステム開発 Tips集
hirosatogamo
15
3.8k
コンテナ・K8s研修 - 後半 Kubernetes 基礎&ハンズオン【MIXI 24新卒技術研修】
mixi_engineers
PRO
1
120
Featured
See All Featured
RailsConf 2023
tenderlove
16
720
The MySQL Ecosystem @ GitHub 2015
samlambert
248
12k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
19k
Designing with Data
zakiwarfel
96
5k
Optimizing for Happiness
mojombo
373
69k
What the flash - Photography Introduction
edds
65
11k
Six Lessons from altMBA
skipperchong
24
3.2k
Debugging Ruby Performance
tmm1
71
11k
Design by the Numbers
sachag
277
18k
Into the Great Unknown - MozCon
thekraken
20
1.3k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
277
13k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
26
1.6k
Transcript
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?
None
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.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
Location Bar • 3 states in Android Browser • show
• hide • pinned
None
None
None
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, play
playing play
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
None
None
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 Debugging How 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
None
Firefox • https://hacks.mozilla.org/2012/08/remote- debugging-on-firefox-for-android/
Android Browser • Weinre http://people.apache.org/~pmuellr/weinre/ docs/latest/
None
None
None
None
None
Demo Q
Thanks