static/js: Add update check

In the case of heavy caching attempt a naive site update check with voluntary
refresh. Not fully idempotent?

3 files changed, 62 insertions, 0 deletions

diff --git a/static/icons/feather/refresh-cw.svg b/static/icons/feather/refresh-cw.svg
new file mode 100644
index 0000000..1773a2f
--- /dev/null
+++ b/static/icons/feather/refresh-cw.svg
@@ -0,0 +1,15 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <polyline points="23 4 23 10 17 10" />
+  <polyline points="1 20 1 14 7 14" />
+  <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15" />
+</svg>
diff --git a/static/js/index.ts b/static/js/index.ts
index e00907b..6de3166 100644
--- a/static/js/index.ts
+++ b/static/js/index.ts
@@ -1,4 +1,5 @@
 import "./pager.ts";
+import "./refresh.ts";
 import "./plumber.ts";
 import "./instantpage.ts";
 import "./contextmenu.ts";
diff --git a/static/js/refresh.ts b/static/js/refresh.ts
new file mode 100644
index 0000000..5d44854
--- /dev/null
+++ b/static/js/refresh.ts
@@ -0,0 +1,46 @@
+(function () {
+  function check(url, method, callback) {
+    const http = new XMLHttpRequest();
+    http.onreadystatechange = function () {
+      if (http.readyState === 4 && http.status === 200) {
+        if (callback) callback(http);
+      }
+    };
+    http.open(method, url);
+    http.setRequestHeader("Pragma", "no-cache");
+    http.setRequestHeader("Cache-Control", "no-cache");
+    http.send();
+  }
+
+  function update(id) {
+    const url = self.location.href;
+    check(url, "HEAD", function (request) {
+      const local = document.querySelector('meta[name="last-modified"]').content;
+      const remote = request.getResponseHeader("last-modified") || local;
+      const localHour = local.substring(0, local.length - 9);
+      const remoteHour = remote.substring(0, remote.length - 9);
+      const modified = localHour !== remoteHour;
+
+      if (modified) {
+        const indicator = document.querySelector("a[data-update]");
+        check(url, "GET");
+        indicator.href = url;
+        indicator.removeAttribute("id");
+        indicator.dataset.update = "refresh";
+        clearInterval(id);
+      }
+      console.log("R: " + remote);
+      console.log("L: " + local);
+      console.log("M: " + modified);
+    });
+  }
+
+  self.addEventListener("load", function () {
+    let meta = document.querySelector('meta[name="refresh"]');
+    if (meta) meta = document.querySelector('meta[name="refresh"]').content;
+    const interval = meta || 3600000;
+    const monitor = setInterval(function () {
+      if (navigator.onLine) update(monitor);
+    }, interval);
+  });
+})();