8 Feb 2024

Changes to client-side storage cache mechanics.

1) ADDED CACHE_VER to settings.
2) Added LIB-CCache.php
3) Updated LIB-Install.php > Run CCache->init() on installation end.
4) CB-worker.js - Removed storage cache, moved to PAGE-cbwork.js instead.
5) Updated TEMPLATE-top.php - Load PAGE-cbwork.js
6) Renamed assets/head-storage-boxx.webp to banner.webp
7) Page settings - Will not show "CACHE_VER"

TLDR - Call $_CORE->CCache->init() to "force push update". All clients will rebuild cached asset files.

Author: code-boxx

admin/pages/ADM-settings.php

@@ -7,13 +7,13 @@
 require PATH_PAGES . "TEMPLATE-ADM-top.php"; ?>
 <h3 class="mb-3">SYSTEM SETTINGS</h3>
 <form id="set-list" onsubmit="return save()">
-  <?php foreach ($settings as $o) { ?>
+  <?php foreach ($settings as $o) { if ($o["setting_name"]!="CACHE_VER") { ?>
   <div class="form-floating mb-3">
     <input type="text" class="form-control" required
            name="<?=$o["setting_name"]?>" value="<?=$o["setting_value"]?>">
     <label><?=$o["setting_description"]?></label>
   </div>
-  <?php } ?>
+  <?php }} ?>
 
   <button type="submit" class="my-1 btn btn-primary d-flex-inline">
     <i class="ico-sm icon-floppy-disk"></i> Save Settings

admin/pages/ADM-users-list.php

@@ -7,8 +7,10 @@
 <div class="d-flex align-items-center border p-2">
   <div class="flex-grow-1">
     <strong><?=$u["user_name"]?></strong><br>
-    <small><?=USR_LVL[$u["user_level"]]?></small><br>
-    <small><?=$u["user_email"]?></small>
+    <small>
+      <span class="badge bg-secondary">level</span> <?=USR_LVL[$u["user_level"]]?><br>
+      <span class="badge bg-secondary">email</span> <?=$u["user_email"]?>
+    </small>
   </div>
   <div class="dropdown">
     <button type="button" class="btn btn-primary p-3 ico-sm icon-arrow-right" type="button" data-bs-toggle="dropdown"></button>

core/CB-worker.js

@@ -1,44 +1,11 @@
-// (A) CREATE/INSTALL CACHE
-self.addEventListener("install", evt => {
-  self.skipWaiting();
-  evt.waitUntil(
-    caches.open("CoreBoxx")
-    .then(cache => cache.addAll([
-      // (A1) BOOTSTRAP
-      "assets/bootstrap.bundle.min.js",
-      "assets/bootstrap.bundle.min.js.map",
-      "assets/bootstrap.min.css",
-      "assets/bootstrap.min.css.map",
-      // (A2) ICONS + IMAGES
-      "assets/ico-512.png",
-      "assets/favicon.png",
-      // (A3) COMMON INTERFACE
-      "assets/icomoon.woff",
-      "assets/PAGE-cb.js",
-      "assets/PAGE-cb.css",
-      "CB-manifest.json"
-      // @TODO - ADD MORE OF YOUR OWN TO CACHE
-    ]))
-    .catch(err => console.error(err))
-  );
-});
-
-// (B) CLAIM CONTROL INSTANTLY
-self.addEventListener("activate", evt => self.clients.claim());
-
-// (C) LOAD FROM CACHE FIRST, FALLBACK TO NETWORK IF NOT FOUND
-self.addEventListener("fetch", evt => evt.respondWith(
-  caches.match(evt.request).then(res => res || fetch(evt.request))
+// (A) LOAD FROM CACHE FIRST, FALLBACK TO NETWORK IF NOT FOUND
+self.addEventListener("fetch", e => e.respondWith(
+  caches.match(e.request).then(r => r || fetch(e.request))
 ));
 
-/* (C) LOAD WITH NETWORK FIRST, FALLBACK TO CACHE IF OFFLINE
-self.addEventListener("fetch", evt => evt.respondWith(
-  fetch(evt.request).catch(() => caches.match(evt.request))
-)); */
-
-// (D) LISTEN TO PUSH NOTIFICATIONS
-self.addEventListener("push", evt => {
-  const data = evt.data.json();
+// (B) LISTEN TO PUSH NOTIFICATIONS
+self.addEventListener("push", e => {
+  const data = e.data.json();
   self.registration.showNotification(data.title, {
     body: data.body,
     icon: data.icon,

core/assets/PAGE-cbwork.js

@@ -0,0 +1,21 @@
+if ("serviceWorker" in navigator) {
+  // (A) REGISTER SERVICE WORKER
+  navigator.serviceWorker.register(cbhost.base+"CB-worker.js", {scope: cbhost.basepath});
+
+  // (B) UPDATE CACHE
+  if (cbcache.s > cbcache.c) {
+    // (B1) GET FILES LIST FROM SERVER
+    fetch(cbhost.base+"CB-cache-files.json")
+    .then(r => r.json())
+    .then(async f => {
+      // (B2) DELETE OLD CACHE
+      if (await caches.has(cbcache.n)) {
+        await caches.delete(cbcache.n);
+      }
+
+      // (B3) UPDATE CACHE
+      (await caches.open(cbcache.n)).addAll(f);
+      localStorage.setItem("CBCACHE", cbcache.s);
+    });
+  }
+}

core/assets/head-core-boxx.webp renamed to core/assets/banner.webp

@@ -0,0 +1,22 @@
+<?php
+class CCache extends Core {
+  // (A) REGENERATE CLIENT STORAGE CACHE LIST
+  function init () : void {
+    // (A1) GET FILES TO STORE IN CACHE
+    $all = [HOST_ASSETS . "favicon.png", HOST_ASSETS . "ico-512.png"];
+    if (file_exists(PATH_ASSETS . "banner.webp")) {
+      $all[] = HOST_ASSETS."banner.webp";
+    }
+    if (file_exists(PATH_ASSETS . "users.webp")) {
+      $all[] = HOST_ASSETS."users.webp";
+    }
+    foreach (glob(PATH_ASSETS . "*.{js,css,map,woff}", GLOB_BRACE) as $f) {
+      $all[] = HOST_ASSETS . basename($f);
+    }
+    file_put_contents(PATH_BASE . "CB-cache-files.json", json_encode($all));
+
+    // (A2) UPDATE DATABASE TIMESTAMP
+    $this->Core->load("DB");
+    $this->DB->update("settings", ["setting_value"], "`setting_name`=?", [strtotime("now"), "CACHE_VER"]);
+  }
+}

core/lib/LIB-CCache.php

@@ -227,15 +227,19 @@ function F () {
 
   // (PHASE G) CLEAN UP
   function G () {
-    // (G1) SWAP OUT INDEX
+    // (G1) GENERATE LIST OF ASSET FILES FOR CLIENTS TO CACHE
+    $this->Core->load("CCache");
+    $this->CCache->init();
+
+    // (G2) SWAP OUT INDEX
     file_put_contents(PATH_BASE . "index.php", <<<EOF
     <?php
     require __DIR__ . DIRECTORY_SEPARATOR . "lib" . DIRECTORY_SEPARATOR . "CORE-Go.php";
     \$_CORE->load("Route");
     \$_CORE->Route->run();
     EOF);
 
-    // (G2) INSTALL COMPLETE!
+    // (G3) INSTALL COMPLETE!
     if (defined("I_RELOAD")) { $this->Core->redirect(); }
     exit("OK");
   }

core/lib/LIB-Install.php

@@ -7,6 +7,7 @@ CREATE TABLE `settings` (
 
 INSERT INTO `settings` (`setting_name`, `setting_description`, `setting_value`, `setting_group`) VALUES
 ('APP_VER', 'App version', '1', 0),
+('CACHE_VER', 'Client storage cache timestamp', 0, 1),
 ('EMAIL_FROM', 'System email from', 'sys@site.com', 1),
 ('PAGE_PER', 'Number of entries per page', '20', 1),
 ('D_LONG', 'MYSQL date format (long)', '%e %M %Y', 1),

core/lib/SQL-CoreBoxx-1.sql

@@ -27,9 +27,10 @@
 
     <!-- (A4) SERVICE WORKER + HOST -->
     <script>
-    if ("serviceWorker" in navigator) { navigator.serviceWorker.register("<?=HOST_BASE?>CB-worker.js", {scope: "<?=HOST_BASE_PATH?>"}); }
-    var cbhost={base:"<?=HOST_BASE?>",basepath:"<?=HOST_BASE_PATH?>",api:"<?=HOST_API_BASE?>",assets:"<?=HOST_ASSETS?>"};
+    const cbhost={base:"<?=HOST_BASE?>",basepath:"<?=HOST_BASE_PATH?>",api:"<?=HOST_API_BASE?>",assets:"<?=HOST_ASSETS?>"},
+    cbcache={n:"CBCACHE",s:<?=CACHE_VER?>,c:localStorage.getItem("CBCACHE") || 0};
     </script>
+    <script src="<?=HOST_ASSETS?>PAGE-cbwork.js"></script>
 
     <!-- (A5) LIBRARIES & SCRIPTS -->
     <!-- https://getbootstrap.com/ -->

core/pages/TEMPLATE-top.php

@@ -19,7 +19,7 @@
   </div>
 
   <div class="form-floating mb-4">
-    <input type="text" class="form-control" id="push_img" required value="<?=HOST_ASSETS?>head-core-boxx.webp">
+    <input type="text" class="form-control" id="push_img" required value="<?=HOST_ASSETS?>banner.webp">
     <label>Cover Image</label>
   </div>
 

web push/pages/ADM-push.php

@@ -27,7 +27,7 @@
   </div>
 
   <div class="form-floating mb-4">
-    <input type="text" required class="form-control" name="image" value="<?=HOST_ASSETS?>head-core-boxx.webp">
+    <input type="text" required class="form-control" name="image" value="<?=HOST_ASSETS?>banner.webp">
     <label class="form-label">Image</label>
   </div>