All working nicely

src/App.ts

@@ -1114,7 +1114,7 @@ export class App {
        document.getElementById("compose-reply-area")!.style.display = "block";
     }
 
-    document.getElementById('compose')!.style.display = 'block';
+    document.getElementById('compose')!.style.display = 'flex';
     document.getElementById('textarea_post')?.focus();
     document.getElementById('compose-dimmer')?.classList.add("compose-dimmer-dimmed");
     document.body.classList.add("no-scroll");
@@ -1594,6 +1594,11 @@ export class App {
     if (!record) return;
     const postData = record.data;
 
+    const authorDiv = document.createElement('div');
+    authorDiv.className = 'compose-reply-author';
+    authorDiv.textContent = `@${postData.author}`;
+    composeReplyArea.appendChild(authorDiv);
+
     const previewDiv = document.createElement('div');
     previewDiv.className = 'compose-reply-preview';
 

src/sw.ts

@@ -38,102 +38,44 @@ self.addEventListener("install", (e: any) => {
 });
 
 
-async function staleWhileRevalidate(event: any) {
-
-  let cache = await caches.open(cacheName);
-
-  let response = await cache.match(event.request);
-
-  if (response) {
-    debugLog ? console.log('Service Worker: Cache hit', event.request.url) : null;
+async function fetchAndUpdateCache(request: Request): Promise<Response> {
+  debugLog && console.log('Service Worker: Fetching', request.url);
+  let networkResponse: Response;
+  try {
+    networkResponse = await fetch(request);
+  } catch (e) {
+    debugLog && console.log('Service Worker: Failed to fetch', e);
+    return new Response('Network error occurred', {
+      status: 404,
+      statusText: 'Cache miss and fetch failed',
+      headers: { 'Content-Type': 'text/plain' }
+    });
   }
-
-  const fetchPromise = (async () => {
-    debugLog ? console.log('Service Worker: Fetching', event.request.url) : null;
-
-    let networkResponse = null;
-    try {
-      networkResponse = await fetch(event.request);
-    } catch (e) {
-      debugLog ? console.log('Service Worker: Failed to fetch', e) : null;
-
-      return new Response('Network error occurred', {
-        status: 404,
-        statusText: 'Cache miss and fetch failed',
-        headers: { 'Content-Type': 'text/plain' }
-      });
-    }
-
-    debugLog ? console.log('Service Worker: Updating cache', event.request.url) : null;
-
-    try {
-      await cache.put(event.request, networkResponse.clone());
-    } catch (e) {
-      debugLog ? console.log('Service Worker: failed to update cache', event.request.url, e) : null;
-
-    }
-
-    debugLog ? console.log('Service Worker: Returning networkResponse', event.request.url) : null;
-    return networkResponse;
-  })();
-
-
-  debugLog ? console.log('Service Worker: Returning return response || fetchPromise', event.request.url) : null;
-  return response || fetchPromise;
-
-  // if (networkResponse) {
-  //   cache.put(event.request, networkResponse.clone())
-  //   return networkResponse;
-  // }
-
-
-
-  // caches.open(cacheName)
-  //   .then(function (cache) {
-  //     return cache.match(event.request)
-  //       .then(function (response) {
-  //         var fetchPromise = fetch(event.request)
-  //           .then(function (networkResponse) {
-  //             cache.put(event.request, networkResponse.clone());
-  //             return networkResponse;
-  //           });
-  //         return response || fetchPromise;
-  //       });
-  //   })
+  debugLog && console.log('Service Worker: Updating cache', request.url);
+  const cache = await caches.open(cacheName);
+  try {
+    await cache.put(request, networkResponse.clone());
+  } catch (e) {
+    debugLog && console.log('Service Worker: failed to update cache', request.url, e);
+  }
+  return networkResponse;
 }
 
-// async function responder(event: any) {
-//   debugLog ? console.log('Fetching', event.request.url) : null;
-
-//   let response = await fetch(event.request);
-
-//   if (!response) {
-//     debugLog ? console.log('Fetch failed, falling back to cache', event.request.url) : null;
-//     let cacheMatch = await caches.match(event.request);
-//     if (!cacheMatch) {
-//       // DUnno what to return here!
-//     }
-//     return cacheMatch;
-//   }
-
-//   if (response.status === 206) {
-//     debugLog ? console.log('Not caching partial content') : null;
-//     return response;
-//   }
-
-//   debugLog ? console.log('Fetch successful, updating cache', event.request.url) : null;
-//   const cache = await caches.open(cacheName);
-//   try {
-//     cache.put(event.request, response.clone()).catch((error) => debugLog ? console.log('failed to cache', event.request, error)) : null;
-//   } catch (e) {
-//     console.log('failed to cache', event.request)
-//   }
-//   return response;
-// }
-
 self.addEventListener('fetch', function (event: any) {
-  event.respondWith(staleWhileRevalidate(event));
-  // event.respondWith(responder(event));
+  const networkFetch = fetchAndUpdateCache(event.request);
+
+  event.respondWith(async function () {
+    const cache = await caches.open(cacheName);
+    const cached = await cache.match(event.request);
+    if (cached) {
+      debugLog && console.log('Service Worker: Cache hit', event.request.url);
+      return cached;
+    }
+    return networkFetch;
+  }());
+
+  // Keep the SW alive until the background cache update finishes
+  event.waitUntil(networkFetch);
 });
 
 addEventListener("message", async (e) => {