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.
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

View file

@ -1,7 +1,7 @@
export default { export default {
rootDir: 'web_src', rootDir: 'web_src',
setupFilesAfterEnv: ['jest-extended/all'], setupFilesAfterEnv: ['jest-extended/all'],
testEnvironment: '@happy-dom/jest-environment', testEnvironment: 'jest-environment-jsdom',
testMatch: ['<rootDir>/**/*.test.js'], testMatch: ['<rootDir>/**/*.test.js'],
testTimeout: 20000, testTimeout: 20000,
transform: { transform: {

View file

@ -92,6 +92,8 @@ var (
// LocalURL is the url for locally running applications to contact Gitea. It always has a '/' suffix // LocalURL is the url for locally running applications to contact Gitea. It always has a '/' suffix
// It maps to ini:"LOCAL_ROOT_URL" // It maps to ini:"LOCAL_ROOT_URL"
LocalURL string LocalURL string
// AssetVersion holds a opaque value that is used for cache-busting assets
AssetVersion string
// Server settings // Server settings
Protocol Scheme Protocol Scheme
@ -759,6 +761,7 @@ func loadFromConf(allowEmpty bool, extraConfig string) {
} }
AbsoluteAssetURL = MakeAbsoluteAssetURL(AppURL, StaticURLPrefix) 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) manifestBytes := MakeManifestData(AppName, AppURL, AbsoluteAssetURL)
ManifestData = `application/json;base64,` + base64.StdEncoding.EncodeToString(manifestBytes) ManifestData = `application/json;base64,` + base64.StdEncoding.EncodeToString(manifestBytes)

View file

@ -81,6 +81,9 @@ func NewFuncMap() []template.FuncMap {
"AppDomain": func() string { "AppDomain": func() string {
return setting.Domain return setting.Domain
}, },
"AssetVersion": func() string {
return setting.AssetVersion
},
"DisableGravatar": func() bool { "DisableGravatar": func() bool {
return setting.DisableGravatar return setting.DisableGravatar
}, },
@ -150,7 +153,6 @@ func NewFuncMap() []template.FuncMap {
"DiffTypeToStr": DiffTypeToStr, "DiffTypeToStr": DiffTypeToStr,
"DiffLineTypeToStr": DiffLineTypeToStr, "DiffLineTypeToStr": DiffLineTypeToStr,
"ShortSha": base.ShortSha, "ShortSha": base.ShortSha,
"MD5": base.EncodeMD5,
"ActionContent2Commits": ActionContent2Commits, "ActionContent2Commits": ActionContent2Commits,
"PathEscape": url.PathEscape, "PathEscape": url.PathEscape,
"PathEscapeSegments": util.PathEscapeSegments, "PathEscapeSegments": util.PathEscapeSegments,

1827
package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -46,7 +46,6 @@
"wrap-ansi": "8.0.1" "wrap-ansi": "8.0.1"
}, },
"devDependencies": { "devDependencies": {
"@happy-dom/jest-environment": "6.0.4",
"@stoplight/spectral-cli": "6.5.0", "@stoplight/spectral-cli": "6.5.0",
"eslint": "8.21.0", "eslint": "8.21.0",
"eslint-plugin-import": "2.26.0", "eslint-plugin-import": "2.26.0",
@ -55,6 +54,7 @@
"eslint-plugin-unicorn": "43.0.2", "eslint-plugin-unicorn": "43.0.2",
"eslint-plugin-vue": "9.3.0", "eslint-plugin-vue": "9.3.0",
"jest": "28.1.3", "jest": "28.1.3",
"jest-environment-jsdom": "28.1.3",
"jest-extended": "3.0.1", "jest-extended": "3.0.1",
"markdownlint-cli": "0.32.1", "markdownlint-cli": "0.32.1",
"postcss-less": "6.0.0", "postcss-less": "6.0.0",

View file

@ -22,7 +22,7 @@
<script src='https://hcaptcha.com/1/api.js' async></script> <script src='https://hcaptcha.com/1/api.js' async></script>
{{end}} {{end}}
{{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" .}} {{template "custom/footer" .}}
</body> </body>
</html> </html>

View file

@ -21,7 +21,7 @@
{{end}} {{end}}
<link rel="icon" href="{{AssetUrlPrefix}}/img/favicon.svg" type="image/svg+xml"> <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="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" .}} {{template "base/head_script" .}}
<noscript> <noscript>
<style> <style>
@ -67,10 +67,10 @@
<meta property="og:site_name" content="{{AppName}}"> <meta property="og:site_name" content="{{AppName}}">
{{if .IsSigned }} {{if .IsSigned }}
{{ if ne .SignedUser.Theme "gitea" }} {{ 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}} {{end}}
{{else if ne DefaultTheme "gitea"}} {{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}} {{end}}
{{template "custom/header" .}} {{template "custom/header" .}}
</head> </head>

View file

@ -9,6 +9,7 @@ If you introduce mistakes in it, Gitea JavaScript code wouldn't run correctly.
appVer: '{{AppVer}}', appVer: '{{AppVer}}',
appUrl: '{{AppUrl}}', appUrl: '{{AppUrl}}',
appSubUrl: '{{AppSubUrl}}', appSubUrl: '{{AppSubUrl}}',
assetVersionEncoded: encodeURIComponent('{{AssetVersion}}'), // will be used in URL construction directly
assetUrlPrefix: '{{AssetUrlPrefix}}', assetUrlPrefix: '{{AssetUrlPrefix}}',
runModeIsProd: {{.RunModeIsProd}}, runModeIsProd: {{.RunModeIsProd}},
customEmojis: {{CustomEmojis}}, customEmojis: {{CustomEmojis}},

View file

@ -3,11 +3,11 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Gitea API</title> <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> </head>
<body> <body>
<a class="swagger-back-link" href="{{AppUrl}}">{{svg "octicon-reply"}}{{.locale.Tr "return_to_gitea"}}</a> <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> <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> </body>
</html> </html>

View file

@ -1,6 +1,6 @@
import $ from 'jquery'; import $ from 'jquery';
const {appSubUrl, csrfToken, notificationSettings} = window.config; const {appSubUrl, csrfToken, notificationSettings, assetVersionEncoded} = window.config;
let notificationSequenceNumber = 0; let notificationSequenceNumber = 0;
export function initNotificationsTable() { export function initNotificationsTable() {
@ -57,7 +57,7 @@ export function initNotificationCount() {
if (notificationSettings.EventSourceUpdateTime > 0 && window.EventSource && window.SharedWorker) { if (notificationSettings.EventSourceUpdateTime > 0 && window.EventSource && window.SharedWorker) {
// Try to connect to the event source via the shared worker first // 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) => { worker.addEventListener('error', (event) => {
console.error('worker error', event); console.error('worker error', event);
}); });

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 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() { async function unregisterAll() {
for (const registration of await navigator.serviceWorker.getRegistrations()) { for (const registration of await navigator.serviceWorker.getRegistrations()) {
@ -12,8 +12,9 @@ async function unregisterAll() {
async function unregisterOtherWorkers() { async function unregisterOtherWorkers() {
for (const registration of await navigator.serviceWorker.getRegistrations()) { for (const registration of await navigator.serviceWorker.getRegistrations()) {
const scriptURL = registration.active?.scriptURL || ''; const scriptPath = parseUrl(registration.active?.scriptURL || '').pathname;
if (!scriptURL.endsWith(workerAssetPath)) await registration.unregister(); const workerPath = parseUrl(workerUrl).pathname;
if (scriptPath !== workerPath) await registration.unregister();
} }
} }
@ -43,7 +44,7 @@ export default async function initServiceWorker() {
try { try {
// the spec strictly requires it to be same-origin so the AssetUrlPrefix should contain AppSubUrl // the spec strictly requires it to be same-origin so the AssetUrlPrefix should contain AppSubUrl
await checkCacheValidity(); await checkCacheValidity();
await navigator.serviceWorker.register(workerAssetPath); await navigator.serviceWorker.register(workerUrl);
} catch (err) { } catch (err) {
console.error(err); console.error(err);
await invalidateCache(); await invalidateCache();

View file

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

View file

@ -97,3 +97,8 @@ export function prettyNumber(num, locale = 'en-US') {
const {format} = new Intl.NumberFormat(locale); const {format} = new Intl.NumberFormat(locale);
return format(num); 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);
}

View file

@ -1,5 +1,6 @@
import { import {
basename, extname, isObject, uniq, stripTags, joinPaths, parseIssueHref, strSubMatch, prettyNumber, basename, extname, isObject, uniq, stripTags, joinPaths, parseIssueHref, strSubMatch,
prettyNumber, parseUrl,
} from './utils.js'; } from './utils.js';
test('basename', () => { test('basename', () => {
@ -108,3 +109,15 @@ test('prettyNumber', () => {
expect(prettyNumber(12345678, 'be-BE')).toEqual('12 345 678'); expect(prettyNumber(12345678, 'be-BE')).toEqual('12 345 678');
expect(prettyNumber(12345678, 'hi-IN')).toEqual('1,23,45,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');
});

View file

@ -74,7 +74,7 @@ export default {
}, },
chunkFilename: ({chunk}) => { chunkFilename: ({chunk}) => {
const language = (/monaco.*languages?_.+?_(.+?)_/.exec(chunk.id) || [])[1]; 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: { optimization: {
@ -173,14 +173,14 @@ export default {
test: /\.(ttf|woff2?)$/, test: /\.(ttf|woff2?)$/,
type: 'asset/resource', type: 'asset/resource',
generator: { generator: {
filename: 'fonts/[name][ext]', filename: 'fonts/[name].[contenthash:8][ext]',
} }
}, },
{ {
test: /\.png$/i, test: /\.png$/i,
type: 'asset/resource', type: 'asset/resource',
generator: { generator: {
filename: 'img/webpack/[name][ext]', filename: 'img/webpack/[name].[contenthash:8][ext]',
} }
}, },
], ],
@ -189,17 +189,17 @@ export default {
new VueLoaderPlugin(), new VueLoaderPlugin(),
new MiniCssExtractPlugin({ new MiniCssExtractPlugin({
filename: 'css/[name].css', filename: 'css/[name].css',
chunkFilename: 'css/[name].css', chunkFilename: 'css/[name].[contenthash:8].css',
}), }),
new SourceMapDevToolPlugin({ new SourceMapDevToolPlugin({
filename: '[file].map', filename: '[file].[contenthash:8].map',
include: [ include: [
'js/index.js', 'js/index.js',
'css/index.css', 'css/index.css',
], ],
}), }),
new MonacoWebpackPlugin({ new MonacoWebpackPlugin({
filename: 'js/monaco-[name].worker.js', filename: 'js/monaco-[name].[contenthash:8].worker.js',
}), }),
isProduction ? new LicenseCheckerWebpackPlugin({ isProduction ? new LicenseCheckerWebpackPlugin({
outputFilename: 'js/licenses.txt', outputFilename: 'js/licenses.txt',