Modern web apis 101

promises

Promises introduction - Domenic Denicola

function myAsyncFunction(input, callback) {
    var myThing = doMyThing(input);

    doMyThing.oncomplete = callback;
}

function nextAsyncFunction(secondInput, callback) {
    var myOtherThing =
        doMyOtherThing(secondInput);

    myOtherThing.onComplete = callback;
}

myAsyncFunction(1, function(result) {
    nextAsyncFunction(result,
        function(secondresult) {
            console.log(secondresult);
        }
    );
});

function myAsyncFunction(input) {
    var myThing = doMyThing(input);

    return doMyThing.promise;
}

function nextAsyncFunction(secondInput) {
    var myOtherThing =
        doMyOtherThing(secondInput);

    return myOtherThing.promise;
}

myAsyncFunction(1)
    .then(nextAsyncFunction)
    .then(function(secondresult) {
        console.log(secondresult);
    });

the Fetch api

WhatWG Fetch API polyfill on GitHub & NPM

var r = new XMLHttpRequest();

r.open("POST", "/api/users", true);

r.onreadystatechange = function () {
    if (r.readyState != 4) return;

    if (r.status != 200) {
        console.log("Request failed!");
    }

    console.log("Success: " + r.responseText);
};

r.setRequestHeader("Content-Type", "application/json");

r.send('{"name: "Flaki", "login": "slsoftworks" }');

fetch('/api/users', {

  method: 'post',

  headers: {
    'Content-Type': 'application/json'
  },

  body: JSON.stringify({
    name: 'Flaki',
    login: 'slsoftworks',
  })

}).then(function(result) {
    console.log("Success: " + result);

}).catch(function(error) {
    console.log("Request failed!");

});

Service workers

the hands-on experience

USAGE

• Installing / updating service workers
• Caching assets
• Fetching and serving resources
• Support (Chrome, Firefox - desktop & mobile)

Introductory article by Jake Archibald

Registering

// Note: ONLY HTTPS!
navigator.serviceWorker.register('/serviceworker.js', {

  // Service Worker events are scoped
  // to this subfolder only
  scope: '/trained-to-thrill/'

}).then(function(reg) {
  console.log('Service Worker on line!');

}, function(err) {
  console.log('Oops, Service Worker installation failed!');

});

the  Serviceworker.js

// The SW will be shutdown when not in use to save memory,
// be aware that any global state is likely to disappear

console.log("SW startup");

self.addEventListener('install', function(event) {
  console.log("SW installed");
});

self.addEventListener('activate', function(event) {
  console.log("SW activated");
});

self.addEventListener('fetch', function(event) {
  console.log("Caught a fetch!");
  event.respondWith(new Response("Hello world!"));
});

UPDATING & REPLACING

// Installation
self.addEventListener('install', function(event) {
  console.log("Installing…");

  event.waitUntil(
    somethingThatReturnsAPromise().then(function() {
      console.log("Installed!");
    })
  );
});

// Activation
self.addEventListener('activate', function(event) {
  console.log("Activating…");

  event.waitUntil(
    somethingThatReturnsAPromise().then(function() {
      console.log("Activated!");
    })
  );
});

Cached responses

importScripts('serviceworker-cache-polyfill.js');

self.addEventListener('install', function(event) {
  // pre cache a load of stuff:
  event.waitUntil(
    cachesPolyfill.open('myapp-static-v1').then(function(cache) {
      return cache.addAll([
        '/',
        '/styles/all.css',
        '/styles/imgs/bg.png',
        '/scripts/all.js'
      ]);
    })
  )
});

self.addEventListener('fetch', function(event) {
  event.respondWith(
    cachesPolyfill.match(event.request).then(function(response) {
      return response || fetch(event.request);
    })
  );
});

NOT JUST OFFLINE

Every byte not transferred
is a byte saved!

Using ServiceWorker in Chrome today - by Jake Archibald

So how long until I can actually use this?

the future

geofencing, background sync and push