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
Why Mobile Web Still Sucks
Search
Ilya Pukhalski
June 05, 2014
Technology
3
510
Why Mobile Web Still Sucks
What comes next into our browsers: Service Workers, Push API, Browser Sync, Installable Web Apps.
Ilya Pukhalski
June 05, 2014
Tweet
Share
More Decks by Ilya Pukhalski
See All by Ilya Pukhalski
There's a bot for that
pukhalski
1
290
50 Shades of Flux
pukhalski
3
370
Responsive Typography: Wrap-Up
pukhalski
8
400
Next Level SVG
pukhalski
1
1.6k
XFramework: the story so far
pukhalski
0
470
XFramework: build cross-platform responsive web apps easily
pukhalski
3
910
Mobile Cross-Platform Development
pukhalski
2
300
Rest in PS: рабочий процесс современного веб-дизайнера
pukhalski
12
1.5k
Что сломалось в белорусском интернете?
pukhalski
4
500
Other Decks in Technology
See All in Technology
AIエージェントキャッチアップと論文リサーチ
os1ma
6
1.1k
バクラクでのSystem Risk Records導入による変化と改善の取り組み/Changes and Improvement Initiatives Resulting from the Implementation of System Risk Records
taddy_919
0
220
アプリケーション固有の「ロジックの脆弱性」を防ぐ開発者のためのセキュリティ観点
flatt_security
7
3k
モンテカルロ木探索のパフォーマンスを予測する Kaggleコンペ解説 〜生成AIによる未知のゲーム生成〜
rist
4
1.1k
SSH公開鍵認証による接続 / Connecting with SSH Public Key Authentication
kaityo256
PRO
2
210
Why Go?
xpmatteo
0
130
Symfony in 2025: Scaling to 0
fabpot
2
170
Engineering Managementのグローバルトレンド #emoasis / Engineering Management Global Trend
kyonmm
PRO
6
980
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
20k
17年のQA経験が導いたスクラムマスターへの道 / 17 Years in QA to Scrum Master
toma_sm
0
380
ソフトウェアプロジェクトの成功率が上がらない原因-「社会価値を考える」ということ-
ytanaka5569
0
120
20250328_OpenAI製DeepResearchは既に一種のAGIだと思う話
doradora09
PRO
0
150
Featured
See All Featured
Being A Developer After 40
akosma
90
590k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Java REST API Framework Comparison - PWX 2021
mraible
29
8.5k
Faster Mobile Websites
deanohume
306
31k
Why Our Code Smells
bkeepers
PRO
336
57k
BBQ
matthewcrist
88
9.5k
Code Reviewing Like a Champion
maltzj
522
39k
Thoughts on Productivity
jonyablonski
69
4.5k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.4k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
135
33k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Transcript
Why Mobile Web Still Sucks? Ilya Pukhalski May MMXIV
@pukhalski ! Solution Architect, EPAM Systems Lecturer, British Higher School
of Art & Design
% of time spent 2013 2014 14 20 86 80
Apps Mobile Web
Why apps? • Easy to control over stores • Rich-get-richer
dynamics • Easier to retain users
None
None
HTML5 vs Native on mobile Web
Watch your language • HTML5 is a marketing buzzword •
Responsive Web Design doesn’t exist Good design is responsive by default.
What is web?
– Wiki “Web is a system of interlinked “hypertext documents
that run “on and are accessed “via the Internet.”
None
Custom URL schemas • fb://profile/(fbid) • tel:+180022933 • twitter://username •
…
applinks.org
Native is a part of Web ecosystem
What is native?
“Native — software or data “formats supported by a certain
“system with minimal overhead “and additional components” – Wiki
Web technologies are native for browsers
Browsers are responsible for standards support
Apps boom Do you remember dot-com boom?
Why do we love apps? • Push Notifications • Offline
Mode • Performance ! ! • Look & Feel • Distribution • Background Sync
Look & Feel
famo.us
None
Touch Events, Pointer Events, Mouse Events
~300ms delay
tap.js
document .getElementById('any-element') .addEventListener('tap', function (e) { // All the magic
happens here }); $('#any-element').on('tap', function (e) { // All the magic happens here });
Performance
Heavy DOM
Facebook React.js Model DOM Virtual DOM Redraw on requestAnimationFrame Changes
Changes Changes
Animations
2010-2013
2014
requestAnimationFrame
None
None
element.animate([ {cssProperty: value0}, {cssProperty: value1}, {cssProperty: value2}, //... ], {
duration: timeInMs, iterations: iterationCount, delay: delayValue });
Offline Mode
Cache Manifest
A declarative way CACHE MANIFEST # 2012-02-21 v1.0.0 /theme.css /logo.png
/main.js ! NETWORK: login.asp ! FALLBACK: /html/ /offline.html
A mess CACHE MANIFEST # v1 index.html js/lib/mapbox.js js/lib/iscroll.min.js js/lib/jquery/dist/jquery.min.js
js/lib/backbone/backbone.min.js js/lib/underscore/underscore.min.js js/xf.min.js js/app.js styles/xf.min.css styles/app.css styles/mapbox.css js/components/PointsList.js tmpl/desktop/PointsList.tmpl tmpl/mobile/PointsList.tmpl js/components/PointsMap.js https://api.tiles.mapbox.com/mapbox.js/v1.6.1/images/icons-000000.png http://api.tiles.mapbox.com/mapbox.js/v1.6.1/images/icons-000001.png http://api.tiles.mapbox.com/mapbox.js/v1.6.1/images/icons-000002.png http://api.tiles.mapbox.com/mapbox.js/v1.6.1/images/icons-000003.png http://api.tiles.mapbox.com/mapbox.js/v1.6.1/images/icons-000004.png http://api.tiles.mapbox.com/mapbox.js/v1.6.1/images/icons-000005.png http://a.tiles.mapbox.com/v3/witchfinderx.hb934388.json http://a.tiles.mapbox.com/v3/marker/pin-s-fuel+fc4353.png http://a.tiles.mapbox.com/v3/marker/pin-m-circle+f0a.png NETWORK: http://api.tomtom.com/ http://a.tiles.mapbox.com/ http://b.tiles.mapbox.com/ http://c.tiles.mapbox.com/
Debugging hell 1. Change the code 2. Change manifest 3.
Clean cache 4. Debug 5. GOTO 1
None
Meet Service Worker
Event-driven scripts that run independently of web pages
• Handling resource requests • Foundation for other standards
navigator.serviceWorker.register('/worker.js') .then(function(serviceWorker) { // To use the serviceWorker immediately, //
you might call window.location.reload() });
var base = "https://videos.example.com"; var inventory = new URL("/inventory.json", base)
+ ""; ! ! this.addEventListener("fetch", function(e) { var url = e.request.url; if (url == inventory) { e.respondWith(new Response({ statusCode: 200, body: JSON.stringify({ videos: { /* ... */ } }) })); } });
var base = "https://videos.example.com"; ! this.addEventListener("install", function(e) { ! var
cachedResources = new Cache( base + "/base.css", base + "/app.js", base + "/logo.png" ); ! ! e.waitUntil(cachedResources.ready()); ! ! caches.set("videos-cache", cachedResources); });
this.addEventListener("fetch", function(e) { ! e.respondWith( caches.match(e.request, “videos-cache") ); });
var base = "https://videos.example.com"; var inventory = new URL("/inventory.json", base)+"";
! this.addEventListener("fetch", function(e) { var url = e.request.url; if (url == inventory) { e.respondWith( fetch(url).then( null, function() { return caches.match(inventory); } ) ); } });
Distribution
Stores • App Store • Google Play • BlackBerry AppWorld
• Amazon Appstore • EPAM Mobile Appstore
Stores • App Store • Google Play • BlackBerry AppWorld
• Amazon Appstore • EPAM Mobile Appstore
Will you install an app to buy a car?
None
None
None
Install this app
navigator .mozApps .install("path/to/manifest");
Notifications
Web Notifications
var Notification = window.Notification || window.mozNotification || window.webkitNotification; ! Notification.requestPermission(
function (permission) { // console.log(permission); } );
! var notification = new Notification( "SEC Spring 2014", {
body: "I hope you enjoy the conference" } ); ! notification.onclick = function () { // Something to do };
• Opened website • Client-side only
Safari Remote Notifications
The Flow • Request permissions • Register the device •
Send notifications
{! ! "aps": {! ! "alert": {! ! "title": "Flight
A998 Now Boarding",! ! "body": "Boarding has begun for Flight A998.",! ! "action": "View"! ! },! ! "url-args": ["boarding", "A998"]! ! }! ! }!
• Server-side • Offline
Service Worker Push Notifications
The Flow • Register locally • Register on the server
side • Send notifications
navigator.serviceWorker.register("/sw.js"); ! navigator.serviceWorker.whenReady().then(function(sw) { ! navigator.push.has("regId").catch(function() { navigator.push.register({ sender: {
// sender data... } }); }).then(function (registration) { asyncXHR( "http://example.com/push/activate" + toQueryString(registration); ); }); });
this.onpush = function(e) { console.log(e.message.data); // Cache the data //
... }
Background Sync
Service Worker? Yes!
navigator.serviceWorker.register("/sw.js"); ! ! navigator.serviceWorker.whenReady() .then(function(sw) { ! navigator.registerSync( "id", {
interval: 'daily', data: '', description: '', lang: '', dir: '' } ); });
this.onsync = function(event) { var data = JSON.parse(event.data); ! if
(event.id === "id") { // make something with data } };
How to make mobile web suck less?
Blame the implementation, not technique
Thanks @pukhalski
[email protected]