Timing out

Service worker strategies

addEventListener('fetch', fetchEvent => {
const request = fetchEvent.request;
// Do something with this request.
});
if (request.headers.get('Accept').includes('text/html')) {
// Code for handling page requests.
}
if (request.headers.get('Accept').includes('text/html')) {
// Code for handling page requests.
} else {
// Code for handling everthing else.
}
fetchEvent.respondWith(
fetch(request)
.then( responseFromFetch => {
return responseFromFetch;
})
.catch( fetchError => {
return caches.match('/offline');
})
if (request.headers.get('Accept').includes('text/html')) {
fetchEvent.respondWith(
fetch(request)
.then( responseFromFetch => {
return responseFromFetch;
})
.catch( fetchError => {
return caches.match('/offline');
})
);
}
caches.match(request)
.then( responseFromCache => {
return responseFromCache || fetch(request);
})
addEventListener('fetch', fetchEvent => {
const request = fetchEvent.request;
if (request.headers.get('Accept').includes('text/html')) {
fetchEvent.respondWith(
fetch(request)
.then( responseFromFetch => {
return responseFromFetch;
})
.catch( fetchError => {
return caches.match('/offline');
})
);
} else {
caches.match(request)
.then( responseFromCache => {
return responseFromCache || fetch(request);
})
}
});

Cache as you go

fetchEvent.respondWith(
fetch(request)
.then( responseFromFetch => {
const copy = responseFromFetch.clone();
try {
fetchEvent.waitUntil(
caches.open('pages')
.then( pagesCache => {
return pagesCache.put(request, copy);
})
)
} catch(error) {
console.error(error);
}
return responseFromFetch;
})
const copy = responseFromFetch.clone();
fetchEvent.waitUntil(
caches.open('pages')
.then( pagesCache => {
return pagesCache.put(request, copy);
})
)
addEventListener('fetch', fetchEvent => {
const request = fetchEvent.request;
if (request.headers.get('Accept').includes('text/html')) {
fetchEvent.respondWith(
fetch(request)
.then( responseFromFetch => {
const copy = responseFromFetch.clone();
try {
fetchEvent.waitUntil(
caches.open('pages')
.then( pagesCache => {
return pagesCache.put(request, copy);
})
)
} catch(error) {
console.error(error);
}

return responseFromFetch;
})
.catch( fetchError => {
return caches.match('/offline');
})
);
} else {
caches.match(request)
.then( responseFromCache => {
return responseFromCache || fetch(request);
})
}
});
.catch( fetchError => {
return caches.match('/offline');
})
.catch( fetchError => {
caches.match(request)
.then( responseFromCache => {
return responseFromCache || caches.match('/offline');
})
});

Timing out

if (request.headers.get('Accept').includes('text/html')) {
fetchEvent.respondWith(
new Promise( resolveWithResponse => {
// Code for handling page requests.
})
);
}
addEventListener('fetch', fetchEvent => {
const request = fetchEvent.request;
if (request.headers.get('Accept').includes('text/html')) {
fetchEvent.respondWith(
new Promise( resolveWithResponse => {
fetch(request)
.then( responseFromFetch => {
const copy = responseFromFetch.clone();
try {
fetchEvent.waitUntil(
caches.open('pages')
then( pagesCache => {
return pagesCache.put(request, copy);
})
)
} catch(error) {
console.error(error);
}
resolveWithResponse(responseFromFetch);
})
.catch( fetchError => {
caches.match(request)
.then( responseFromCache => {
resolveWithResponse(
responseFromCache || caches.match('/offline')
);

})
})
})
);
} else {
caches.match(request)
.then( responseFromCache => {
return responseFromCache || fetch(request);
})
}
});
const timer = setTimeout( () => {
caches.match(request)
.then( responseFromCache => {
if (responseFromCache) {
resolveWithResponse(responseFromCache);
}
})
}, 3000);
clearTimeout(timer);
addEventListener('fetch', fetchEvent => {
const request = fetchEvent.request;
if (request.headers.get('Accept').includes('text/html')) {
fetchEvent.respondWith(
new Promise( resolveWithResponse => {
const timer = setTimeout( () => {
caches.match(request)
.then( responseFromCache => {
if (responseFromCache) {
resolveWithResponse(responseFromCache);
}
})
}, 3000);

fetch(request)
.then( responseFromFetch => {
clearTimeout(timer);
const copy = responseFromFetch.clone();
try {
fetchEvent.waitUntil(
caches.open('pages')
then( pagesCache => {
return pagesCache.put(request, copy);
})
)
} catch(error) {
console.error(error);
}
resolveWithResponse(responseFromFetch);
})
.catch( fetchError => {
clearTimeout(timer);
caches.match(request)
.then( responseFromCache => {
resolveWithResponse(
responseFromCache || caches.match('/offline')
);
})
})
})
);
} else {
caches.match(request)
.then( responseFromCache => {
return responseFromCache || fetch(request)
})
}
});

Pros and cons

--

--

--

A web developer and author living and working in Brighton, England. Everything I post on Medium is a copy — the originals are on my own website, adactio.com

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Why Should I Choose Python for Web Development?

Why Should I Choose Python For Web Development?

Better Sprint Planning with Bayes

Creating a Custom Authentication System in Laravel using Vue.js,

Using Airtable as a backend

Zero day log4j — How to upgrade log4j in Nuxeo from your custom marketplace package

How game emulators learned to teach old smartphone GPUs new tricks

12 hints you should know as an Android Developers.

Improving Upon Selection Highlighting in Our Game — Part 3

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jeremy Keith

Jeremy Keith

A web developer and author living and working in Brighton, England. Everything I post on Medium is a copy — the originals are on my own website, adactio.com

More from Medium

.toBe or .toEqual?

Same Time, Same Desk: Rails Conference and React Summit

ReactCrashCourse

How to implement a tracking log output location plugin?