The Fetch API is a modern replacement of the XMLHTTPRequest object. It is based on promises and makes making AJAX/API calls easier to manage and code. This slide deck is a quick introduction to the API.

1. QUICK FETCH API INTRODUCTION

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

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

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

5. 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

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

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

8. 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;
});
Build Web Sites Better Than The
Facebook App
8

9. SUPPLY REQUEST OPTIONS
 method
 headers
 body
 mode
 credentials
 cache
 redirect
 referrer
 referrerPolicy
 integrity
Build Web Sites Better Than The
Facebook App
9

10. var myHeaders = new Headers();
var myInit = { method: 'GET',
headers: myHeaders,
mode: 'cors',
cache: 'default' };
fetch('flowers.jpg',myInit)
.then(function(response) {
return response.blob();
})
.then(function(myBlob) {
var objectURL = URL.createObjectURL(myBlob);
myImage.src = objectURL;
});
Build Web Sites Better Than The
Facebook App
10

11. VERIFY SUCCESSFUL RESPONSE
Will Reject With a TypeError For Network Error
404 is Not an Error
Check Response.OK
Build Web Sites Better Than The
Facebook App
11

12. fetch('flowers.jpg').then(function(response) {
if(response.ok) {
response.blob().then(function(myBlob) {
var objectURL = URL.createObjectURL(myBlob);
myImage.src = objectURL;
});
} else {
console.log('Network response was not ok.');
}
})
.catch(function(error) {
console.log('There has been a problem with your fetch operation: ' +
error.message);
});
Build Web Sites Better Than The
Facebook App
12

13. CREATE CUSTOM REQUEST OBJECT
Build Web Sites Better Than The
Facebook App
13

14. var myHeaders = new Headers();
var myInit = { method: 'GET',
headers: myHeaders,
mode: 'cors',
cache: 'default' };
var myRequest = new Request('flowers.jpg', myInit);
fetch(myRequest)
.then(function(response) {
return response.blob();
})
.then(function(myBlob) {
var objectURL = URL.createObjectURL(myBlob);
myImage.src = objectURL;
});
Build Web Sites Better Than The
Facebook App
14

15. BODY OBJECT
ArrayBuffer
ArrayBufferView (Uint8Array and friends)
Blob/File
string
URLSearchParams
FormData
Build Web Sites Better Than The
Facebook App
15

16. BODY OBJECT EXTRACTION METHODS
arrayBuffer()
blob()
json()
text()
formData()
Build Web Sites Better Than The
Facebook App
16

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

18. RESPONDWITH()
Resolves
 Respond
 Network Error
Build Web Sites Better Than The
Facebook App
18

19. 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

20. Presentation Title Can Be Placed Here 20
LIFE CYCLE
SERVICE WORKER

21. 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
Presentation Title Can Be Placed Here 21

22. LIFE CYCLE
Presentation Title Can Be Placed Here 22
Client
Register
SW
Wait For Instance Close
SW
Install
SW
Activated

24. Web
ServerWeb Page
Service
Worker
Cache
2
1

25. Web
ServerWeb Page
Service
Worker
Cache
2

26. REGISTRATION
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js')
.then(function(registration) {
// Registration was successful
})
.catch(function(err) {
// registration failed :(
});
}
Presentation Title Can Be Placed Here 26

27. INSTALL
self.addEventListener('install', function (e) {
//do something
});
Presentation Title Can Be Placed Here 27

28. ACTIVATE
self.addEventListener('activate', function (event) {
console.log('Service Worker activating.');
});
Presentation Title Can Be Placed Here 28

29. ACTIVATE
self.addEventListener('install', function (e) {
e.waitUntil(…}));
self.skipWaiting();
});
Presentation Title Can Be Placed Here 29

31. Presentation Title Can Be Placed Here 31
INTRODUCTION TO SERVICE
WORKER
SERVICE WORKER

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

33. A VIRTUAL ASSISTANT FOR YOUR WEB SITE
Manages Tasks &
Features That
Don’t Require User
Interaction

34. A VIRTUAL ASSISTANT FOR YOUR WEB SITE
Frees Up the UI
Thread for…UI
Stuff

35. SERVICE WORKER
Presentation Title Can Be Placed Here 35
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

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

37. Web Page/UI Service Worker
Web
Server

38. WHAT IS A SERVICE WORKER
Enable the Creation of
Effective Offline
Experiences

39. WHAT IS A SERVICE WORKER
Enable Native Push Notifications

40. WHAT IS A SERVICE WORKER
Enable Background Sync

41. SERVICE WORKER REQUIREMENTS
Asynchronous

42. SERVICE WORKER REQUIREMENTS
Asynchronous
HTTPS

43. SERVICE WORKER REQUIREMENTS
Asynchronous
HTTPS
Modern Browser

44. SERVICE WORKER RESOURCES
Presentation Title Can Be Placed Here 44
Is Service Worker Ready?
https://jakearchibald.github.io/isserviceworkerready/
Service Worker Cookbook
https://serviceworke.rs/

45. THE PROXY SERVER IN YOUR
POCKET
SERVICE WORKER

46. CLASSIC WEB CLIENT-SERVER
Presentation Title Can Be Placed Here 46
Web
ServerWeb Page

47. ADD SERVICE WORKER
Presentation Title Can Be Placed Here 47
Web
ServerWeb Page
Service Worker

48. Presentation Title Can Be Placed Here 48
Web
ServerWeb Page
Service Worker

49. Presentation Title Can Be Placed Here 49
Web
ServerWeb Page
Service Worker
Cache

50. SERVICE WORKER CACHE
Presentation Title Can Be Placed Here 50
Persist Files with Response Headers
Limited by Device Resources
Available Online & Offline

51. self.addEventListener('install', function (e) {
e.waitUntil(
caches.open(cacheName).then(function (cache) {
return cache.addAll(filesToCache)
.catch(function (error) {
console.log(error);
});
})
);
});
Presentation Title Can Be Placed Here 51

52. Presentation Title Can Be Placed Here 52
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);
})
);
});

53. Web
ServerWeb Page
Service Worker
CacheIndexDB

54. Presentation Title Can Be Placed Here 54
THE CACHE STRATEGIES
SERVICE WORKER

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

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

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

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

59. Web Page
Service Worker

60. Web Page
Service Worker
Cache

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

63. 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
]); }) ); });

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

67. 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);
})
);
})
);
});

69. document.querySelector('.cache-article').addEventListener('click',
function(event) {
event.preventDefault();
var id = this.dataset.articleId;
caches.open('mysite-article-' + id)
.then(function(cache) {
fetch('/get-article-urls?id=' +
id).then(function(response) {
response.json();
}).then(function(urls) { cache.addAll(urls);
});
});
});

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

73. self.addEventListener('fetch', function(event) {
event.respondWith(
caches.open('mysite-dynamic')
.then(function(cache) {
return cache.match(event.request)
.then(function(response) {
var fetchPromise = fetch(event.request)
.then(function(networkResponse) {
cache.put(event.request,
networkResponse.clone());
return networkResponse; })
return response || fetchPromise;
}) }) ); });

76. 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
]); }) ); });

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

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

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

84. self.addEventListener('fetch', function(event) {
event.respondWith(
promiseAny([
caches.match(event.request),
fetch(event.request)
])
);
});

86. self.addEventListener('fetch', function(event) {
event.respondWith(
fetch(event.request).catch(
function() { return
caches.match(event.request);
})
);
});

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

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

93. CACHE TOOLS
SERVICE WORKER

94. SERVICE WORKER TOOLS
Presentation Title Can Be Placed Here 94
 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

95. Presentation Title Can Be Placed Here 95

97. PUSH NOTIFICATIONS
SERVICE WORKER

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

99. INCREASED ENGAGEMENT

100. 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" }
]
}

101. PUSH NOTIFICATION

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

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

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

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

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

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