Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Why Mobile Web Still Sucks

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

More Decks by Ilya Pukhalski

Other Decks in Technology

Transcript

  1. Watch your language • HTML5 is a marketing buzzword •

    Responsive Web Design doesn’t exist Good design is responsive by default.
  2. – Wiki “Web is a system of interlinked “hypertext documents

    that run “on and are accessed “via the Internet.”
  3. “Native — software or data “formats supported by a certain

    “system with minimal overhead “and additional components” – Wiki
  4. Why do we love apps? • Push Notifications • Offline

    Mode • Performance ! ! • Look & Feel • Distribution • Background Sync
  5. document .getElementById('any-element') .addEventListener('tap', function (e) { // All the magic

    happens here }); $('#any-element').on('tap', function (e) { // All the magic happens here });
  6. element.animate([ {cssProperty: value0}, {cssProperty: value1}, {cssProperty: value2}, //... ], {

    duration: timeInMs, iterations: iterationCount, delay: delayValue });
  7. A declarative way CACHE MANIFEST # 2012-02-21 v1.0.0 /theme.css /logo.png

    /main.js ! NETWORK: login.asp ! FALLBACK: /html/ /offline.html
  8. 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/
  9. 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: { /* ... */ } }) })); } });
  10. 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); });
  11. 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); } ) ); } });
  12. Stores • App Store • Google Play • BlackBerry AppWorld

    • Amazon Appstore • EPAM Mobile Appstore
  13. Stores • App Store • Google Play • BlackBerry AppWorld

    • Amazon Appstore • EPAM Mobile Appstore
  14. ! var notification = new Notification( "SEC Spring 2014", {

    body: "I hope you enjoy the conference" } ); ! notification.onclick = function () { // Something to do };
  15. {! ! "aps": {! ! "alert": {! ! "title": "Flight

    A998 Now Boarding",! ! "body": "Boarding has begun for Flight A998.",! ! "action": "View"! ! },! ! "url-args": ["boarding", "A998"]! ! }! ! }!
  16. 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); ); }); });
  17. this.onsync = function(event) { var data = JSON.parse(event.data); ! if

    (event.id === "id") { // make something with data } };