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.tags/v1.18.0-rc0
@@ -1,7 +1,7 @@ | |||
export default { | |||
rootDir: 'web_src', | |||
setupFilesAfterEnv: ['jest-extended/all'], | |||
testEnvironment: '@happy-dom/jest-environment', | |||
testEnvironment: 'jest-environment-jsdom', | |||
testMatch: ['<rootDir>/**/*.test.js'], | |||
testTimeout: 20000, | |||
transform: { |
@@ -92,6 +92,8 @@ var ( | |||
// LocalURL is the url for locally running applications to contact Gitea. It always has a '/' suffix | |||
// It maps to ini:"LOCAL_ROOT_URL" | |||
LocalURL string | |||
// AssetVersion holds a opaque value that is used for cache-busting assets | |||
AssetVersion string | |||
// Server settings | |||
Protocol Scheme | |||
@@ -759,6 +761,7 @@ func loadFromConf(allowEmpty bool, extraConfig string) { | |||
} | |||
AbsoluteAssetURL = MakeAbsoluteAssetURL(AppURL, StaticURLPrefix) | |||
AssetVersion = strings.ReplaceAll(AppVer, "+", "~") // make sure the version string is clear (no real escaping is needed) | |||
manifestBytes := MakeManifestData(AppName, AppURL, AbsoluteAssetURL) | |||
ManifestData = `application/json;base64,` + base64.StdEncoding.EncodeToString(manifestBytes) |
@@ -81,6 +81,9 @@ func NewFuncMap() []template.FuncMap { | |||
"AppDomain": func() string { | |||
return setting.Domain | |||
}, | |||
"AssetVersion": func() string { | |||
return setting.AssetVersion | |||
}, | |||
"DisableGravatar": func() bool { | |||
return setting.DisableGravatar | |||
}, | |||
@@ -150,7 +153,6 @@ func NewFuncMap() []template.FuncMap { | |||
"DiffTypeToStr": DiffTypeToStr, | |||
"DiffLineTypeToStr": DiffLineTypeToStr, | |||
"ShortSha": base.ShortSha, | |||
"MD5": base.EncodeMD5, | |||
"ActionContent2Commits": ActionContent2Commits, | |||
"PathEscape": url.PathEscape, | |||
"PathEscapeSegments": util.PathEscapeSegments, |
@@ -46,7 +46,6 @@ | |||
"wrap-ansi": "8.0.1" | |||
}, | |||
"devDependencies": { | |||
"@happy-dom/jest-environment": "6.0.4", | |||
"@stoplight/spectral-cli": "6.5.0", | |||
"eslint": "8.21.0", | |||
"eslint-plugin-import": "2.26.0", | |||
@@ -55,6 +54,7 @@ | |||
"eslint-plugin-unicorn": "43.0.2", | |||
"eslint-plugin-vue": "9.3.0", | |||
"jest": "28.1.3", | |||
"jest-environment-jsdom": "28.1.3", | |||
"jest-extended": "3.0.1", | |||
"markdownlint-cli": "0.32.1", | |||
"postcss-less": "6.0.0", |
@@ -22,7 +22,7 @@ | |||
<script src='https://hcaptcha.com/1/api.js' async></script> | |||
{{end}} | |||
{{end}} | |||
<script src="{{AssetUrlPrefix}}/js/index.js?v={{MD5 AppVer}}" onerror="alert('Failed to load asset files from ' + this.src + ', please make sure the asset files can be accessed and the ROOT_URL setting in app.ini is correct.')"></script> | |||
<script src="{{AssetUrlPrefix}}/js/index.js?v={{AssetVersion}}" onerror="alert('Failed to load asset files from ' + this.src + ', please make sure the asset files can be accessed and the ROOT_URL setting in app.ini is correct.')"></script> | |||
{{template "custom/footer" .}} | |||
</body> | |||
</html> |
@@ -21,7 +21,7 @@ | |||
{{end}} | |||
<link rel="icon" href="{{AssetUrlPrefix}}/img/favicon.svg" type="image/svg+xml"> | |||
<link rel="alternate icon" href="{{AssetUrlPrefix}}/img/favicon.png" type="image/png"> | |||
<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/index.css?v={{MD5 AppVer}}"> | |||
<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/index.css?v={{AssetVersion}}"> | |||
{{template "base/head_script" .}} | |||
<noscript> | |||
<style> | |||
@@ -67,10 +67,10 @@ | |||
<meta property="og:site_name" content="{{AppName}}"> | |||
{{if .IsSigned }} | |||
{{ if ne .SignedUser.Theme "gitea" }} | |||
<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/theme-{{.SignedUser.Theme | PathEscape}}.css?v={{MD5 AppVer}}"> | |||
<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/theme-{{.SignedUser.Theme | PathEscape}}.css?v={{AssetVersion}}"> | |||
{{end}} | |||
{{else if ne DefaultTheme "gitea"}} | |||
<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/theme-{{DefaultTheme | PathEscape}}.css?v={{MD5 AppVer}}"> | |||
<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/theme-{{DefaultTheme | PathEscape}}.css?v={{AssetVersion}}"> | |||
{{end}} | |||
{{template "custom/header" .}} | |||
</head> |
@@ -9,6 +9,7 @@ If you introduce mistakes in it, Gitea JavaScript code wouldn't run correctly. | |||
appVer: '{{AppVer}}', | |||
appUrl: '{{AppUrl}}', | |||
appSubUrl: '{{AppSubUrl}}', | |||
assetVersionEncoded: encodeURIComponent('{{AssetVersion}}'), // will be used in URL construction directly | |||
assetUrlPrefix: '{{AssetUrlPrefix}}', | |||
runModeIsProd: {{.RunModeIsProd}}, | |||
customEmojis: {{CustomEmojis}}, |
@@ -3,11 +3,11 @@ | |||
<head> | |||
<meta charset="UTF-8"> | |||
<title>Gitea API</title> | |||
<link href="{{AssetUrlPrefix}}/css/swagger.css?v={{MD5 AppVer}}" rel="stylesheet"> | |||
<link href="{{AssetUrlPrefix}}/css/swagger.css?v={{AssetVersion}}" rel="stylesheet"> | |||
</head> | |||
<body> | |||
<a class="swagger-back-link" href="{{AppUrl}}">{{svg "octicon-reply"}}{{.locale.Tr "return_to_gitea"}}</a> | |||
<div id="swagger-ui" data-source="{{AppUrl}}swagger.{{.APIJSONVersion}}.json"></div> | |||
<script src="{{AssetUrlPrefix}}/js/swagger.js?v={{MD5 AppVer}}"></script> | |||
<script src="{{AssetUrlPrefix}}/js/swagger.js?v={{AssetVersion}}"></script> | |||
</body> | |||
</html> |
@@ -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); | |||
}); |
@@ -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(); |
@@ -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); | |||
}); |
@@ -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); | |||
} |
@@ -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'); | |||
}); |
@@ -74,7 +74,7 @@ export default { | |||
}, | |||
chunkFilename: ({chunk}) => { | |||
const language = (/monaco.*languages?_.+?_(.+?)_/.exec(chunk.id) || [])[1]; | |||
return language ? `js/monaco-language-${language.toLowerCase()}.js` : `js/[name].js`; | |||
return `js/${language ? `monaco-language-${language.toLowerCase()}` : `[name]`}.[contenthash:8].js`; | |||
}, | |||
}, | |||
optimization: { | |||
@@ -173,14 +173,14 @@ export default { | |||
test: /\.(ttf|woff2?)$/, | |||
type: 'asset/resource', | |||
generator: { | |||
filename: 'fonts/[name][ext]', | |||
filename: 'fonts/[name].[contenthash:8][ext]', | |||
} | |||
}, | |||
{ | |||
test: /\.png$/i, | |||
type: 'asset/resource', | |||
generator: { | |||
filename: 'img/webpack/[name][ext]', | |||
filename: 'img/webpack/[name].[contenthash:8][ext]', | |||
} | |||
}, | |||
], | |||
@@ -189,17 +189,17 @@ export default { | |||
new VueLoaderPlugin(), | |||
new MiniCssExtractPlugin({ | |||
filename: 'css/[name].css', | |||
chunkFilename: 'css/[name].css', | |||
chunkFilename: 'css/[name].[contenthash:8].css', | |||
}), | |||
new SourceMapDevToolPlugin({ | |||
filename: '[file].map', | |||
filename: '[file].[contenthash:8].map', | |||
include: [ | |||
'js/index.js', | |||
'css/index.css', | |||
], | |||
}), | |||
new MonacoWebpackPlugin({ | |||
filename: 'js/monaco-[name].worker.js', | |||
filename: 'js/monaco-[name].[contenthash:8].worker.js', | |||
}), | |||
isProduction ? new LicenseCheckerWebpackPlugin({ | |||
outputFilename: 'js/licenses.txt', |