sw/index.html

<html>

<head>
	<title>Cache playground</title>
	<script>
function Log(o)
{
    document.getElementById("log").innerText += o + "\r\n";
    console.log(o);
}
	
function Setup()
{
window.fetch("100.png").then(function (r) {window.resp100 = r;});
window.caches.open("v1").then(function (cache) {window.cachev1 = cache;});
}

function Put()
{
    cachev1.put("100c.png", resp100).then(function(){Log("Put completed!")});
}

function Has()
{
    window.caches.has("test").then(function(r){Log(r)}, function(e){Log(e)});
}

function Add()
{
    cachev1.add("100.png");
}

function AddAll()
{
    cachev1.addAll(["100.png","100.png"]);
}

function Test()
{
    var cacheName = "v1";

    var entries = [
        { request: "r1", response: new Response("R1")},
        { request: "r2", response: new Response("R2")},
        { request: "r3", response: new Response("R3")},
    ];

    caches.delete(cacheName).then(function() {
        return caches.has(cacheName);
    }).then(function(hasCache) {
        Log(`has("${cacheName}") = ${hasCache} (expected false)`);
        return caches.open(cacheName);
    }).then(function(cache){
        var putPromises = new Array();
        for (var entry in entries)
        {
            putPromises.push(cache.put(entries[entry].request, entries[entry].response));
        }
        var putsDone = Promise.all(putPromises);
        putsDone.then(function(){
            for (var entry in entries)
            {
                ((cacheName, cache, entry) => {
                    cache.match(entry.request).then(function(response){
                        response.text().then(function(content){
                            Log(entry.request + " content: " + content);
                        });
                    });
                    
                    cache.matchAll(entry.request).then(function(responses){
                        for (var response in responses){
                            responses[response].text().then(function(content){
                                Log(entry.request + " matchAll content: " + content);
                            });
                        }
                    });
                })(cacheName, cache, entries[entry]);
            }
            cache.keys().then(function(requests){
                for (var request in requests)
                {
                    Log("url: " + requests[request].url);
                }
            });
            cache.matchAll().then(function(responses){
                for (var response in responses)
                {
                    responses[response].text().then(function(content){
                        Log("response: " + content);
                    });
                }
            });
        });
        return putsDone;
    }).then(function(){
        return caches.match(entries[0].request);
    }).then(function(response){
        response.text().then(function(content){
            Log(entries[0].request + " content: " + content);
        });
        return caches.has(cacheName);
    }).then(function(hasCache){
        Log(`has("${cacheName}") = ${hasCache} (expected true)`);
        return caches.delete(cacheName);
    }).then(function(hadCache){
        Log(`delete(${cacheName}) = ${hadCache} (expected true)`);
    });
}
function cacheNameDelete()
{
    caches.delete('lowercase');
    caches.delete('has\000_in_the_name');
}
function cacheNameSetup()
{
    caches.open('lowercase');
    caches.open('has\000_in_the_name');
}
function cacheHas(name)
{
    caches.has(name).then(function(result){Log(result + " => " + name);});
}
function cachePutTest()
{
    window.fetch("3mb.dat").then(function (r) {
        var cacheResponse = r.clone();
        cachev1.put("test.dat", cacheResponse);
        r.text();
        Log("done");
    });
}

</script>
</head>

<body>
	Cache playground
	<button onclick="Setup();">Setup</button>
	<button onclick="cachePutTest();">cachePutTest</button>
	<button onclick="Put();">Put</button>
	<button onclick="Has();">Has</button>
	<button onclick="Test();">Test</button>
	<button onclick="Add();">Add</button>
	<button onclick="AddAll();">AddAll</button>
	<button onclick="cacheNameSetup();">cacheNameSetup</button>
	<button onclick="cacheNameDelete();">cacheNameDelete</button>
	<button onclick="cacheHas('lowercase');">cacheHas(lowercase)</button>
	<button onclick="cacheHas('Lowercase');">cacheHas(Lowercase)</button>
	<button onclick="cacheHas('has\000_in_the_name');">cacheHas(has0_in_the_name)</button>
	<button onclick="cacheHas('has_in_the_name');">cacheHas(has_in_the_name)</button>
	<div id='log'></div>
</body>

</html>