From f7e672452b9d7f42211715b45058337fa8140fbc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20Guillot?= <f@miniflux.net>
Date: Thu, 7 Aug 2025 19:18:25 -0700
Subject: [PATCH] feat(js): force page reload to prevent stale data from
 bfcache

The unread page may show outdated entries when navigating back from an article, due to Chrome's back/forward cache (bfcache) restoring the page from memory.

Reference: https://web.dev/articles/bfcache
---
 internal/template/templates/common/layout.html | 5 ++++-
 internal/ui/static/js/app.js                   | 7 +++++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/internal/template/templates/common/layout.html b/internal/template/templates/common/layout.html
index 9df69984..91cf060e 100644
--- a/internal/template/templates/common/layout.html
+++ b/internal/template/templates/common/layout.html
@@ -63,7 +63,10 @@
     data-webauthn-login-finish-url="{{ route "webauthnLoginFinish" }}"
     data-webauthn-delete-all-url="{{ route "webauthnDeleteAll" }}"
     {{ end }}
-    {{ if .user }}{{ if not .user.KeyboardShortcuts }}data-disable-keyboard-shortcuts="true"{{ end }}{{ end }}>
+    {{ if .user }}
+        {{ if not .user.KeyboardShortcuts }}data-disable-keyboard-shortcuts="true"{{ end }}
+        data-mark-as-read-on-view="{{ if .user.MarkReadOnView }}true{{ else }}false{{ end }}"
+    {{ end }}>
 
     {{ if .user }}
     <a class="skip-to-content-link" href="#main">{{ t "skip_to_content" }}</a>
diff --git a/internal/ui/static/js/app.js b/internal/ui/static/js/app.js
index 4add4bd8..32b8bc2d 100644
--- a/internal/ui/static/js/app.js
+++ b/internal/ui/static/js/app.js
@@ -1268,3 +1268,10 @@ initializeKeyboardShortcuts();
 initializeTouchHandler();
 initializeClickHandlers();
 initializeServiceWorker();
+
+// Reload the page if it was restored from the back-forward cache and mark entries as read is enabled.
+window.addEventListener("pageshow", (event) => {
+    if (event.persisted && document.body.dataset.markAsReadOnView === "true") {
+        location.reload();
+    }
+});