Quick Fetch API Introduction

http://bit.ly/2j3sAlG
@chrislove
chris@love2dev.com
www.love2dev.com
CHRIS LOVE

RESOURCES
Slide URL slideshare – https://slideshare.com/docluv
Source Code – https://github.com/docluv

FETCH
Replaces XMLHttpRequest
Uses Promises
Polyfil Available for Legacy Browsers
Full Support for Modern Browsers
IE 11 & Old Android Need Polyfil
Headers, Request, Response Objects
Build Web Sites Better Than The
Facebook App
5

FETCH
It also provides a global fetch() method that provides an easy, logical
way to fetch resources asynchronously across the network.
Facebook App
6
Fetch API provides a JavaScript interface for accessing and manipulating
parts of the HTTP pipeline, such as requests and responses.

if (typeof fetch === "undefined" ||
fetch.toString().indexOf("[native code]") === -1) {
scripts.unshift("js/libs/fetch.js");
}
Facebook App
7

var myImage = document.querySelector('img');
fetch('flowers.jpg')
.then(function(response) {
return response.blob();
})
.then(function(myBlob) {
var objectURL = URL.createObjectURL(myBlob);
myImage.src = objectURL;
});
Facebook App
8

SUPPLY REQUEST OPTIONS
 method
 headers
 body
 mode
 credentials
 cache
 redirect
 referrer
 referrerPolicy
 integrity
Facebook App
9

var myHeaders = new Headers();
var myInit = { method: 'GET',
headers: myHeaders,
mode: 'cors',
cache: 'default' };
fetch('flowers.jpg',myInit)
})
});
Facebook App
10

VERIFY SUCCESSFUL RESPONSE
Will Reject With a TypeError For Network Error
404 is Not an Error
Check Response.OK
Facebook App
11

fetch('flowers.jpg').then(function(response) {
if(response.ok) {
response.blob().then(function(myBlob) {
});
} else {
console.log('Network response was not ok.');
}
})
.catch(function(error) {
console.log('There has been a problem with your fetch operation: ' +
error.message);
});
Facebook App
12

CREATE CUSTOM REQUEST OBJECT
Facebook App
13

var myHeaders = new Headers();
var myInit = { method: 'GET',
headers: myHeaders,
mode: 'cors',
cache: 'default' };
var myRequest = new Request('flowers.jpg', myInit);
fetch(myRequest)
})
});
Facebook App
14

BODY OBJECT
ArrayBuffer
ArrayBufferView (Uint8Array and friends)
Blob/File
string
URLSearchParams
FormData
Facebook App
15

BODY OBJECT EXTRACTION METHODS
arrayBuffer()
blob()
json()
text()
formData()
Facebook App
16

var form = new
FormData(document.getElementById('login-form'));
fetch("/login", {
method: "POST",
body: form
});
Facebook App
17

RESPONDWITH()
Resolves
 Respond
 Network Error
Facebook App
18

self.addEventListener('fetch', function(event) {
console.log('Handling fetch event for', event.request.url);
event.respondWith(
caches.match(event.request).then(function(response) {
if (response) {
console.log('Found response in cache:', response);
return response;
}
console.log('No response found in cache. About to fetch from network...');
return fetch(event.request).then(function(response) {
console.log('Response from network is:', response);
return response;
}).catch(function(error) {
console.error('Fetching failed:', error);
throw error;
});
})
);
}); Build Web Sites Better Than The
Facebook App
19

Presentation Title Can Be Placed Here 20
LIFE CYCLE
SERVICE WORKER

LIFE CYCLE
 Lives Separate From Page
 Must Register Service Worker
 The Service Worker is Installed
 It is not Immediately Active
 Can be Forced Active Upon Install
 Activated After All Current References Terminated
 Now Controls All New Instances of Site

LIFE CYCLE
Client
Register
SW
Wait For Instance Close
SW
Install
SW
Activated

Web
ServerWeb Page
Service
Worker
Cache
2
1

Web
ServerWeb Page
Service
Worker
Cache
2

REGISTRATION
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js')
.then(function(registration) {
// Registration was successful
})
.catch(function(err) {
// registration failed :(
});
}

INSTALL
self.addEventListener('install', function (e) {
//do something
});

ACTIVATE
self.addEventListener('activate', function (event) {
console.log('Service Worker activating.');
});

ACTIVATE
e.waitUntil(…}));
self.skipWaiting();
});

INTRODUCTION TO SERVICE
WORKER
SERVICE WORKER

A VIRTUAL ASSISTANT FOR YOUR WEB SITE
A service worker is a
script that your
browser runs in the
background

Manages Tasks &
Features That
Don’t Require User
Interaction

Frees Up the UI
Thread for…UI
Stuff

SERVICE WORKER
Service worker is a programmable
network proxy, allowing you to control
how network requests from your page
are handled.
It's terminated when not in use, and
restarted when it's next needed
Persistence Done With IndexDB
Can’t Communicate with DOM Directly

WHAT IS A SERVICE WORKER
A Proxy Server
Between the Browser
and Network

Web Page/UI Service Worker
Web
Server

Enable the Creation of
Effective Offline
Experiences

Enable Native Push Notifications

Enable Background Sync

SERVICE WORKER REQUIREMENTS
Asynchronous

Asynchronous
HTTPS

Asynchronous
HTTPS
Modern Browser

SERVICE WORKER RESOURCES
Is Service Worker Ready?
https://jakearchibald.github.io/isserviceworkerready/
Service Worker Cookbook
https://serviceworke.rs/

THE PROXY SERVER IN YOUR
POCKET
SERVICE WORKER

CLASSIC WEB CLIENT-SERVER
Web
ServerWeb Page

ADD SERVICE WORKER
Web
ServerWeb Page
Service Worker

Web
ServerWeb Page
Service Worker

Web
ServerWeb Page
Service Worker
Cache

SERVICE WORKER CACHE
Persist Files with Response Headers
Limited by Device Resources
Available Online & Offline

e.waitUntil(
caches.open(cacheName).then(function (cache) {
return cache.addAll(filesToCache)
.catch(function (error) {
console.log(error);
});
})
);
});

self.addEventListener('fetch', function (event) {
//intercept fetch request (any request from the UI thread for a file or API) and return from cache or get from
server & cache it
event.respondWith(
caches.match(event.request).then(function (resp) {
return resp || fetchAsset(event);
})
);
});

Web
ServerWeb Page
Service Worker
CacheIndexDB

THE CACHE STRATEGIES
SERVICE WORKER

PROGRESSIVE WEB APPLICATION COURSE
Full access when launched
Videos
E-book
Checklists
Reference Source Code
Build Scripts
https://love2dev.com/pwaupgrade

OFFLINE COOKBOOK
JAKE ARCHIBALD
Chrome Team
https://jakearchibald.com/2014/
offline-cookbook/

self.addEventListener('install', function(event) {
event.waitUntil( caches.open('mysite-static-v3')
.then(function(cache) {
return cache.addAll([ '/css/whatever-v3.css',
'/css/imgs/sprites-v6.png',
'/css/fonts/whatever-v8.woff',
'/js/all-min-v4.js'
// etc
]); }) ); });

self.addEventListener('install', function(event) {
event.waitUntil(
caches.open('mygame-core-v1')
cache.addAll( // levels 11-20 );
return cache.addAll(
// core assets & levels 1-10 );
})
);
});

self.addEventListener('activate', function(event) {
event.waitUntil( caches.keys()
.then(function(cacheNames) {
return Promise.all(
cacheNames.filter(function(cacheName) {
// Return true if you want to remove this cache,
// but remember that caches are shared across
// the whole origin })
.map(function(cacheName) {
return caches.delete(cacheName);
})
);
})
);
});

event.respondWith(
caches.open('mysite-dynamic')
return cache.match(event.request)
.then(function (response) {
return response || fetch(event.request)
cache.put(event.request, response.clone());
return response;
});
});
})
);
});

event.respondWith(
return cache.match(event.request)
var fetchPromise = fetch(event.request)
.then(function(networkResponse) {
cache.put(event.request,
networkResponse.clone());
return networkResponse; })
return response || fetchPromise;
}) }) ); });

// If a match isn't found in the cache, the response
// will look like a connection error
event.respondWith(caches.match(event.request));
});

event.respondWith(fetch(event.request));
// or simply don't call event.respondWith, which
// will result in default browser behavior
});

event.respondWith(
caches.match(event.request)
return response || fetch(event.request);
})
);
});

event.respondWith(
promiseAny([
caches.match(event.request),
fetch(event.request)
])
);
});

event.respondWith(
fetch(event.request).catch(
function() { return
caches.match(event.request);
})
);
});

event.respondWith(
return fetch(event.request)
cache.put(event.request, response.clone());
return response;
});
})
);
});

event.respondWith(
caches.match(event.request)
return response || fetch(event.request);
}).catch(function() {
return caches.match('/offline.html');
})
);
});

SERVICE WORKER TOOLS
 sw_precache
 A node module to generate service worker code that will precache
specific resources so they work offline.
 https://github.com/googlechrome/sw-precache
 sw_toolbox
 A collection of service worker tools for offlining runtime requests
 https://github.com/GoogleChrome/sw-toolbox

PUSH NOTIFICATIONS
SERVICE WORKER

INCREASED ENGAGEMENT
72% increase in time spent for users visiting via a push
notiﬁcation
26% increase in average spend per visit by members
arriving via a push notiﬁcation
+50% repeat visits within 3 month

PUSH NOTIFICATION
{
"body": "Did you make a $1,000,000 purchase at Dr. Evil...",
"icon": "images/ccard.png",
"vibrate": [200, 100, 200, 100, 200, 100, 400],
"tag": "request",
"actions": [
{ "action": "yes", "title": "Yes", "icon": "images/yes.png" },
{ "action": "no", "title": "No", "icon": "images/no.png" }
]
}

FEATURE DETECTION
//Check if Push is Supported
If(!”PushManager” in window){
//TODO: Disable Push API
return;
}

SUBSCRIBE USER
navigator.serviceWorker.ready
.then(function(serviceWorkerRegistration){
…
});

SUBSCRIBE USER
serviceWorkerRegistration.pushManager
.subscribe({userVisibileOnly: true})
.then(function(subscription){
//the subscription was successful
…
})
.catch(function(error){…});

PUSH IN A SERVICE WORKER
self.addEventListener(“push”, function(event){
console.log(“received a push message”, event);
});

PUSH IN A SERVICE WORKER
event.waitUntil(
self.registration.showNotification(title, {
body: body,
icon: icon,
tag: tag
});

UNSUBSCRIBE
navigator.serviceWorker.ready
.then(function(pushSubscription){
if(!pushSubscription){
if(pushSubscription){
return;
}
})
.catch(…)

Quick Fetch API Introduction

Related slideshows

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

Recommended for you

More Related Content

What's hot

What's hot (20)

Similar to Quick Fetch API Introduction

Similar to Quick Fetch API Introduction (20)

More from Chris Love

More from Chris Love (20)

Recently uploaded

Recently uploaded (20)

Quick Fetch API Introduction

Editor's Notes