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,
|
set :sessions, httponly: true, secure: production?, same_site: :lax,
|
||||||
secret: ENV.fetch("SESSION_SECRET") { SecureRandom.hex(32) }
|
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")
|
OFFLINE_PMTILES_PATH = File.join(__dir__, "data", "offline.pmtiles")
|
||||||
GPX_STORE = GpxStore.new(File.join(__dir__, "data", "gpx"))
|
GPX_STORE = GpxStore.new(File.join(__dir__, "data", "gpx"))
|
||||||
LIVETRACK_STORE = LiveTrackStore.new(File.join(__dir__, "data", "livetrack.json"))
|
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">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<title>MapTool</title>
|
<title>MapTool</title>
|
||||||
<link rel="stylesheet" href="/vendor/maplibre-gl/maplibre-gl.css">
|
<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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<%= yield %>
|
<%= yield %>
|
||||||
<script src="/vendor/pmtiles/pmtiles.js"></script>
|
<script src="/vendor/pmtiles/pmtiles.js"></script>
|
||||||
<script src="/vendor/protomaps-themes-base/protomaps-themes-base.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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Reference in new issue
Block a user