PWA: Warning and cache visible entries

Author: BhasherBEL

internal/http/request/context.go

@@ -140,6 +140,11 @@ func LastForceRefresh(r *http.Request) int64 {
 	return timestamp
 }
 
+// Determine if the request is from a service worker.
+func IsServiceWorker(r *http.Request) bool {
+	return r.Header.Get("Client-Type") == "service-worker"
+}
+
 // ClientIP returns the client IP address stored in the context.
 func ClientIP(r *http.Request) string {
 	return getContextStringValue(r, ClientIPContextKey)

internal/locale/translations/en_US.json

@@ -253,6 +253,7 @@
     "page.offline.title": "Offline Mode",
     "page.offline.message": "You are offline",
     "page.offline.refresh_page": "Try to refresh the page",
+    "page.offline.warning": "You are currently offline. Some features may not be available.",
     "page.webauthn_rename.title": "Rename Passkey",
     "alert.no_shared_entry": "There is no shared entry.",
     "alert.no_bookmark": "There are no starred entries.",

internal/template/templates/common/layout.html

@@ -125,6 +125,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>
 
     {{template "page_header" .}}
 

internal/ui/entry_unread.go

@@ -66,7 +66,7 @@ func (h *handler) showUnreadEntryPage(w http.ResponseWriter, r *http.Request) {
 		prevEntryRoute = route.Path(h.router, "unreadEntry", "entryID", prevEntry.ID)
 	}
 
-	if user.MarkReadOnView {
+	if user.MarkReadOnView && !request.IsServiceWorker(r) {
 		entry.Status = model.EntryStatusRead
 	}
 

internal/ui/static/js/service_worker.js

@@ -3,8 +3,6 @@
 const OFFLINE_VERSION = 2;
 const CACHE_NAME = "offline";
 
-console.log(USE_CACHE);
-
 self.addEventListener("install", (event) => {
   event.waitUntil(
     (async () => {
@@ -64,3 +62,37 @@ self.addEventListener("fetch", (event) => {
     );
   }
 });
+
+self.addEventListener("load", async (event) => {
+  if (
+    navigator.onLine === true &&
+    event.target.location.pathname === "/unread" &&
+    USE_CACHE
+  ) {
+    const cache = await caches.open(CACHE_NAME);
+
+    for (let article of document.getElementsByTagName("article")) {
+      const as = article.getElementsByTagName("a");
+      if (as.length > 0) {
+        const a = as[0];
+        const href = a.href;
+        cache
+          .add(
+            new Request(href, {
+              headers: new Headers({
+                "Client-Type": "service-worker",
+              }),
+            }),
+          )
+          .then(() => {
+            article;
+          });
+      }
+    }
+  }
+});
+
+self.addEventListener("DOMContentLoaded", function () {
+  const offlineFlag = document.getElementById("offline-flag");
+  offlineFlag.classList.toggle("hidden", navigator.onLine);
+});