mirror of
https://codeberg.org/forgejo/forgejo.git
synced 2024-12-22 12:54:53 -05:00
Move serviceworker to workbox and fix SSE interference (#11538)
* 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
* rethrow error instead of logging
* await .register
* Revert "rethrow error instead of logging"
This reverts commit 043162ba1f
.
* improve comment
* remove JSRenderer
* add version-based cache invalidation
* refactor
* more refactor
* remove comment
* rename item to fit cache name
Co-authored-by: guillep2k <18600385+guillep2k@users.noreply.github.com>
This commit is contained in:
parent
f6f49700cc
commit
88fe7b5a72
12 changed files with 96 additions and 133 deletions
|
@ -48,6 +48,7 @@ rules:
|
||||||
no-cond-assign: [2, except-parens]
|
no-cond-assign: [2, except-parens]
|
||||||
no-console: [1, {allow: [info, warn, error]}]
|
no-console: [1, {allow: [info, warn, error]}]
|
||||||
no-continue: [0]
|
no-continue: [0]
|
||||||
|
no-empty: [2, {allowEmptyCatch: true}]
|
||||||
no-eq-null: [2]
|
no-eq-null: [2]
|
||||||
no-mixed-operators: [0]
|
no-mixed-operators: [0]
|
||||||
no-multi-assign: [0]
|
no-multi-assign: [0]
|
||||||
|
|
|
@ -48,18 +48,6 @@ func JSONRenderer() macaron.Handler {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
// JSRenderer implements the macaron handler for serving JS templates.
|
|
||||||
func JSRenderer() macaron.Handler {
|
|
||||||
return macaron.Renderer(macaron.RenderOptions{
|
|
||||||
Funcs: NewFuncMap(),
|
|
||||||
Directory: path.Join(setting.StaticRootPath, "templates"),
|
|
||||||
AppendDirectories: []string{
|
|
||||||
path.Join(setting.CustomPath, "templates"),
|
|
||||||
},
|
|
||||||
HTMLContentType: "application/javascript",
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// Mailer provides the templates required for sending notification mails.
|
// Mailer provides the templates required for sending notification mails.
|
||||||
func Mailer() (*texttmpl.Template, *template.Template) {
|
func Mailer() (*texttmpl.Template, *template.Template) {
|
||||||
for _, funcs := range NewTextFuncMap() {
|
for _, funcs := range NewTextFuncMap() {
|
||||||
|
|
|
@ -132,15 +132,6 @@ func JSONRenderer() macaron.Handler {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
// JSRenderer implements the macaron handler for serving JS templates.
|
|
||||||
func JSRenderer() macaron.Handler {
|
|
||||||
return macaron.Renderer(macaron.RenderOptions{
|
|
||||||
Funcs: NewFuncMap(),
|
|
||||||
TemplateFileSystem: NewTemplateFileSystem(),
|
|
||||||
HTMLContentType: "application/javascript",
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// Mailer provides the templates required for sending notification mails.
|
// Mailer provides the templates required for sending notification mails.
|
||||||
func Mailer() (*texttmpl.Template, *template.Template) {
|
func Mailer() (*texttmpl.Template, *template.Template) {
|
||||||
for _, funcs := range NewTextFuncMap() {
|
for _, funcs := range NewTextFuncMap() {
|
||||||
|
|
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",
|
"resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.2.tgz",
|
||||||
"integrity": "sha1-t5Zpu0LstAn4PVg8rVLKF+qhZD8="
|
"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": {
|
"worker-farm": {
|
||||||
"version": "1.7.0",
|
"version": "1.7.0",
|
||||||
"resolved": "https://registry.npmjs.org/worker-farm/-/worker-farm-1.7.0.tgz",
|
"resolved": "https://registry.npmjs.org/worker-farm/-/worker-farm-1.7.0.tgz",
|
||||||
|
|
|
@ -48,6 +48,8 @@
|
||||||
"webpack": "4.43.0",
|
"webpack": "4.43.0",
|
||||||
"webpack-cli": "3.3.11",
|
"webpack-cli": "3.3.11",
|
||||||
"webpack-fix-style-only-entries": "0.4.0",
|
"webpack-fix-style-only-entries": "0.4.0",
|
||||||
|
"workbox-routing": "5.1.3",
|
||||||
|
"workbox-strategies": "5.1.3",
|
||||||
"worker-loader": "2.0.0"
|
"worker-loader": "2.0.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
|
|
@ -1048,10 +1048,6 @@ func RegisterRoutes(m *macaron.Macaron) {
|
||||||
ctx.HTML(200, "pwa/manifest_json")
|
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
|
// prometheus metrics endpoint
|
||||||
if setting.Metrics.Enabled {
|
if setting.Metrics.Enabled {
|
||||||
c := metrics.NewCollector()
|
c := metrics.NewCollector()
|
||||||
|
|
|
@ -6,30 +6,6 @@
|
||||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||||
<title>{{if .Title}}{{.Title | RenderEmojiPlain}} - {{end}} {{if .Repository.Name}}{{.Repository.Name}} - {{end}}{{AppName}} </title>
|
<title>{{if .Title}}{{.Title | RenderEmojiPlain}} - {{end}} {{if .Repository.Name}}{{.Repository.Name}} - {{end}}{{AppName}} </title>
|
||||||
<link rel="manifest" href="{{AppSubUrl}}/manifest.json" crossorigin="use-credentials">
|
<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="theme-color" content="{{ThemeColorMetaTag}}">
|
||||||
<meta name="author" content="{{if .Repository}}{{.Owner.Name}}{{else}}{{MetaAuthor}}{{end}}" />
|
<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}}" />
|
<meta name="description" content="{{if .Repository}}{{.Repository.Name}}{{if .Repository.Description}} - {{.Repository.Description}}{{end}}{{else}}{{MetaDescription}}{{end}}" />
|
||||||
|
@ -84,8 +60,10 @@
|
||||||
</script>
|
</script>
|
||||||
<script>
|
<script>
|
||||||
window.config = {
|
window.config = {
|
||||||
|
AppVer: '{{AppVer}}',
|
||||||
AppSubUrl: '{{AppSubUrl}}',
|
AppSubUrl: '{{AppSubUrl}}',
|
||||||
StaticUrlPrefix: '{{StaticUrlPrefix}}',
|
StaticUrlPrefix: '{{StaticUrlPrefix}}',
|
||||||
|
UseServiceWorker: {{UseServiceWorker}},
|
||||||
csrf: '{{.CsrfToken}}',
|
csrf: '{{.CsrfToken}}',
|
||||||
HighlightJS: {{if .RequireHighlightJS}}true{{else}}false{{end}},
|
HighlightJS: {{if .RequireHighlightJS}}true{{else}}false{{end}},
|
||||||
Minicolors: {{if .RequireMinicolors}}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);
|
|
||||||
}
|
|
||||||
)
|
|
||||||
);
|
|
||||||
});
|
|
43
web_src/js/features/serviceworker.js
Normal file
43
web_src/js/features/serviceworker.js
Normal file
|
@ -0,0 +1,43 @@
|
||||||
|
const {UseServiceWorker, AppSubUrl, AppVer} = window.config;
|
||||||
|
const cacheName = 'static-cache-v2';
|
||||||
|
|
||||||
|
async function unregister() {
|
||||||
|
for (const registration of await navigator.serviceWorker.getRegistrations()) {
|
||||||
|
const serviceWorker = registration.active;
|
||||||
|
if (!serviceWorker) continue;
|
||||||
|
registration.unregister();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function invalidateCache() {
|
||||||
|
await caches.delete(cacheName);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function checkCacheValidity() {
|
||||||
|
const cacheKey = AppVer;
|
||||||
|
const storedCacheKey = localStorage.getItem('staticCacheKey');
|
||||||
|
|
||||||
|
// invalidate cache if it belongs to a different gitea version
|
||||||
|
if (cacheKey && storedCacheKey !== cacheKey) {
|
||||||
|
invalidateCache();
|
||||||
|
localStorage.setItem('staticCacheKey', cacheKey);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default async function initServiceWorker() {
|
||||||
|
if (!('serviceWorker' in navigator)) return;
|
||||||
|
|
||||||
|
if (UseServiceWorker) {
|
||||||
|
await checkCacheValidity();
|
||||||
|
try {
|
||||||
|
await navigator.serviceWorker.register(`${AppSubUrl}/serviceworker.js`);
|
||||||
|
} catch (err) {
|
||||||
|
console.error(err);
|
||||||
|
await invalidateCache();
|
||||||
|
await unregister();
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
await invalidateCache();
|
||||||
|
await unregister();
|
||||||
|
}
|
||||||
|
}
|
|
@ -14,6 +14,7 @@ import initGitGraph from './features/gitgraph.js';
|
||||||
import initClipboard from './features/clipboard.js';
|
import initClipboard from './features/clipboard.js';
|
||||||
import initUserHeatmap from './features/userheatmap.js';
|
import initUserHeatmap from './features/userheatmap.js';
|
||||||
import initDateTimePicker from './features/datetimepicker.js';
|
import initDateTimePicker from './features/datetimepicker.js';
|
||||||
|
import initServiceWorker from './features/serviceworker.js';
|
||||||
import attachTribute from './features/tribute.js';
|
import attachTribute from './features/tribute.js';
|
||||||
import createDropzone from './features/dropzone.js';
|
import createDropzone from './features/dropzone.js';
|
||||||
import highlight from './features/highlight.js';
|
import highlight from './features/highlight.js';
|
||||||
|
@ -2475,6 +2476,7 @@ $(document).ready(async () => {
|
||||||
initGitGraph(),
|
initGitGraph(),
|
||||||
initClipboard(),
|
initClipboard(),
|
||||||
initUserHeatmap(),
|
initUserHeatmap(),
|
||||||
|
initServiceWorker(),
|
||||||
]);
|
]);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
16
web_src/js/serviceworker.js
Normal file
16
web_src/js/serviceworker.js
Normal file
|
@ -0,0 +1,16 @@
|
||||||
|
import {registerRoute} from 'workbox-routing';
|
||||||
|
import {StaleWhileRevalidate} from 'workbox-strategies';
|
||||||
|
|
||||||
|
const cacheName = 'static-cache-v2';
|
||||||
|
|
||||||
|
const cachedDestinations = new Set([
|
||||||
|
'manifest',
|
||||||
|
'script',
|
||||||
|
'style',
|
||||||
|
'worker',
|
||||||
|
]);
|
||||||
|
|
||||||
|
registerRoute(
|
||||||
|
({request}) => cachedDestinations.has(request.destination),
|
||||||
|
new StaleWhileRevalidate({cacheName}),
|
||||||
|
);
|
|
@ -35,13 +35,20 @@ module.exports = {
|
||||||
jquery: [
|
jquery: [
|
||||||
resolve(__dirname, 'web_src/js/jquery.js'),
|
resolve(__dirname, 'web_src/js/jquery.js'),
|
||||||
],
|
],
|
||||||
|
serviceworker: [
|
||||||
|
resolve(__dirname, 'web_src/js/serviceworker.js'),
|
||||||
|
],
|
||||||
icons: glob('node_modules/@primer/octicons/build/svg/**/*.svg'),
|
icons: glob('node_modules/@primer/octicons/build/svg/**/*.svg'),
|
||||||
...themes,
|
...themes,
|
||||||
},
|
},
|
||||||
devtool: false,
|
devtool: false,
|
||||||
output: {
|
output: {
|
||||||
path: resolve(__dirname, 'public'),
|
path: resolve(__dirname, 'public'),
|
||||||
filename: 'js/[name].js',
|
filename: ({chunk}) => {
|
||||||
|
// serviceworker can only manage assets below it's script's directory so
|
||||||
|
// we have to put it in / instead of /js/
|
||||||
|
return chunk.id === 'serviceworker' ? '[name].js' : 'js/[name].js';
|
||||||
|
},
|
||||||
chunkFilename: 'js/[name].js',
|
chunkFilename: 'js/[name].js',
|
||||||
},
|
},
|
||||||
optimization: {
|
optimization: {
|
||||||
|
|
Loading…
Reference in a new issue