Adding eject button

index.js

@@ -42,5 +42,8 @@ document.getElementById('forward').addEventListener('click', function() {
   console.log("clicked forward")
   window.history.forward()
 })
+document.getElementById('eject').addEventListener('click', function() {
+  fetch('/_/unload').then(() => window.location.reload())
+})
 
 

public/index.html

@@ -58,6 +58,9 @@
         <!-- <a href="/_/unload">clear</a> -->
       </div>
       <input type="file" id="file" name="file" accept="image/png"></input>
+      <button id="eject" aria-label="eject"><svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8">
+  <path d="M4 0l-4 5h8l-4-5zm-4 6v2h8v-2h-8z" />
+</svg></button>
     </div>
     <iframe id="frame" src="zipindex.html"></iframe>
     <script src="/_/bundle.js" charset="utf-8"></script>

sw.js

@@ -122,7 +122,14 @@ self.addEventListener('fetch', function(event) {
   if (parsedUrl.pathname === '/_/unload') {
     console.log("!! unloading !!")
     zip = null
-    event.respondWith(new Response(null, { status: 302, headers: { Location: '/' }}))
+    const req = new Request(self.location.origin + '/_/powfile.png')
+    event.respondWith(
+      caches.open(version)
+        .then(cache => cache.delete(req))
+        // safari doesn't like getting a 302 back for some reason
+        //.then(() => new Response(null, { status: 302, headers: { Location: '/' }}))
+        .then(() => new Response(null, { status: 200 }))
+    )
   } else if (parsedUrl.pathname === '/zipindex.html') {
     // special url for the zip index
     event.respondWith(getFromZip(event.request.url.replace('/zipindex.html', '/index.html')))