JavaScript Cache API Snippets

/*
 * From David Walsh's Cache API Article
 * https://davidwalsh.name/cache
 * More on the Cache API: https://developer.mozilla.org/en-US/docs/Web/API/Cache
 */

//
// Detecting the cache API
//
// To detect if the browser supports the Cache API...
//
// NOTE: Cache API is not supported at all by Internet Explorer,
// however the API is supported in Microsoft Edge.
var isCacheSupported = (function() {
    return "caches" in window;
})();

//
// Creating a Cache
//
// Creating a cache requires a caches.open call with a cache name. The
// caches.open call returns a Promise and the cache object that was either
// created or existed before the open call.
caches.open("test-cache").then(function(cache) {
    // Cache is created and accessible
});

//
// Adding to Cache
//
// You can think of a cache as an array of Request objects which act as keys to
// their responses which are stored by the browser. Simple addition to cache is
// happens via two main methods: add and addAll. You can provide these methods a
// string for the URL that should be fetched and cached or a Request object.
//
// NOTE: You can learn more about Request objects by reading my fetch API post
// (https://davidwalsh.name/fetch).
//
// To batch add URLs to cache, you can use the addAll method:
caches.open("test-cache").then(function(cache) {
    // The `addAll()` method accepts an array of URLs whose URLs and responses
    // should be cached. addAll returns a Promise.
    cache.addAll(["/", "/images/logo.png"]).then(function() {
        // Cached!
    });
});

// To add a single URL, use the `add()` method:
caches.open("test-cache").then(function(cache) {
    cache.add("/page/1"); // "/page/1" URL will be fetched and cached!
});

// add can also accept a custom Request:
caches.open("test-cache").then(function(cache) {
    cache.add(
        new Request("/page/1", {
            /* request options */
        })
    );
});

// Similar to add is put whereby you can add a URL and its Response object:
fetch("/page/1").then(function(response) {
    return caches.open("test-cache").then(function(cache) {
        return cache.put("/page/1", response);
    });
});

//
// Exploring Cache
//
// To view requests that have already been cached, you can use the individual
// cache's keys method to retrieve an array of cached Request objects:
caches.open("test-cache").then(function(cache) {
    cache.keys().then(function(cachedRequests) {
        console.log(cachedRequests); // [Request, Request]
    });
});

/*
Request {
  bodyUsed: false
  credentials: "omit"
  headers: Headers
  integrity: ""
  method: "GET"
  mode: "no-cors"
  redirect: "follow"
  referrer: ""
  url: "https://fullhost.tld/images/logo.png"
}
*/

// If you'd like to view the response of a cached Request, you can do so by
// using cache.match or cache.matchAll:
caches.open("test-cache").then(function(cache) {
    cache.match("/page/1").then(function(matchedResponse) {
        console.log(matchedResponse);
    });
});

/*
Response {
  body: (...),
  bodyUsed: false,
  headers: Headers,
  ok: true,
  status: 200,
  statusText: "OK",
  type: "basic",
  url: "https://davidwalsh.name/page/1"
}
*/

//
// Removing a Cached Request
//
// To remove a request from cache, use the cache's delete method:
caches.open("test-cache").then(function(cache) {
    cache.delete("/page/1"); // The cache will no longer contain /page/1!
});

//
// Getting Existing Cache Names
//
// To get the names of existing caches, use caches.keys:
caches.keys().then(function(cacheKeys) {
    console.log(cacheKeys); // ex: ["test-cache"]
    // `window.caches.keys()` again returns a promise (https://davidwalsh.name/tutorials/promises).
});

//
// Deleting A Cache
//
// Deleting a cache is simple once you have cache key name:
caches.delete("test-cache").then(function() {
    console.log("Cache successfully deleted!");
});

// You'll often delete a cache when you're replacing with a new one (to trigger
// re-installation of a new service worker):

// Assuming `CACHE_NAME` is the newest name
// Time to clean up the old!
var CACHE_NAME = "version-8";

// ...

caches.keys().then(function(cacheNames) {
    return Promise.all(
        cacheNames.map(function(cacheName) {
            if (cacheName != CACHE_NAME) {
                return caches.delete(cacheName);
            }
        })
    );
});

// You'll want to keep these snippets in your toolbox for when you look to
// become a service worker expert.  Chrome and Firefox now have service worker
// support so you'll be seeing many more sites/apps available (reliably) offline
// and loading at much faster rates.  Enjoy!