[Web Cache API][browser][deno] Web Cache API basic examples

cache-method.js

await caches.delete("tmp");
const cache = await caches.open("tmp");

const req1 = new Request("http://example.com/");
const req2 = new Request("http://example.com/", {method: "head"});
const req3 = new Request("http://example.com/", {method: "post"});
const res1 = new Response("hello en-US", {headers: {"Content-Type": "text/plain;charset=utf-8"}});
const res2 = new Response("", {headers: {}});

await cache.put(req1, res1); // cache "http://example.com/ with res1
try {await cache.put(req2, res2);} catch (err) {console.error(err);} // fail becaunse cache only accepts method=GET

console.log(await cache.match(req1)); // clone of res1
console.log(await cache.match(req2)); // undefined
console.log(await cache.match(req2, {ignoreMethod: true})); // res1
console.log(await cache.match(req3, {ignoreMethod: true})); // res1

await caches.delete("tmp");

cache-search.js

await caches.delete("tmp");
const cache = await caches.open("tmp");

const req1 = new Request("http://example.com/?q=en");
const req2 = new Request("http://example.com/?q=ja");
const res1 = new Response("hello en-US", {headers: {"Content-Type": "text/plain;charset=utf-8"}});
const res2 = new Response("hello ja-JP", {headers: {"Content-Type": "text/plain;charset=utf-8"}});

await cache.put(req1, res1); // 1. cache "http://example.com/?q=en" with res1
await cache.put(req2, res2); // 2. cache "http://example.com/?q=ja" with res2

console.log(await cache.match(req1)); // clone of res1
console.log(await cache.match(req2)); // clone of res2
console.log(await cache.match("http://example.com/")); // undefined
console.log(await cache.match("http://example.com/", {ignoreSearch: true})); // clone of res1
console.log(await cache.match("http://example.com/?q=fr", {ignoreSearch: true})); // clone of res1
console.log(await cache.matchAll("http://example.com/", {ignoreSearch: true})); // clones of [res1, res2]

await caches.delete("tmp");

cache-vary-with-multi-cache.js

//NOTE: clear all existing cache in caches; not only "accept-language:..."
for (const key of await caches.keys()) await caches.delete(key);
const cacheEn = await caches.open("accept-language:en-US");
const cacheJa = await caches.open("accept-language:ja-JP");

const req1 = new Request("http://example.com/", {headers: {"Accept-Language": "en-US"}});
const req2 = new Request("http://example.com/", {headers: {"Accept-Language": "ja-JP"}});
const res1 = new Response("hello en-US", {headers: {"Content-Type": "text/plain;charset=utf-8", "Vary": "Accept-Language"}});
const res2 = new Response("hello ja-JP", {headers: {"Content-Type": "text/plain;charset=utf-8", "Vary": "Accept-Language"}});

await cacheEn.put(req1, res1); // 1. cache "http://example.com/" with res1 for Accept-Language: en-US in cacheEn
await cacheJa.put(req2, res2); // 2. cache "http://example.com/" with res2 for Accept-Language: ja-JP in cacheJa

console.log(await cacheEn.match(req2)); // undefined: not hit because Accept-Language is not en-US
console.log(await cacheJa.match(req2)); // clone of res2: hit because Accept-Language is ja-JP

console.log(await (await caches.match(req2)).text()); // clone of res2
console.log(await (await caches.match(req1)).text()); // clone of res1

await caches.delete("accept-language:en-US");
await caches.delete("accept-language:ja-JP");

cache-vary.js

await caches.delete("tmp");
const cache = await caches.open("tmp");

const req1 = new Request("http://example.com/", {headers: {"Accept-Language": "en-US"}});
const req2 = new Request("http://example.com/", {headers: {"Accept-Language": "ja-JP"}});
const res1 = new Response("hello en-US", {headers: {"Content-Type": "text/plain;charset=utf-8", "Vary": "Accept-Language"}});
const res2 = new Response("hello ja-JP", {headers: {"Content-Type": "text/plain;charset=utf-8", "Vary": "Accept-Language"}});

await cache.put(req1, res1); // 1. cache "http://example.com/" with res1 for Accept-Language: en-US
await cache.put(req2, res2); // 2. REPLACE cache "http://example.com/" with res2 for Accept-Language: ja-JP (res1 dropped)

console.log(await cache.match(req1)); // undefined: not hit because Accept-Language is NOT ja-JP
console.log(await cache.match(req2)); // clone of res2: hit because Accept-Language is ja-JP
console.log(await cache.match("http://example.com/")); // undefined: not hit because Accept-Language is not ja-JP
console.log(await cache.match(req1, {ignoreVary: true})); // clone of res2: hit because Accept-Language diffrence is ignored
console.log(await cache.match("http://example.com/", {ignoreVary: true})); // clone of res2: hit because Accept-Language diffrence is ignored

await caches.delete("tmp");

deno-caches.js

// deno-1.28.1 only supports these methods
const cache = await caches.open("tmp");
await cache.put(new Request("http://example.com/"), new Response("Hello"));
console.log(await (await cache.get("http://example.com/")).text());
await cache.delete("http://example.com/");
await caches.delete("tmp");

//[Cache APIs not exist in deno-1.28.1 caches implementation]
// const keys = await caches.keys();
// const trueOrFalse = await caches.has("tmp");
// const res = await caches.match("http://example.com");
// await cache.add("http://example.com"); // cache put with fetch(request)
// await cache.addAll(["http://example.com", "http://example.org"]);
// const [res1, res2] = await cache.matchAll("http://example.com", {ignoreSearch: true});
// const res = await cache.match("http://example.com/?q=fr", {ignoreSearch: true}); // deno ignores match options