ritikrishu

self.addEventListener('fetch', function(event) {
  event.respondWith(
    fetch(event.request).then(function(response) {
        if (response.status === 404) {
          return caches.match('routes/404.html');
        }
        else if(response.status === 404){
          return caches.match('routes/no-mans-land.html')
        }
        return response

ritikrishu

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .catch(_ => {
      //data not found in cache, goto network
        fetch(event.request)
          .then(res => {
            if(res){
              caches.open('cache first category data', cache => cache.put(event.request, res))
              return res

ritikrishu

self.addEventListener('fetch', event => {
  event.respondWith(
    fetch(event.request).catch(_ => {
      return caches.match(event.request)
        .then(data => {
          data.isFromCache = true;
          return data;
        });
    })
  );

ritikrishu

//no network call is made, only local store is looked into
self.addEventListener('fetch', function (event) {
  const requestUrl = new URL(event.request.url);
  if(myItemsToPrefetchRequestArray.contains(requestUrl){
    event.respondWith(
       caches.open(staticCacheName).then(
        cache => cache.match(event.request)
      )
    )
     return;

ritikrishu

const prefix = 'version-dependent';
const version = 1.0.0;
self.addEventListener('activate', function (event) {
  event.waitUntil(
    caches.keys().then(function (cacheNames) {
      return Promise.all(
        cacheNames.filter(function (cacheName) {
          if(cacheName.startsWith(prefix)){
            if(cacheName.endsWith(version){

ritikrishu

const staticResourcesAndPath = [
  '/skeleton',
  'js/main.js',
  'css/main.css',
  'imgs/icon.png',
  'https://fonts.gstatic.com/s/roboto/v15/2UX7WLTfW3W8TclTUvlFyQ.woff',
  'https://fonts.gstatic.com/s/roboto/v15/d-6IYplOFocCacKzxwXSOD8E0i7KZn-EPnyo3HZu7kw.woff'
];
self.addEventListener('install', function (event) {
  event.waitUntil(

ritikrishu

/**
suppose, static caches are categorized as static-imgs-v1, static-js-v1...
*/
const version = 'v2';
const staticPrefix = 'static-'
caches.keys().then(function (cacheNames) {
  return Promise.all(
    cacheNames.filter(function (cacheName) {
      return cacheName.startsWith(staticPrefix) &&
        !cacheName.endsWith(version);

ritikrishu

/**
Suppose, origin has caches named "wittr-static-v8" and "wittr-content-imgs"
*/
console.log(
  caches.delete("wittr-static-v8")
)// <- true


console.log(
  caches.delete("not existing cache")

ritikrishu

/**
Suppose, origin has caches named "wittr-static-v8" and "wittr-content-imgs"
"wittr-content-imgs" contains a request response pair for craig.jpg,
with request url as key i.e. "avatars/craig"
*/
console.log(
  await caches.match("avatars/craig")
)//👇
/**
body: (ReadableStream)

ritikrishu

/**
Suppose CacheStorage these named cache - "name 1", "Some-other-name"
*/
console.log(
  await caches.has("name 1")
)// <- true

console.log(
  await caches.has("name 2")
)// <- false