mirror of
https://github.com/go-gitea/gitea.git
synced 2024-12-04 14:46:57 -05:00
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:
parent
0a9ed54abb
commit
56220515fc
@ -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: {
|
||||||
|
@ -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)
|
||||||
|
@ -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
1827
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -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",
|
||||||
|
@ -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>
|
||||||
|
@ -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>
|
||||||
|
@ -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}},
|
||||||
|
@ -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>
|
||||||
|
@ -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);
|
||||||
});
|
});
|
||||||
|
@ -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();
|
||||||
|
@ -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);
|
||||||
});
|
});
|
||||||
|
@ -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);
|
||||||
|
}
|
||||||
|
@ -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');
|
||||||
|
});
|
||||||
|
@ -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',
|
||||||
|
Loading…
Reference in New Issue
Block a user