Move serviceworker to workbox and fix SSE interference (#11538)

.eslintrc

@@ -48,6 +48,7 @@ rules:
  no-cond-assign: [2, except-parens]
  no-console: [1, {allow: [info, warn, error]}]
  no-continue: [0]
+ no-empty: [2, {allowEmptyCatch: true}]
  no-eq-null: [2]
  no-mixed-operators: [0]
  no-multi-assign: [0]

modules/templates/dynamic.go

@@ -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.
 func Mailer() (*texttmpl.Template, *template.Template) {
  for _, funcs := range NewTextFuncMap() {

modules/templates/static.go

@@ -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.
 func Mailer() (*texttmpl.Template, *template.Template) {
  for _, funcs := range NewTextFuncMap() {

package.json

@@ -47,6 +47,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": {

routers/routes/routes.go

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

templates/base/head.tmpl

@@ -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}}" />
@@ -84,8 +60,10 @@
  </script>
  <script>
  window.config = {
+ AppVer: '{{AppVer}}',
  AppSubUrl: '{{AppSubUrl}}',
  StaticUrlPrefix: '{{StaticUrlPrefix}}',
+ UseServiceWorker: {{UseServiceWorker}},
  csrf: '{{.CsrfToken}}',
  HighlightJS: {{if .RequireHighlightJS}}true{{else}}false{{end}},
  Minicolors: {{if .RequireMinicolors}}true{{else}}false{{end}},

web_src/js/features/serviceworker.js

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

web_src/js/index.js

@@ -15,6 +15,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 {initTribute, issuesTribute, emojiTribute} from './features/tribute.js';
 import createDropzone from './features/dropzone.js';
 import highlight from './features/highlight.js';
@@ -2477,6 +2478,7 @@ $(document).ready(async () => {
  initGitGraph(),
  initClipboard(),
  initUserHeatmap(),
+ initServiceWorker(),
  ]);
 });
 

web_src/js/serviceworker.js

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

webpack.config.js

@@ -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'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',
  },
  optimization: {