Create Progressive Web App

[SohnyBohny]

Create a PWA by adding a app manifest and a service worker
This will allow users (especially on Android) to add the gitea website to the home-screen and use it like a native app.

Being served over https a service worker will cache all static content which will cause faster page loading and a better user experience.

---

TODOs:

• Add 192x192 and 512x512 icons to the manifest.json
• Complete list of static content in serviceworker.js
• (Reorder head.tmpl)

[codecov-io]

Codecov Report

Merging #4730 into master will decrease coverage by <.01%.
The diff coverage is 60%.

@@            Coverage Diff             @@
##           master    #4730      +/-   ##
==========================================
- Coverage   37.46%   37.46%   -0.01%     
==========================================
  Files         312      312              
  Lines       46507    46522      +15     
==========================================
+ Hits        17423    17428       +5     
- Misses      26595    26601       +6     
- Partials     2489     2493       +4

Impacted Files	Coverage Δ
routers/routes/routes.go	84.69% <0%> (-0.78%)	⬇️
modules/templates/dynamic.go	62.66% <100%> (+5.09%)	⬆️
models/repo_indexer.go	44.49% <0%> (-3.82%)	⬇️
models/repo_list.go	64.55% <0%> (+1.26%)	⬆️
modules/process/manager.go	81.15% <0%> (+4.34%)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update e09fe48...98ad135. Read the comment docs.

[lafriks]

Can this be somehow changed not to have duplicate js files? Also if gitea is deployed with suburl this will not work

[SohnyBohny]

Cuplicate js files? Where?

What do you mean with suburl? Subdomain should work. But a sub path might cause problems...
The files (manifest and service worker) should be generated dynamically (like html templates) to fix this. But to do that I would need somebody's help.

[lafriks]

You coud add data-cache="true" to script tags for javascipt etc files that need to be cached and use javascript to select them:

var scripts = document.querySelectorAll('script[data-cache="true"]');
// loop over scripts and get src attribute

Just an idea, idk if that would work :)

[SohnyBohny]

I don't think that this would work because service worker doesn't have access to the document.

[SohnyBohny]

The solution might be to generate the service worker file dynamically like html templates. Also the mainfest has a namespace which should be generated dynamically.

[techknowlogick]

@SohnyBohny An example of how to use a template to achieve what you are looking for is #3572

[SohnyBohny]

Okay thank you - I will check this out when I have time (in ≈2 weeks)

[0rzech]

What do you mean with suburl? Subdomain should work. But a sub path might cause problems...

@SohnyBohny AppSubURL variable stores URL path to Gitea instance [source]. In templates its name is AppSubUrl [source].

[lunny]

CI failed

[SohnyBohny]

What does this error mean?
Makefile:152: recipe for target 'fmt-check' failed

[lunny]

your golang code is not the same as the format program did.

[SohnyBohny]

Finally CI build has passed :-)

[techknowlogick]

@SohnyBohny one minor nit, but everything else looks great. Could TODO items be for another PR, or are they needed right away?

[SohnyBohny]

The 192x192 and 512x512 icons are needed that chrome automatically shows an install banner on Android. Without them the User will not find out this feature.
I'm not sure how these icon are added. I have found an generate-images section in the Makefile but I'm not experienced with Makefiles at all.

[lunny]

But cannot work on chrome macOS? I have enabled PWA desktop but it seems it doesn't work.

[SohnyBohny]

@lunny any error message? I think 512px sized icon is needed...

[lunny]

[Macaron] 2018-11-19 09:28:21: Started GET /css/theme-gitea.css for [::1]
2018/11/19 09:28:21 [D] Session ID: 529e98b5f23de857
2018/11/19 09:28:21 [D] CSRF Token: MWPHepbatiwdXEvp0ukobEJxZTU6MTU0MjU5MDg2OTM1NTAwNjAwMA==
2018/11/19 09:28:21 [I] [SQL] SELECT  TOP 1 "id", "lower_name", "name", "full_name", "email", "keep_email_private", "passwd", "must_change_password", "login_type", "login_source", "login_name", "type", "location", "website", "rands", "salt", "language", "created_unix", "updated_unix", "last_login_unix", "last_repo_visibility", "max_repo_creation", "is_active", "is_admin", "allow_git_hook", "allow_import_local", "allow_create_organization", "prohibit_login", "avatar", "avatar_email", "use_custom_avatar", "num_followers", "num_following", "num_stars", "num_repos", "description", "num_teams", "num_members", "diff_view_style" FROM "user" WHERE "lower_name"=? []interface {}{"css"}
2018/11/19 09:28:21 [D] Template: status/404
[Macaron] 2018-11-19 09:28:21: Completed GET /css/theme-gitea.css 404 Not Found in 100.550709ms

[lunny]

Another two TODOs?

[techknowlogick]

@lunny I think last TODO can wait for another PR.

[SohnyBohny]

Great @techknowlogick thank you

Of course the last TODO can wait (if it is neccessary at all). I was just not sure how you like the head of the html to be ordered.

For me it's done now. Of course the list should be up to date at any time.

Somewere in the docs or in the release notes there should be a note that the service worker has to be served over https (or localhost)

[lafriks]

I think this list is already outdated :) We should really think of some kind of automated sync for it

[lunny]

Which list?

[lafriks]

I think at least recently merged vue-calendar-heatmap, moment

[SohnyBohny]

Workbox is exactly our usecase. I'll look into that as soon as possible and will create a new PR then.

[SohnyBohny]

---

Is this the right place to keep discussing about this topic or should I open an issue for that?

---

Anyway:
I've looked into Workbox now. The way it works is by looking for specific file types in specified folders and automatically add them to the caching list while building time.

Most cacheable files are located under /vendor/plugins/ but they are not accessible in source folder. Could somebody please explain how this works or link me to a wiki page?

More specific I need following questions answered:

- What is the root of your web app (i.e. which directory do you deploy)?
- Which file types would you like to precache? (Located in the folder specified above or in subfolders)