Create Progressive Web App (#4730)

* Create manifest and serviceworker

* Create templates and add AppSubUrl

* Add JSRenderer

* fix ctx type

* Add JSRenderer to static.go

* Complete adding {{AppSubUrl}}

* Add more fonts to urlsToCache

* Add 512px and 192px icons

* Hardcode font MD5

* Default theme doesn't have a specific CSS file

diff --git a/Makefile b/Makefile
index 6f3779e30b568dbe147ca504febf25de17dae784..5e7e72df0bc5f51421c4ba6e4b2af292823e2545 100644 (file)
--- a/Makefile
+++ b/Makefile
@@ -347,6 +347,8 @@ update-translations:
 generate-images:
        mkdir -p $(TMPDIR)/images
        inkscape -f $(PWD)/assets/logo.svg -w 880 -h 880 -e $(PWD)/public/img/gitea-lg.png
+       inkscape -f $(PWD)/assets/logo.svg -w 512 -h 512 -e $(PWD)/public/img/gitea-512.png
+       inkscape -f $(PWD)/assets/logo.svg -w 192 -h 192 -e $(PWD)/public/img/gitea-192.png
        inkscape -f $(PWD)/assets/logo.svg -w 120 -h 120 -jC -i layer1 -e $(TMPDIR)/images/sm-1.png
        inkscape -f $(PWD)/assets/logo.svg -w 120 -h 120 -jC -i layer2 -e $(TMPDIR)/images/sm-2.png
        composite -compose atop $(TMPDIR)/images/sm-2.png $(TMPDIR)/images/sm-1.png $(PWD)/public/img/gitea-sm.png

diff --git a/modules/templates/dynamic.go b/modules/templates/dynamic.go
index d70a465c1cda03ea768f65b86ab8559123d0ecdc..dbd75221d22c3dbddf5e88d386647083ed06996a 100644 (file)
--- a/modules/templates/dynamic.go
+++ b/modules/templates/dynamic.go
@@ -45,6 +45,18 @@ 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() *template.Template {
        for _, funcs := range NewFuncMap() {

diff --git a/modules/templates/static.go b/modules/templates/static.go
index 6fd4d245e16e67ff40ad1468275d3d46a704214d..e69e1cae481528008e164d7dd1d08bcbbbf271cf 100644 (file)
--- a/modules/templates/static.go
+++ b/modules/templates/static.go
@@ -129,6 +129,15 @@ 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() *template.Template {
        for _, funcs := range NewFuncMap() {

diff --git a/public/img/gitea-192.png b/public/img/gitea-192.png
new file mode 100644 (file)
index 0000000..63f963e
Binary files /dev/null and b/public/img/gitea-192.png differ

diff --git a/public/img/gitea-512.png b/public/img/gitea-512.png
new file mode 100644 (file)
index 0000000..59d1fed
Binary files /dev/null and b/public/img/gitea-512.png differ

diff --git a/routers/routes/routes.go b/routers/routes/routes.go
index 06292557b3f317fe56b15dabb9dd9489a5a75d2c..1c1bcd8f953541e202f0cc0f8f4bbdc7bf42baaf 100644 (file)
--- a/routers/routes/routes.go
+++ b/routers/routes/routes.go
@@ -791,6 +791,15 @@ func RegisterRoutes(m *macaron.Macaron) {
                }
        })
 
+       // Progressive Web App
+       m.Get("/manifest.json", templates.JSONRenderer(), func(ctx *context.Context) {
+               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()

diff --git a/templates/base/head.tmpl b/templates/base/head.tmpl
index bb6a8a981be3b8dd5b76e3715fce4f41f6c2c34f..47c0d6b473ae9c41c632c57cff4636c5f7a933ce 100644 (file)
--- a/templates/base/head.tmpl
+++ b/templates/base/head.tmpl
@@ -5,6 +5,23 @@
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>{{if .Title}}{{.Title}} - {{end}}{{AppName}}</title>
+       <link rel="manifest" href="{{AppSubUrl}}/manifest.json">
+       
+       <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);
+                               }, function(err) {
+                                       // registration failed :(
+                               console.log('ServiceWorker registration failed: ', err);
+                       });
+                       });
+               }
+
+       </script>
+
        <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}}" />

diff --git a/templates/pwa/manifest_json.tmpl b/templates/pwa/manifest_json.tmpl
new file mode 100644 (file)
index 0000000..557bee5
--- /dev/null
+++ b/templates/pwa/manifest_json.tmpl
@@ -0,0 +1,31 @@
+{
+    "short_name": "Gitea",
+    "name": "Gitea - Git with a cup of tea",
+    "icons": [
+      {
+        "src": "{{AppSubUrl}}/img/gitea-lg.png",
+        "type": "image/png",
+        "sizes": "880x880"
+      },
+      {
+        "src": "{{AppSubUrl}}/img/gitea-sm.png",
+        "type": "image/png",
+        "sizes": "120x120"
+      },
+      {
+        "src": "{{AppSubUrl}}/img/gitea-512.png",
+        "type": "image/png",
+        "sizes": "512x512"
+      },
+      {
+        "src": "{{AppSubUrl}}/img/gitea-192.png",
+        "type": "image/png",
+        "sizes": "192x192"
+      }
+    ],
+    "start_url": "{{AppSubUrl}}/",
+    "scope": "{{AppSubUrl}}/",
+    "background_color": "#FAFAFA",
+    "display": "standalone",
+    "theme_color": "{{ThemeColorMetaTag}}"
+  }
\ No newline at end of file

diff --git a/templates/pwa/serviceworker_js.tmpl b/templates/pwa/serviceworker_js.tmpl
new file mode 100644 (file)
index 0000000..5e5860e
--- /dev/null
+++ b/templates/pwa/serviceworker_js.tmpl
@@ -0,0 +1,72 @@
+var STATIC_CACHE = 'static-cache-v1';
+var urlsToCache = [
+  // js
+  '{{AppSubUrl}}/vendor/plugins/jquery.areyousure/jquery.are-you-sure.js',
+  '{{AppSubUrl}}/vendor/plugins/jquery/jquery.min.js',
+  '{{AppSubUrl}}/vendor/plugins/semantic/semantic.min.js',
+  '{{AppSubUrl}}/js/index.js?v={{MD5 AppVer}}',
+  '{{AppSubUrl}}/js/draw.js',
+  '{{AppSubUrl}}/vendor/plugins/clipboard/clipboard.min.js',
+  '{{AppSubUrl}}/vendor/plugins/gitgraph/gitgraph.js',
+  '{{AppSubUrl}}/vendor/plugins/vue/vue.min.js',
+  '{{AppSubUrl}}/vendor/plugins/emojify/emojify.min.js',
+  '{{AppSubUrl}}/vendor/plugins/cssrelpreload/loadCSS.min.js',
+  '{{AppSubUrl}}/vendor/plugins/cssrelpreload/cssrelpreload.min.js',
+  '{{AppSubUrl}}/vendor/plugins/dropzone/dropzone.js',
+  '{{AppSubUrl}}/vendor/plugins/highlight/highlight.pack.js',
+  '{{AppSubUrl}}/vendor/plugins/jquery.datetimepicker/jquery.datetimepicker.js',
+  '{{AppSubUrl}}/vendor/plugins/jquery.minicolors/jquery.minicolors.min.js',
+  '{{AppSubUrl}}/vendor/plugins/codemirror/addon/mode/loadmode.js',
+  '{{AppSubUrl}}/vendor/plugins/codemirror/mode/meta.js',
+  '{{AppSubUrl}}/vendor/plugins/simplemde/simplemde.min.js',
+
+  // css
+  '{{AppSubUrl}}/vendor/assets/font-awesome/css/font-awesome.min.css',
+  '{{AppSubUrl}}/vendor/assets/octicons/octicons.min.css',
+  '{{AppSubUrl}}/vendor/plugins/simplemde/simplemde.min.css',
+  '{{AppSubUrl}}/vendor/plugins/gitgraph/gitgraph.css',
+  '{{AppSubUrl}}/vendor/plugins/tribute/tribute.css',
+  '{{AppSubUrl}}/vendor/plugins/semantic/semantic.min.css',
+  '{{AppSubUrl}}/css/index.css?v={{MD5 AppVer}}',
+  '{{AppSubUrl}}/vendor/plugins/highlight/github.css',
+  '{{AppSubUrl}}/vendor/plugins/jquery.minicolors/jquery.minicolors.css',
+  '{{AppSubUrl}}/vendor/plugins/jquery.datetimepicker/jquery.datetimepicker.css',
+  '{{AppSubUrl}}/vendor/plugins/dropzone/dropzone.css',
+{{if ne DefaultTheme "gitea"}}
+  '{{AppSubUrl}}/css/theme-{{DefaultTheme}}.css',
+{{end}}
+  
+  // img
+  '{{AppSubUrl}}/img/gitea-sm.png',
+  '{{AppSubUrl}}/img/gitea-lg.png',
+
+  // fonts
+  '{{AppSubUrl}}/vendor/plugins/semantic/themes/default/assets/fonts/icons.woff2',
+  '{{AppSubUrl}}/vendor/assets/octicons/octicons.woff2?ef21c39f0ca9b1b5116e5eb7ac5eabe6',
+  '{{AppSubUrl}}/vendor/assets/lato-fonts/lato-v14-latin-regular.woff2',
+  '{{AppSubUrl}}/vendor/assets/lato-fonts/lato-v14-latin-700.woff2'
+];
+
+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);
+      }
+      )
+  );
+});