mirror of
https://codeberg.org/forgejo/forgejo.git
synced 2024-12-25 01:39:31 +00:00
Move serviceworker to workbox and fix SSE interference
Instead of statically hardcoding every frontend asset, this uses a type-based approach to cache all js,css and manifest.json requests. This also fixes the issue that the service worker was interfering with EventSource because it was unconditionally handling all requests which this new implementation doesn't. Fixes: https://github.com/go-gitea/gitea/issues/11092 Fixes: https://github.com/go-gitea/gitea/issues/7372
This commit is contained in:
silverwind
parent
460bc32c71
commit
99d9b0f728
22
package-lock.json
generated
22
package-lock.json
generated
|
|
@ -14857,6 +14857,28 @@
|
|||
"resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.2.tgz",
|
||||
"integrity": "sha1-t5Zpu0LstAn4PVg8rVLKF+qhZD8="
|
||||
},
|
||||
"workbox-core": {
|
||||
"version": "5.1.3",
|
||||
"resolved": "https://registry.npmjs.org/workbox-core/-/workbox-core-5.1.3.tgz",
|
||||
"integrity": "sha512-TFSIPxxciX9sFaj0FDiohBeIKpwMcCyNduydi9i3LChItcndDS6TJpErxybv8aBWeCMraXt33TWtF6kKuIObNw=="
|
||||
},
|
||||
"workbox-routing": {
|
||||
"version": "5.1.3",
|
||||
"resolved": "https://registry.npmjs.org/workbox-routing/-/workbox-routing-5.1.3.tgz",
|
||||
"integrity": "sha512-F+sAp9Iy3lVl3BEG+pzXWVq4AftzjiFpHDaZ4Kf4vLoBoKQE0hIHet4zE5DpHqYdyw+Udhp4wrfHamX6PN6z1Q==",
|
||||
"requires": {
|
||||
"workbox-core": "^5.1.3"
|
||||
}
|
||||
},
|
||||
"workbox-strategies": {
|
||||
"version": "5.1.3",
|
||||
"resolved": "https://registry.npmjs.org/workbox-strategies/-/workbox-strategies-5.1.3.tgz",
|
||||
"integrity": "sha512-wiXHfmOKnWABeIVW+/ye0e00+2CcS5y7SIj2f9zcdy2ZLEbcOf7B+yOl5OrWpBGlTUwRjIYhV++ZqiKm3Dc+8w==",
|
||||
"requires": {
|
||||
"workbox-core": "^5.1.3",
|
||||
"workbox-routing": "^5.1.3"
|
||||
}
|
||||
},
|
||||
"worker-farm": {
|
||||
"version": "1.7.0",
|
||||
"resolved": "https://registry.npmjs.org/worker-farm/-/worker-farm-1.7.0.tgz",
|
||||
|
|
|
|||
|
|
@ -48,6 +48,8 @@
|
|||
"webpack": "4.43.0",
|
||||
"webpack-cli": "3.3.11",
|
||||
"webpack-fix-style-only-entries": "0.4.0",
|
||||
"workbox-routing": "5.1.3",
|
||||
"workbox-strategies": "5.1.3",
|
||||
"worker-loader": "2.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
|
|||
|
|
@ -1048,10 +1048,6 @@ func RegisterRoutes(m *macaron.Macaron) {
|
|||
ctx.HTML(200, "pwa/manifest_json")
|
||||
})
|
||||
|
||||
m.Get("/serviceworker.js", templates.JSRenderer(), func(ctx *context.Context) {
|
||||
ctx.HTML(200, "pwa/serviceworker_js")
|
||||
})
|
||||
|
||||
// prometheus metrics endpoint
|
||||
if setting.Metrics.Enabled {
|
||||
c := metrics.NewCollector()
|
||||
|
|
|
|||
|
|
@ -6,30 +6,6 @@
|
|||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<title>{{if .Title}}{{.Title | RenderEmojiPlain}} - {{end}} {{if .Repository.Name}}{{.Repository.Name}} - {{end}}{{AppName}} </title>
|
||||
<link rel="manifest" href="{{AppSubUrl}}/manifest.json" crossorigin="use-credentials">
|
||||
{{if UseServiceWorker}}
|
||||
<script>
|
||||
if ('serviceWorker' in navigator) {
|
||||
navigator.serviceWorker.register('{{AppSubUrl}}/serviceworker.js').then(function(registration) {
|
||||
// Registration was successful
|
||||
console.info('ServiceWorker registration successful with scope: ', registration.scope);
|
||||
}, function(err) {
|
||||
// registration failed :(
|
||||
console.info('ServiceWorker registration failed: ', err);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
{{else}}
|
||||
<script>
|
||||
if ('serviceWorker' in navigator) {
|
||||
navigator.serviceWorker.getRegistrations().then(function(registrations) {
|
||||
registrations.forEach(function(registration) {
|
||||
registration.unregister();
|
||||
console.info('ServiceWorker unregistered');
|
||||
});
|
||||
});
|
||||
}
|
||||
</script>
|
||||
{{end}}
|
||||
<meta name="theme-color" content="{{ThemeColorMetaTag}}">
|
||||
<meta name="author" content="{{if .Repository}}{{.Owner.Name}}{{else}}{{MetaAuthor}}{{end}}" />
|
||||
<meta name="description" content="{{if .Repository}}{{.Repository.Name}}{{if .Repository.Description}} - {{.Repository.Description}}{{end}}{{else}}{{MetaDescription}}{{end}}" />
|
||||
|
|
@ -86,6 +62,7 @@
|
|||
window.config = {
|
||||
AppSubUrl: '{{AppSubUrl}}',
|
||||
StaticUrlPrefix: '{{StaticUrlPrefix}}',
|
||||
UseServiceWorker: {{UseServiceWorker}},
|
||||
csrf: '{{.CsrfToken}}',
|
||||
HighlightJS: {{if .RequireHighlightJS}}true{{else}}false{{end}},
|
||||
Minicolors: {{if .RequireMinicolors}}true{{else}}false{{end}},
|
||||
|
|
|
|||
|
|
@ -1,83 +0,0 @@
|
|||
var STATIC_CACHE = 'static-cache-v1';
|
||||
var urlsToCache = [
|
||||
// js
|
||||
'{{StaticUrlPrefix}}/fomantic/semantic.min.js?v={{MD5 AppVer}}',
|
||||
'{{StaticUrlPrefix}}/js/clipboard.js',
|
||||
'{{StaticUrlPrefix}}/js/gitgraph.js',
|
||||
'{{StaticUrlPrefix}}/js/highlight.js',
|
||||
'{{StaticUrlPrefix}}/js/index.js?v={{MD5 AppVer}}',
|
||||
'{{StaticUrlPrefix}}/js/jquery.js?v={{MD5 AppVer}}',
|
||||
'{{StaticUrlPrefix}}/js/swagger.js?v={{MD5 AppVer}}',
|
||||
'{{StaticUrlPrefix}}/js/dropzone.js',
|
||||
'{{StaticUrlPrefix}}/js/datetimepicker.js',
|
||||
'{{StaticUrlPrefix}}/js/tribute.js',
|
||||
'{{StaticUrlPrefix}}/vendor/plugins/codemirror/addon/mode/loadmode.js',
|
||||
'{{StaticUrlPrefix}}/vendor/plugins/codemirror/mode/meta.js',
|
||||
'{{StaticUrlPrefix}}/vendor/plugins/jquery.minicolors/jquery.minicolors.min.js',
|
||||
'{{StaticUrlPrefix}}/vendor/plugins/simplemde/simplemde.min.js',
|
||||
|
||||
// css
|
||||
'{{StaticUrlPrefix}}/css/index.css?v={{MD5 AppVer}}',
|
||||
'{{StaticUrlPrefix}}/css/swagger.css?v={{MD5 AppVer}}',
|
||||
'{{StaticUrlPrefix}}/css/dropzone.css',
|
||||
'{{StaticUrlPrefix}}/css/datetimepicker.css',
|
||||
'{{StaticUrlPrefix}}/fomantic/semantic.min.css?v={{MD5 AppVer}}',
|
||||
'{{StaticUrlPrefix}}/vendor/assets/font-awesome/css/font-awesome.min.css',
|
||||
'{{StaticUrlPrefix}}/vendor/plugins/jquery.minicolors/jquery.minicolors.css',
|
||||
'{{StaticUrlPrefix}}/vendor/plugins/simplemde/simplemde.min.css',
|
||||
{{if .IsSigned }}
|
||||
{{ if ne .SignedUser.Theme "gitea" }}
|
||||
'{{StaticUrlPrefix}}/css/theme-{{.SignedUser.Theme}}.css?v={{MD5 AppVer}}',
|
||||
{{end}}
|
||||
{{else if ne DefaultTheme "gitea"}}
|
||||
'{{StaticUrlPrefix}}/css/theme-{{DefaultTheme}}.css?v={{MD5 AppVer}}',
|
||||
{{end}}
|
||||
|
||||
// img
|
||||
'{{StaticUrlPrefix}}/img/gitea-sm.png',
|
||||
'{{StaticUrlPrefix}}/img/gitea-lg.png',
|
||||
|
||||
// svg
|
||||
'{{StaticUrlPrefix}}/img/svg/icons.svg',
|
||||
|
||||
// fonts
|
||||
'{{StaticUrlPrefix}}/fomantic/themes/default/assets/fonts/icons.woff2',
|
||||
'{{StaticUrlPrefix}}/vendor/assets/roboto-fonts/roboto-v20-latin-ext_cyrillic-ext_latin_greek_vietnamese_cyrillic_greek-ext-regular.woff2',
|
||||
'{{StaticUrlPrefix}}/vendor/assets/roboto-fonts/roboto-v20-latin-ext_cyrillic-ext_latin_greek_vietnamese_cyrillic_greek-ext-italic.woff2',
|
||||
'{{StaticUrlPrefix}}/vendor/assets/roboto-fonts/roboto-v20-latin-ext_cyrillic-ext_latin_greek_vietnamese_cyrillic_greek-ext-700.woff2',
|
||||
'{{StaticUrlPrefix}}/vendor/assets/roboto-fonts/roboto-v20-latin-ext_cyrillic-ext_latin_greek_vietnamese_cyrillic_greek-ext-700italic.woff2',
|
||||
|
||||
// monaco
|
||||
'{{StaticUrlPrefix}}/css/monaco.css',
|
||||
'{{StaticUrlPrefix}}/fonts/codicon.ttf',
|
||||
'{{StaticUrlPrefix}}/js/monaco-css.worker.js',
|
||||
'{{StaticUrlPrefix}}/js/monaco-editor.worker.js',
|
||||
'{{StaticUrlPrefix}}/js/monaco-html.worker.js',
|
||||
'{{StaticUrlPrefix}}/js/monaco-json.worker.js',
|
||||
'{{StaticUrlPrefix}}/js/monaco.js',
|
||||
'{{StaticUrlPrefix}}/js/monaco-ts.worker.js'
|
||||
];
|
||||
|
||||
self.addEventListener('install', function (event) {
|
||||
// Perform install steps
|
||||
event.waitUntil(
|
||||
caches.open(STATIC_CACHE)
|
||||
.then(function (cache) {
|
||||
return cache.addAll(urlsToCache);
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
self.addEventListener('fetch', function (event) {
|
||||
event.respondWith(
|
||||
caches.match(event.request)
|
||||
.then(function (response) {
|
||||
// Cache hit - return response
|
||||
if (response) {
|
||||
return response;
|
||||
}
|
||||
return fetch(event.request);
|
||||
}
|
||||
)
|
||||
);
|
||||
});
|
||||
24
web_src/js/features/serviceworker.js
Normal file
24
web_src/js/features/serviceworker.js
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
const {UseServiceWorker, AppSubUrl} = window.config;
|
||||
|
||||
async function unregister() {
|
||||
for (const registration of await navigator.serviceWorker.getRegistrations()) {
|
||||
const serviceWorker = registration.active;
|
||||
if (!serviceWorker) continue;
|
||||
registration.unregister();
|
||||
}
|
||||
}
|
||||
|
||||
export default async function initServiceWorker() {
|
||||
if (!('serviceWorker' in navigator)) return;
|
||||
|
||||
if (UseServiceWorker) {
|
||||
try {
|
||||
navigator.serviceWorker.register(`${AppSubUrl}/serviceworker.js`);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
await unregister();
|
||||
}
|
||||
} else {
|
||||
await unregister();
|
||||
}
|
||||
}
|
||||
|
|
@ -14,6 +14,7 @@ import initGitGraph from './features/gitgraph.js';
|
|||
import initClipboard from './features/clipboard.js';
|
||||
import initUserHeatmap from './features/userheatmap.js';
|
||||
import initDateTimePicker from './features/datetimepicker.js';
|
||||
import initServiceWorker from './features/serviceworker.js';
|
||||
import attachTribute from './features/tribute.js';
|
||||
import createDropzone from './features/dropzone.js';
|
||||
import highlight from './features/highlight.js';
|
||||
|
|
@ -2475,6 +2476,7 @@ $(document).ready(async () => {
|
|||
initGitGraph(),
|
||||
initClipboard(),
|
||||
initUserHeatmap(),
|
||||
initServiceWorker(),
|
||||
]);
|
||||
});
|
||||
|
||||
|
|
|
|||
14
web_src/js/serviceworker.js
Normal file
14
web_src/js/serviceworker.js
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
import {registerRoute} from 'workbox-routing';
|
||||
import {StaleWhileRevalidate} from 'workbox-strategies';
|
||||
|
||||
const cachedDestinations = new Set([
|
||||
'manifest',
|
||||
'script',
|
||||
'style',
|
||||
'worker',
|
||||
]);
|
||||
|
||||
registerRoute(
|
||||
({request}) => cachedDestinations.has(request.destination),
|
||||
new StaleWhileRevalidate({cacheName: 'static-cache-v2'}),
|
||||
);
|
||||
|
|
@ -35,13 +35,20 @@ module.exports = {
|
|||
jquery: [
|
||||
resolve(__dirname, 'web_src/js/jquery.js'),
|
||||
],
|
||||
serviceworker: [
|
||||
resolve(__dirname, 'web_src/js/serviceworker.js'),
|
||||
],
|
||||
icons: glob('node_modules/@primer/octicons/build/svg/**/*.svg'),
|
||||
...themes,
|
||||
},
|
||||
devtool: false,
|
||||
output: {
|
||||
path: resolve(__dirname, 'public'),
|
||||
filename: 'js/[name].js',
|
||||
filename: ({chunk}) => {
|
||||
// serviceworker can only manage assets below it's script path so we
|
||||
// have to put it in / instead of /js/
|
||||
return chunk.id === 'serviceworker' ? '[name].js' : 'js/[name].js';
|
||||
},
|
||||
chunkFilename: 'js/[name].js',
|
||||
},
|
||||
optimization: {
|
||||
|
|
|
|||
Loading…
Reference in a new issue