Fix cache strategy and warn user

internal/locale/translations/en_US.json

@@ -784,6 +784,7 @@
   "page.offline.message": "You are offline",
   "page.offline.refresh_page": "Try to refresh the page",
   "page.webauthn_rename.title": "Rename Passkey",
+  "page.cache.warning": "You're viewing a cached version. Refresh to see the latest one.",
   "alert.no_shared_entry": "There is no shared entry.",
   "alert.no_bookmark": "There are no starred entries.",
   "alert.no_category": "There is no category.",

internal/template/templates/common/layout.html

@@ -132,7 +132,7 @@
     {{ if .flashErrorMessage }}
         <div role="alert" class="flash-error-message alert alert-error">{{ .flashErrorMessage }}</div>
     {{ end }}
-		<div id="offline-flag" role="alert" aria-live="assertive" aria-atomic="true" class="flash-message alert alert-warning hidden">{{ t "page.offline.warning" }}</div>
+		<div role="alert" aria-live="assertive" aria-atomic="true" class="flash-message alert alert-warning offline-hidden">{{ t "page.cache.warning" }}</div>
 
     {{template "page_header" .}}
 

internal/ui/entry_unread.go

@@ -90,6 +90,7 @@ func (h *handler) showUnreadEntryPage(w http.ResponseWriter, r *http.Request) {
 	view.Set("user", user)
 	view.Set("hasSaveEntry", h.store.HasSaveEntry(user.ID))
 	view.Set("countErrorFeeds", h.store.CountUserFeedsWithErrors(user.ID))
+	view.Set("useCachedVersion", r.Header.Get("X-Cache-Hit") != "")
 
 	// Fetching the counter here avoid to be off by one.
 	view.Set("countUnread", h.store.CountUnreadEntries(user.ID))

internal/ui/static/js/service_worker.js

@@ -23,39 +23,53 @@ self.addEventListener("install", (event) => {
   self.skipWaiting();
 });
 
+async function cacheFirstWithRefresh(request) {
+  const cache = await caches.open(CACHE_NAME);
+
+  const fetchResponsePromise = fetch(request).then(async (networkResponse) => {
+    if (!networkResponse.ok) return networkResponse;
+
+    const contentType = networkResponse.headers.get("Content-Type");
+    if (!contentType || !contentType.includes("text/html")) {
+      cache.put(request, networkResponse.clone());
+      return networkResponse;
+    }
+
+    const text = await networkResponse.clone().text();
+
+    const modifiedHtml = text.replace(/offline-hidden/g, "offline-visibe");
+
+    const clonedResponse = new Response(modifiedHtml, {
+      status: networkResponse.status,
+      statusText: networkResponse.statusText,
+      headers: networkResponse.headers,
+    });
+
+    cache.put(request, clonedResponse.clone());
+    return networkResponse;
+  });
+
+  return (await cache.match(request)) || (await fetchResponsePromise);
+}
+
 self.addEventListener("fetch", (event) => {
+  if (USE_CACHE) {
+    return event.respondWith(cacheFirstWithRefresh(event.request));
+  }
+
   // We proxify requests through fetch() only if we are offline because it's slower.
-  if (
+  if (navigator.onLine === false && event.request.mode === "navigate") {
-    USE_CACHE ||
-    (navigator.onLine === false && event.request.mode === "navigate")
-  ) {
     event.respondWith(
       (async () => {
         try {
           // Always try the network first.
-          const networkResponse = await fetch(event.request);
+          return await fetch(event.request);
-          if (USE_CACHE) {
-            const cache = await caches.open(CACHE_NAME);
-            cache.put(event.request, networkResponse.clone());
-          }
-          return networkResponse;
         } catch (error) {
           // catch is only triggered if an exception is thrown, which is likely
           // due to a network error.
           // If fetch() returns a valid HTTP response with a response code in
           // the 4xx or 5xx range, the catch() will NOT be called.
           const cache = await caches.open(CACHE_NAME);
-
-          if (!USE_CACHE) {
-            return await cache.match(OFFLINE_URL);
-          }
-
-          const cachedResponse = await cache.match(event.request);
-
-          if (cachedResponse) {
-            return cachedResponse;
-          }
-
           return await cache.match(OFFLINE_URL);
         }
       })(),
@@ -91,8 +105,3 @@ self.addEventListener("load", async (event) => {
     }
   }
 });
-
-self.addEventListener("DOMContentLoaded", function () {
-  const offlineFlag = document.getElementById("offline-flag");
-  offlineFlag.classList.toggle("hidden", navigator.onLine);
-});