PWA:
Promise & Caching
Alexander Thomas
[email protected] Asynchronous Function
●
Way to run a function without
waiting for its result.
●
You can use its result using callback.
Asynchronous Function
●
You can declare “async” before
function declaration (e.g. “async
function plusOne”)
– But for this lesson we’ll use build in
setTimeout function
Promise Object
●
Build in object that represent
eventual completion (or failure) of an
asynchronous operation, and its
resulting value
Promise Object
●
Consist of 3 states
– Pending: new promise
– Resolved: succeeded promise
– Rejected: failed promise
Promise Object
●
You can handle success / failed
promise using .then / .catch function.
– Only 1 .catch function needed even if
you chain multiple promise object
Fetch
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
request = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
try {
request = new ActiveXObject('Msxml2.XMLHTTP');
}
catch (e) {
try {
request = new ActiveXObject('Microsoft.XMLHTTP');
}
catch (e) {}
}
}
// Open, send.
request.open('GET', 'https://davidwalsh.name/ajax-endpoint', true);
request.send(null);
Fetch
●
Or you recently use $.ajax to do
remote resource calling?
●
Now introducing, fetch function.
Built-in promise-based js function for
remote resource calling.
Fetch
●
Just to fetch(“remote_url”) and you
are done.
●
Because its based on promise object,
you can use .then rather than
waiting for its result.
Fetch Request
●
If you can either create new request
object or put extra parameters to
fetch function.
Fetch Response
●
When you interacting with fetch
response, you can check response
status and convert your result to your
desired format (.e.g json, text, blob)
●
If you want to reuse your result, dont
forget to clone it first!
Fetch Event
●
Using service worker, you can
intercept any fetch request made
and modify its request or response.
●
You can listen based on complete url
or certain criterias.
Caching Storage
●
Synchronous storage.
– LocalStorage
●
Asynchronous storage.
– Cache API *
– IndexedDB
CacheStorage
●
Interface to create or open cache
– Use window.caches to check browser
capability
●
caches.open(): create new cache if not exist
●
caches.keys(): list of all created caches
●
caches.has(): check if cache exist
●
caches.delete(): delete cache
Initial Caches
●
Make a version based cache-key (e.g.
cache-1, cache-2, etc.)
●
Open new cache instance based on
cache key
●
Then you can add any initial files using
add or addAll
Caching Request
●
Listen to any fetch request
●
If requested fetch from our domain
then fetch put it to our caches
●
Why dont use add?
Caching Strategies
●
Can your resource be served?
– Does it changed often?
– Does it need to be live version?
– Is performance more important than
version?
Caching Strategies
●
Cache only
– Only search within caches, careful
because user can delete cache
●
Cache first then network
– Check for within caches, if not found
then fetch from network
Caching Strategies
Network first then cache
●
–
If network is available, then always
get from network, else look within
caches
Cache with network update
●
–
Return cache result while update it in
background
Caching Strategies
●
Cache & network race
– Set a race between cache and
network request, most difficult
one.
