Cache-bust app JS/CSS on each deploy
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:
1 parent
566e80e38d
commit
7083cec36c
2 files changed
+28
-2
No files matched your search
@@ -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
@@ -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>
|
||||
Reference in new issue
Block a user