Cache-bust app JS/CSS on each deploy
CI / check (push) Successful in 41s
CI / deploy (push) Successful in 18s

Browsers (and a caching proxy in front of production) were holding
onto /js and /css for hours, so a deploy could go unnoticed by an
already-open tab. A boot-time version query string on the entry
script/stylesheet, plus an import map remapping map.js's internal
module imports to the same versioned URLs, fixes that without editing
every JS file's import statements.
This commit is contained in:
randy committed 2026-09-06 21:41:57 +02:00
1 parent 566e80e38d
commit 7083cec36c
2 files changed
+28 -2

No files matched your search

+8
View File
@@ -20,6 +20,14 @@ module Maptool
set :sessions, httponly: true, secure: production?, same_site: :lax,
secret: ENV.fetch("SESSION_SECRET") { SecureRandom.hex(32) }
# Cache-busts /js and /css requests: browsers (and a caching proxy in
# front of production, see docs/deployment.adoc) hang onto static
# assets for hours, so without this a deploy that changes app.js/css
# can go unnoticed by an already-open tab until that cache expires.
# A fresh value every process start (i.e. every deploy, which restarts
# the container) is enough — it doesn't need to survive restarts.
ASSET_VERSION = Time.now.to_i
OFFLINE_PMTILES_PATH = File.join(__dir__, "data", "offline.pmtiles")
GPX_STORE = GpxStore.new(File.join(__dir__, "data", "gpx"))
LIVETRACK_STORE = LiveTrackStore.new(File.join(__dir__, "data", "livetrack.json"))
+20 -2
View File
@@ -5,12 +5,30 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>MapTool</title>
<link rel="stylesheet" href="/vendor/maplibre-gl/maplibre-gl.css">
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/css/style.css?v=<%= ASSET_VERSION %>">
</head>
<body>
<%= yield %>
<script src="/vendor/pmtiles/pmtiles.js"></script>
<script src="/vendor/protomaps-themes-base/protomaps-themes-base.js"></script>
<script type="module" src="/js/map.js"></script>
<%# Vendored libs above don't change between deploys, so they're left
unversioned; app.js's own modules do, and map.js statically imports
them by bare path — an import map remaps those paths to a versioned
URL so editing e.g. gpx.js also busts its cache, without having to
touch every file's import statements. Must come before the module
script below: the importmap has to be parsed first. %>
<script type="importmap">
{
"imports": {
"/js/gnss.js": "/js/gnss.js?v=<%= ASSET_VERSION %>",
"/js/gpx.js": "/js/gpx.js?v=<%= ASSET_VERSION %>",
"/js/icons.js": "/js/icons.js?v=<%= ASSET_VERSION %>",
"/js/livetrack.js": "/js/livetrack.js?v=<%= ASSET_VERSION %>",
"/js/panels.js": "/js/panels.js?v=<%= ASSET_VERSION %>",
"/js/radar.js": "/js/radar.js?v=<%= ASSET_VERSION %>"
}
}
</script>
<script type="module" src="/js/map.js?v=<%= ASSET_VERSION %>"></script>
</body>
</html>