Add USE_SERVICE_WORKER setting (#9110)

* Add USE_SERVICE_WORKER setting

This will be very useful setting for anyone doing frontend work.

Fixes: https://github.com/go-gitea/gitea/issues/9044

* prevent potential syntax error on old browsers

custom/conf/app.ini.sample

@@ -153,6 +153,8 @@ THEMES = gitea,arc-green
 DEFAULT_SHOW_FULL_NAME = false
 ; Whether to search within description at repository search on explore page.
 SEARCH_REPO_DESCRIPTION = true
+; Whether to enable a Service Worker to cache frontend assets
+USE_SERVICE_WORKER = true
 
 [ui.admin]
 ; Number of users that are displayed on one page

docs/content/doc/advanced/config-cheat-sheet.en-us.md

@@ -118,8 +118,9 @@ Values containing `#` or `;` must be quoted using `` ` `` or `"""`.
 - `DEFAULT_THEME`: **gitea**: \[gitea, arc-green\]: Set the default theme for the Gitea install.
 - `THEMES`:  **gitea,arc-green**: All available themes. Allow users select personalized themes
   regardless of the value of `DEFAULT_THEME`.
-- `DEFAULT_SHOW_FULL_NAME`: false: Whether the full name of the users should be shown where possible. If the full name isn't set, the username will be used.
+- `DEFAULT_SHOW_FULL_NAME`: **false**: Whether the full name of the users should be shown where possible. If the full name isn't set, the username will be used.
-- `SEARCH_REPO_DESCRIPTION`: true: Whether to search within description at repository search on explore page.
+- `SEARCH_REPO_DESCRIPTION`: **true**: Whether to search within description at repository search on explore page.
+- `USE_SERVICE_WORKER`: **true**: Whether to enable a Service Worker to cache frontend assets.
 
 ### UI - Admin (`ui.admin`)
 

docs/content/doc/advanced/hacking-on-gitea.en-us.md

@@ -138,9 +138,9 @@ make revive vet misspell-check
 
 ### Updating CSS
 
-To generate the CSS, you will need [Node.js](https://nodejs.org/) 8.0 or greater with npm. At present we use [less](http://lesscss.org/) and [postcss](https://postcss.org) to generate our CSS. Do **not** edit the files in `public/css` directly, as they are generated from `lessc` from the files in `public/less`.
+To generate the CSS, you need [Node.js](https://nodejs.org/) 8.0 or greater with npm. We use [less](http://lesscss.org/) and [postcss](https://postcss.org) to generate our CSS. Do **not** edit the files in `public/css` directly, as they are generated from `lessc` from the files in `public/less`.
 
-Edit files in `public/less`, run the linter, regenerate the CSS and commit all changed files:
+Edit files in `public/less`, and then run the linter and build the CSS files via:
 
 ```bash
 make css
@@ -148,12 +148,14 @@ make css
 
 ### Updating JS
 
-To run the JavaScript linter you will need [Node.js](https://nodejs.org/) 8.0 or greater with npm. Edit files in `public/js` and run the linter:
+To generate the JS files, you need [Node.js](https://nodejs.org/) 8.0 or greater with npm. Edit files in `public/js`, run the linter and build the JS files via:
 
 ```bash
 make js
 ```
 
+Note: When working on frontend code, it is advisable to set `USE_SERVICE_WORKER` to `false` in `app.ini` which will prevent undesirable caching of frontend assets.
+
 ### Updating the API
 
 When creating new API routes or modifying existing API routes, you **MUST**

modules/setting/setting.go

@@ -170,6 +170,7 @@ var (
 		DefaultTheme          string
 		Themes                []string
 		SearchRepoDescription bool
+		UseServiceWorker      bool
 
 		Admin struct {
 			UserPagingNum   int
@@ -969,6 +970,7 @@ func NewContext() {
 	UI.ShowUserEmail = Cfg.Section("ui").Key("SHOW_USER_EMAIL").MustBool(true)
 	UI.DefaultShowFullName = Cfg.Section("ui").Key("DEFAULT_SHOW_FULL_NAME").MustBool(false)
 	UI.SearchRepoDescription = Cfg.Section("ui").Key("SEARCH_REPO_DESCRIPTION").MustBool(true)
+	UI.UseServiceWorker = Cfg.Section("ui").Key("USE_SERVICE_WORKER").MustBool(true)
 
 	HasRobotsTxt = com.IsFile(path.Join(CustomPath, "robots.txt"))
 

modules/templates/helper.go

@@ -148,6 +148,9 @@ func NewFuncMap() []template.FuncMap {
 		"MetaKeywords": func() string {
 			return setting.UI.Meta.Keywords
 		},
+		"UseServiceWorker": func() bool {
+			return setting.UI.UseServiceWorker
+		},
 		"FilenameIsImage": func(filename string) bool {
 			mimeType := mime.TypeByExtension(filepath.Ext(filename))
 			return strings.HasPrefix(mimeType, "image/")

templates/base/head.tmpl

@@ -6,22 +6,30 @@
 	<meta http-equiv="x-ua-compatible" content="ie=edge">
 	<title>{{if .Title}}{{.Title}} - {{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) {
-  			window.addEventListener('load', function() {
 			navigator.serviceWorker.register('{{AppSubUrl}}/serviceworker.js').then(function(registration) {
 				// Registration was successful
-      				console.log('ServiceWorker registration successful with scope: ', registration.scope);
+				console.info('ServiceWorker registration successful with scope: ', registration.scope);
 			}, function(err) {
 				// registration failed :(
-      				console.log('ServiceWorker registration failed: ', err);
+				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}}" />