Enable contenthash in filename for dynamic assets (#20813)

This should solve the main problem of dynamic assets getting stale after
a version upgrade. Everything not affected will use query-string based
cache busting, which includes files loaded via HTML or worker scripts.

web_src/js/features/notification.js

@@ -1,6 +1,6 @@
 import $ from 'jquery';
 
-const {appSubUrl, csrfToken, notificationSettings} = window.config;
+const {appSubUrl, csrfToken, notificationSettings, assetVersionEncoded} = window.config;
 let notificationSequenceNumber = 0;
 
 export function initNotificationsTable() {
@@ -57,7 +57,7 @@ export function initNotificationCount() {
 
   if (notificationSettings.EventSourceUpdateTime > 0 && window.EventSource && window.SharedWorker) {
     // Try to connect to the event source via the shared worker first
-    const worker = new SharedWorker(`${__webpack_public_path__}js/eventsource.sharedworker.js`, 'notification-worker');
+    const worker = new SharedWorker(`${__webpack_public_path__}js/eventsource.sharedworker.js?v=${assetVersionEncoded}`, 'notification-worker');
     worker.addEventListener('error', (event) => {
       console.error('worker error', event);
     });

web_src/js/features/serviceworker.js

@@ -1,8 +1,8 @@
-import {joinPaths} from '../utils.js';
+import {joinPaths, parseUrl} from '../utils.js';
 
-const {useServiceWorker, assetUrlPrefix, appVer} = window.config;
+const {useServiceWorker, assetUrlPrefix, appVer, assetVersionEncoded} = window.config;
 const cachePrefix = 'static-cache-v'; // actual version is set in the service worker script
-const workerAssetPath = joinPaths(assetUrlPrefix, 'serviceworker.js');
+const workerUrl = `${joinPaths(assetUrlPrefix, 'serviceworker.js')}?v=${assetVersionEncoded}`;
 
 async function unregisterAll() {
   for (const registration of await navigator.serviceWorker.getRegistrations()) {
@@ -12,8 +12,9 @@ async function unregisterAll() {
 
 async function unregisterOtherWorkers() {
   for (const registration of await navigator.serviceWorker.getRegistrations()) {
-    const scriptURL = registration.active?.scriptURL || '';
-    if (!scriptURL.endsWith(workerAssetPath)) await registration.unregister();
+    const scriptPath = parseUrl(registration.active?.scriptURL || '').pathname;
+    const workerPath = parseUrl(workerUrl).pathname;
+    if (scriptPath !== workerPath) await registration.unregister();
   }
 }
 
@@ -43,7 +44,7 @@ export default async function initServiceWorker() {
     try {
       // the spec strictly requires it to be same-origin so the AssetUrlPrefix should contain AppSubUrl
       await checkCacheValidity();
-      await navigator.serviceWorker.register(workerAssetPath);
+      await navigator.serviceWorker.register(workerUrl);
     } catch (err) {
       console.error(err);
       await invalidateCache();

web_src/js/features/stopwatch.js

@@ -2,7 +2,7 @@ import $ from 'jquery';
 import prettyMilliseconds from 'pretty-ms';
 import {createTippy} from '../modules/tippy.js';
 
-const {appSubUrl, csrfToken, notificationSettings, enableTimeTracking} = window.config;
+const {appSubUrl, csrfToken, notificationSettings, enableTimeTracking, assetVersionEncoded} = window.config;
 
 export function initStopwatch() {
   if (!enableTimeTracking) {
@@ -42,7 +42,7 @@ export function initStopwatch() {
   // if the browser supports EventSource and SharedWorker, use it instead of the periodic poller
   if (notificationSettings.EventSourceUpdateTime > 0 && window.EventSource && window.SharedWorker) {
     // Try to connect to the event source via the shared worker first
-    const worker = new SharedWorker(`${__webpack_public_path__}js/eventsource.sharedworker.js`, 'notification-worker');
+    const worker = new SharedWorker(`${__webpack_public_path__}js/eventsource.sharedworker.js?v=${assetVersionEncoded}`, 'notification-worker');
     worker.addEventListener('error', (event) => {
       console.error('worker error', event);
     });

web_src/js/utils.js

@@ -97,3 +97,8 @@ export function prettyNumber(num, locale = 'en-US') {
   const {format} = new Intl.NumberFormat(locale);
   return format(num);
 }
+
+// parse a URL, either relative '/path' or absolute 'https://localhost/path'
+export function parseUrl(str) {
+  return new URL(str, str.startsWith('http') ? undefined : window.location.origin);
+}

web_src/js/utils.test.js

@@ -1,5 +1,6 @@
 import {
-  basename, extname, isObject, uniq, stripTags, joinPaths, parseIssueHref, strSubMatch, prettyNumber,
+  basename, extname, isObject, uniq, stripTags, joinPaths, parseIssueHref, strSubMatch,
+  prettyNumber, parseUrl,
 } from './utils.js';
 
 test('basename', () => {
@@ -108,3 +109,15 @@ test('prettyNumber', () => {
   expect(prettyNumber(12345678, 'be-BE')).toEqual('12 345 678');
   expect(prettyNumber(12345678, 'hi-IN')).toEqual('1,23,45,678');
 });
+
+test('parseUrl', () => {
+  expect(parseUrl('').pathname).toEqual('/');
+  expect(parseUrl('/path').pathname).toEqual('/path');
+  expect(parseUrl('/path?search').pathname).toEqual('/path');
+  expect(parseUrl('/path?search').search).toEqual('?search');
+  expect(parseUrl('/path?search#hash').hash).toEqual('#hash');
+  expect(parseUrl('https://localhost/path').pathname).toEqual('/path');
+  expect(parseUrl('https://localhost/path?search').pathname).toEqual('/path');
+  expect(parseUrl('https://localhost/path?search').search).toEqual('?search');
+  expect(parseUrl('https://localhost/path?search#hash').hash).toEqual('#hash');
+});