Navigation preloads in service workers

  1. The service worker activates.
  2. The service worker fetches the file.
  3. The service worker does something with the response.
  1. The service worker activates while simultaneously requesting the file.
  2. The service worker does something with the response.
if (registration.navigationPreload) {
addEventListener('activate', activateEvent => {
activateEvent.waitUntil(
registration.navigationPreload.enable()
);
});
}
addEventListener('fetch', fetchEvent => {
const request = fetchEvent.request;
if (request.headers.get('Accept').includes('text/html')) {
fetchEvent.respondWith(
fetch(request)
.then( responseFromFetch => {
// maybe cache this response for later here.
return responseFromFetch;
})
.catch( fetchError => {
return caches.match(request)
.then( responseFromCache => {
return responseFromCache || caches.match('/offline');
});
});
);
}
});
fetchEvent.preloadResponse
if (fetchEvent.preloadResponse) {
// do something with fetchEvent.preloadResponse
} else {
// do something with fetch(request)
}
addEventListener('fetch', fetchEvent => {
const request = fetchEvent.request;
if (request.headers.get('Accept').includes('text/html')) {
fetchEvent.respondWith(
if (fetchEvent.preloadResponse) {
fetchEvent.preloadResponse
.then( responseFromPreload => {
// maybe cache this response for later here.
return responseFromPreload;
})
.catch( preloadError => {
return caches.match(request)
.then( responseFromCache => {
return responseFromCache || caches.match('/offline');
});
});
);
} else {
fetchEvent.respondWith(
fetch(request)
.then( responseFromFetch => {
// maybe cache this response for later here.
return responseFromFetch;
})
.catch( fetchError => {
return caches.match(request)
.then( responseFromCache => {
return responseFromCache || caches.match('/offline');
});
});
);
}
});
let retrieve;
if (fetchEvent.preloadResponse) {
retrieve = fetchEvent.preloadResponse;
}
let retrieve;
if (fetchEvent.preloadResponse) {
retrieve = fetchEvent.preloadResponse;
} else {
retrieve = fetch(request);
}
const retrieve = fetchEvent.preloadResponse ? fetchEvent.preloadResponse : fetch(request);
addEventListener('fetch', fetchEvent => {
const request = fetchEvent.request;
if (request.headers.get('Accept').includes('text/html')) {
const retrieve = fetchEvent.preloadResponse ? fetchEvent.preloadResponse : fetch(request);
fetchEvent.respondWith(
retrieve
.then( responseFromRetrieve => {
// maybe cache this response for later here.
return responseFromRetrieve;
})
.catch( fetchError => {
return caches.match(request)
.then( responseFromCache => {
return responseFromCache || caches.match('/offline');
});
});
);
}
});

--

--

--

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

Participate in periodic on-call duties?! Nope. I’m too old for this crap.

How to Import Data from Google Drive into Kaggle Notebook

How To Setup OpenVPN Authentication by Username and Password

Oracle PLM Cloud: One Platform with Endless Possibilities

Objects and Mutability in Python

Asynchronous programming with Java using CompletableFuture

Bromcom and Power BI

Simple Shell: doing the puzzleHow to run the command (ls -l *.c) in my simple Shell:

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

How Storybook helps designers & developers stay in sync

Changelog: Heat Maps 🔥

Why You Need A Design System (part 2)

Let’s introduce Gouache