PWA style tweaks

views/webpage_about.tpl

@@ -62,5 +62,5 @@
     <p>This software is dedicated to the memory of Tom G1PJB, SK, a friend and colleague who sadly passed away around the time I started writing it in Autumn 2025. I was looking forward to showing it to you when it was done.</p>
 </div>
 
-<script src="/js/common.js"></script>
+<script src="/js/common.js?v=1"></script>
 <script>$(document).ready(function() { $("#nav-link-about").addClass("active"); }); <!-- highlight active page in nav --></script>

views/webpage_add_spot.tpl

@@ -68,6 +68,6 @@
 
 </div>
 
-<script src="/js/common.js"></script>
+<script src="/js/common.js?v=1"></script>
-<script src="/js/add-spot.js"></script>
+<script src="/js/add-spot.js?v=1"></script>
 <script>$(document).ready(function() { $("#nav-link-add-spot").addClass("active"); }); <!-- highlight active page in nav --></script>

views/webpage_alerts.tpl

@@ -165,6 +165,6 @@
 
 </div>
 
-<script src="/js/common.js"></script>
+<script src="/js/common.js?v=1"></script>
-<script src="/js/alerts.js"></script>
+<script src="/js/alerts.js?v=1"></script>
 <script>$(document).ready(function() { $("#nav-link-alerts").addClass("active"); }); <!-- highlight active page in nav --></script>

views/webpage_bands.tpl

@@ -128,7 +128,7 @@
 
 </div>
 
-<script src="/js/common.js"></script>
+<script src="/js/common.js?v=1"></script>
-<script src="/js/spotsbandsandmap.js"></script>
+<script src="/js/spotsbandsandmap.js?v=1"></script>
-<script src="/js/bands.js"></script>
+<script src="/js/bands.js?v=1"></script>
 <script>$(document).ready(function() { $("#nav-link-bands").addClass("active"); }); <!-- highlight active page in nav --></script>

views/webpage_base.tpl

@@ -4,8 +4,10 @@
     <meta charset="utf-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
     <meta name="color-scheme" content="light dark">
+    <meta name="theme-color" content="white"/>
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="white-translucent">
 
     <meta property="og:title" content="Spothole"/>
     <meta property="twitter:title" content="Spothole"/>

views/webpage_map.tpl

@@ -146,7 +146,7 @@
 <script src="https://cdn.jsdelivr.net/npm/leaflet.geodesic"></script>
 <script src="https://cdn.jsdelivr.net/npm/@joergdietrich/leaflet.terminator@1.1.0/L.Terminator.min.js"></script>
 
-<script src="/js/common.js"></script>
+<script src="/js/common.js?v=1"></script>
-<script src="/js/spotsbandsandmap.js"></script>
+<script src="/js/spotsbandsandmap.js?v=1"></script>
-<script src="/js/map.js"></script>
+<script src="/js/map.js?v=1"></script>
 <script>$(document).ready(function() { $("#nav-link-map").addClass("active"); }); <!-- highlight active page in nav --></script>

views/webpage_spots.tpl

@@ -208,7 +208,7 @@
 
 </div>
 
-<script src="/js/common.js"></script>
+<script src="/js/common.js?v=1"></script>
-<script src="/js/spotsbandsandmap.js"></script>
+<script src="/js/spotsbandsandmap.js?v=1"></script>
-<script src="/js/spots.js"></script>
+<script src="/js/spots.js?v=1"></script>
 <script>$(document).ready(function() { $("#nav-link-spots").addClass("active"); }); <!-- highlight active page in nav --></script>

views/webpage_status.tpl

@@ -2,6 +2,6 @@
 
 <div id="status-container" class="row row-cols-1 row-cols-md-4 g-4 mt-4"></div>
 
-<script src="/js/common.js"></script>
+<script src="/js/common.js?v=1"></script>
-<script src="/js/status.js"></script>
+<script src="/js/status.js?v=1"></script>
 <script>$(document).ready(function() { $("#nav-link-status").addClass("active"); }); <!-- highlight active page in nav --></script>

webassets/js/common.js

@@ -24,7 +24,6 @@ function loadURLParams() {
 
     // Handle other params
     updateCheckboxFromParam(params, "dark-mode", "darkMode");
-    enableDarkMode($("#darkMode")[0].checked);
     updateSelectFromParam(params, "time-zone", "timeZone"); // Only on Spots and Alerts pages
     updateSelectFromParam(params, "limit", "spots-to-fetch"); // Only on Spots page
     updateSelectFromParam(params, "limit", "alerts-to-fetch"); // Only on Alerts page
@@ -42,6 +41,10 @@ function updateCheckboxFromParam(params, paramName, checkboxID) {
     let v = params.get(paramName);
     if (v != null) {
         $("#" + checkboxID).prop("checked", (v === "true") ? true : false);
+        // Extra check if this is the "dark mode" toggle
+        if (checkboxID == "darkMode") {
+            enableDarkMode((v === "true") ? true : false);
+        }
     }
 }
 
@@ -266,6 +269,10 @@ function latLonForGridSWCornerPlusSize(grid) {
 // Function to set dark mode on or off
 function enableDarkMode(dark) {
     $("html").attr("data-bs-theme", dark ? "dark" : "light");
+    const metaThemeColor = document.querySelector("meta[name=theme-color]");
+    metaThemeColor.setAttribute("content", dark ? "black" : "white");
+    const metaAppleStatusBarStyle = document.querySelector("meta[name=apple-mobile-web-app-status-bar-style]");
+    metaAppleStatusBarStyle.setAttribute("content", dark ? "black-translucent" : "white-translucent");
 }
 
 // Startup function to determine whether to use light or dark mode

webassets/service-worker.js

@@ -6,7 +6,14 @@ const CACHE_URLS = [
   'apidocs/openapi.yml',
   'about',
   'css/style.css',
-  'js/code.js',
+  'js/add-spot.js',
+  'js/alerts.js',
+  'js/bands.js',
+  'js/common.js',
+  'js/map.js',
+  'js/spots.js',
+  'js/spotsbandsandmap.js',
+  'js/status.js',
   'img/logo.png',
   'img/favicon.ico',
   'img/icon-32.png',