finn/forgejo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Enable contenthash in filename for dynamic assets (#20813)

Browse source 
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.
This commit is contained in:
silverwind 2022-08-23 14:58:04 +02:00 • committed by GitHub
parent 0a9ed54abb
commit 56220515fc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 1102 additions and 802 deletions
Download patch file Download diff file Expand all files Collapse all files

4
web_src/js/features/notification.js
View file

@ -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);
});

13
web_src/js/features/serviceworker.js
View file

@ -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();

4
web_src/js/features/stopwatch.js
View file

@ -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);
});

5
web_src/js/utils.js
View file

@ -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);
}

15
web_src/js/utils.test.js
View file

@ -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');
});