Mark as read was reloading the whole page

Author: emaori

internal/web/static/app.js

@@ -44,7 +44,8 @@
       credentials: 'same-origin'
     }).then(function (response) {
       if (!response.ok) {
-        throw new Error('unexpected status ' + response.status);
+        showArchiveError(form, button);
+        return;
       }
       button.disabled = false;
       // Every control for this article, not just the one clicked: the reader
@@ -56,13 +57,27 @@
           toggle(other, other.querySelector('button'));
         }
       });
-    }).catch(function () {
-      // Fall back to the ordinary post rather than leaving the reader unsure
-      // whether the click registered. Worst case they get the old behaviour.
-      form.submit();
+    }, function () {
+      showArchiveError(form, button);
     });
   });
 
+  // Once the script has intercepted a submission it must never submit the same
+  // form again: the request may have reached the server even when its response
+  // was lost. Retrying automatically could therefore perform the action twice
+  // and, more visibly, bring back the full-page reload this enhancement avoids.
+  function showArchiveError(form, button) {
+    button.disabled = false;
+    var error = form.querySelector('.action-error');
+    if (!error) {
+      error = document.createElement('span');
+      error.className = 'action-error';
+      error.setAttribute('role', 'alert');
+      form.appendChild(error);
+    }
+    error.textContent = 'Could not update. Try again.';
+  }
+
   // articleOf reads the article's id out of a form's address, which is either
   // /article/{id}/archive or /article/{id}/unarchive.
   function articleOf(form) {

internal/web/static/style.css

@@ -159,6 +159,14 @@ a { color: var(--accent); }
    used to stand a few pixels taller than the links beside it. */
 form.inline { display: flex; margin: 0; }
 
+.action-error {
+  align-self: center;
+  margin-left: 0.5rem;
+  color: #a52f2f;
+  font-family: system-ui, sans-serif;
+  font-size: 0.75rem;
+}
+
 .read-marker {
   margin: 0 0 1rem;
   font-family: system-ui, sans-serif;

internal/web/web.go

@@ -244,11 +244,21 @@ func (s *Server) Handler() http.Handler {
 	// or a prefetching browser must not be able to empty the reading list.
 	mux.HandleFunc("POST /article/{id}/{action}", s.handleArchive)
 
-	mux.Handle("GET /static/", http.FileServerFS(assets))
+	mux.Handle("GET /static/", noCache(http.FileServerFS(assets)))
 
 	return s.setupGate(mux)
 }
 
+// Embedded assets have no useful modification time for HTTP revalidation.
+// Asking browsers to revalidate prevents an old app.js from surviving an image
+// upgrade and silently losing newer progressive enhancements.
+func noCache(next http.Handler) http.Handler {
+	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		w.Header().Set("Cache-Control", "no-cache")
+		next.ServeHTTP(w, r)
+	})
+}
+
 // thousands groups a number with thin spaces, so seven figures can be read
 // without counting digits. A space rather than a comma or a full stop: the
 // reader is Italian and English, and those two disagree about which of them

internal/web/web_test.go

@@ -903,6 +903,23 @@ func TestScriptIsLoadedAndDeferred(t *testing.T) {
 	}
 }
 
+func TestStaticAssetsAreRevalidatedAfterAnUpgrade(t *testing.T) {
+	handler := newTestServer(t, &fakeStore{})
+	req := httptest.NewRequest(http.MethodGet, "/static/app.js", nil)
+	rec := httptest.NewRecorder()
+	handler.ServeHTTP(rec, req)
+
+	if rec.Code != http.StatusOK {
+		t.Fatalf("status = %d, want 200", rec.Code)
+	}
+	if got := rec.Header().Get("Cache-Control"); got != "no-cache" {
+		t.Errorf("Cache-Control = %q, want no-cache", got)
+	}
+	if got := strings.Count(rec.Body.String(), "form.submit()"); got != 1 {
+		t.Errorf("form.submit() count = %d, want only the date-picker submission", got)
+	}
+}
+
 // The reader repeats both controls at the head of the page, so a long article
 // need not be scrolled to its end to be marked read or opened at source.
 func TestReaderRepeatsActionsAtTop(t *testing.T) {