chore(playgroud): tweak service worker

Author: nihgwu

playground/public/sw.js

@@ -5,16 +5,31 @@ self.addEventListener('install', function (event) {
 })
 
 self.addEventListener('activate', function (event) {
-  event.waitUntil(self.clients.claim())
+  const expectedCacheNames = ['esm.sh']
+  event.waitUntil(
+    self.clients.claim().then(() =>
+      caches.keys().then(function (cacheNames) {
+        return Promise.all(
+          cacheNames.map(function (cacheName) {
+            if (!expectedCacheNames.includes(cacheName)) {
+              return caches.delete(cacheName)
+            }
+          })
+        )
+      })
+    )
+  )
 })
 
-self.addEventListener('fetch', async (event) => {
+self.addEventListener('fetch', function (event) {
   const url = event.request.url
   if (!url.startsWith('http') || event.request.method !== 'GET') return
 
   event.respondWith(
     (async function () {
-      const cache = await caches.open('v1')
+      const cachedResponse = await caches.match(event.request)
+      if (cachedResponse) return cachedResponse
+
       if (shouldPatchReact(url)) {
         return createScriptResponse(reactScript)
       }
@@ -25,11 +40,19 @@ self.addEventListener('fetch', async (event) => {
         return createScriptResponse(reactDOMScript)
       }
 
-      const cachedResponse = await cache.match(event.request)
-      if (cachedResponse) return cachedResponse
-
       const networkResponse = await fetch(event.request)
-      event.waitUntil(cache.put(event.request, networkResponse.clone()))
+      if (networkResponse.ok) {
+        const clonedResponse = networkResponse.clone()
+        if (/^https:\/\/(cdn.)?esm.sh\//.test(url)) {
+          caches
+            .open('esm.sh')
+            .then((cache) => cache.put(event.request, clonedResponse))
+        } else {
+          caches
+            .open('web')
+            .then((cache) => cache.put(event.request, clonedResponse))
+        }
+      }
       return networkResponse
     })()
   )

playground/src/App.module.css

@@ -16,6 +16,7 @@
 
 .EditorPane {
   all: unset;
+  position: relative;
   box-sizing: border-box;
   display: flex;
   border-right: var(--border);