-
Notifications
You must be signed in to change notification settings - Fork 0
/
debugSW.html
146 lines (135 loc) · 4.3 KB
/
debugSW.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<!doctype HTML><meta charset="UTF-8">
<!--
Goal: test serviceWorker cacheing
SUCCESS:
window.caches.match(url) works
FAIL:
let cache = window.caches.open(CACHE_NAME)
cache.match(url)
Since there is only single cache, SUCCESS and FAIL should be equivalent.
Is there a hidden cache?
-->
<style>
.error {
color: rgb(136, 3, 3);
}
body {
border: 5px solid black;
margin: 0;
padding: 0;
min-height:100vh;
}
#iframes > iframe {
display: inline-block;
background-color: #ddd;
}
</style>
<title>Debug ServiceWorker</title>
<div id="toolbar">
<button onclick="javascript:registerServiceWorker()">Register SW</button><br>
<button onclick="javascript:listCaches()">List all caches</button><br>
<button onclick="javascript:sendMessage('listCache')">List cache</button><br>
<button onclick="javascript:sendMessage('clearCache')">Delete cache</button><br>
<button onclick="javascript:sendMessage('addToCache')">Add to cache</button><input id="addToCachePath" value="icons/512.png"><br>
<button onclick="javascript:loadFromCacheIntoIframe()">Render cached path</button><br>
<button onclick="javascript:cacheMatchLocal('DEBUG_CACHE')">Cache match local DEBUG_CACHE</button>
<button onclick="javascript:cacheMatchLocal()">Cache match local all</button>
<br>
</div>
<div id="iframes"></div>
<div id="log" style="font-family:monospace;margin-top:16px">
</div>
<script>
let timeFormat = Intl.DateTimeFormat('en-us', {
hour12: false, minute: "2-digit", second: "2-digit", fractionalSecondDigits: 3});
function timestamp() {
return timeFormat.format(new Date());
}
function log(msg, skipTimestamp) {
let m = document.createElement("div");
m.innerHTML = `${skipTimestamp ? '' : timestamp()} ${msg}`;
document.querySelector("#log").append(m);
}
function error(msg) {
let m = document.createElement("div");
m.innerText = `${timestamp()} ${msg}`;
m.classList.add("error");
document.querySelector("#log").append(m);
}
</script>
<script>
function loadFromCacheIntoIframe() {
let url = document.querySelector("#addToCachePath").value;
let el = document.createElement("iframe");
if (url.match(/.*png$/)) {
el = document.createElement("img");
el.style.width = "100px";
el.style.height = "100px";
}
el.setAttribute("src", url);
document.querySelector("#iframes").append(el);
}
async function cacheMatchLocal(cacheName) {
let url = document.querySelector("#addToCachePath").value;
let processResponse = response => {
if (response)
log(`got cached response ${response.url}`);
else
log("cache miss");
};
let processErr = err => {
error(err);
}
if (cacheName) {
caches.open(cacheName)
.then(async cache => {
await listCache(cache);
let match = await cache.match(url);
return match;
})
.then(processResponse, processErr)
} else {
caches.match(url).then(processResponse, processErr);
}
}
async function listCaches() {
let keys = await caches.keys();
for (let k of keys)
log("Cache available: "+k);
}
async function listCache(cache) {
let requests = await cache.keys();
log(`List local cache`);
for (let r of requests) {
log(`${r.url}`);
}
}
async function registerServiceWorker() {
log("registerServiceWorker");
if (!('serviceWorker' in navigator))
throw `navigator.serviceWorker not found`;
navigator.serviceWorker.addEventListener("message", ev => {
log(ev.data, true);
});
navigator.serviceWorker.addEventListener('controllerchange', _ => {
log('serviceWorker controllerchange event');
});
return await navigator.serviceWorker.register("./debugSW.js");
}
async function sendMessage(msgType) {
let msg = {type: msgType};
if (msgType == "addToCache") {
msg.path = document.querySelector("#addToCachePath").value;
}
navigator.serviceWorker.controller.postMessage(msg);
}
let RANDOM_PREFIX = String.fromCharCode(Math.round(65+Math.random()*26));
function init() {
log("init " + RANDOM_PREFIX);
const randomColor = Math.floor(Math.random()*16777215).toString(16);
document.body.style.borderColor = `#${randomColor}`;
registerServiceWorker()
.then(listCaches)
}
init();
</script>