fedi/forgejo
1
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo.git synced 2024-12-24 09:27:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Move serviceworker to workbox and fix SSE interference

Browse source 
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 2020-05-21 21:15:19 +02:00
parent 460bc32c71
commit 99d9b0f728
No known key found for this signature in database
GPG key ID: 2E62B41C93869443
9 changed files with 73 additions and 112 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
package-lock.json generated
View file

@ -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",

2
package.json
View file

@ -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": {

4
routers/routes/routes.go
View file

@ -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()

25
templates/base/head.tmpl
View file

@ -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}},

83
templates/pwa/serviceworker_js.tmpl
View file

@ -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
View 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();
}
}

2
web_src/js/index.js
View file

@ -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
View 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'}),
);

9
webpack.config.js
View file

@ -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: {