From 1d0d5c133ced5053dc2330229623f0d3d2a3ecfe Mon Sep 17 00:00:00 2001 From: silverwind Date: Fri, 22 May 2020 20:29:53 +0200 Subject: [PATCH 1/2] Fix serviceworker output file and misc improvements - Fix output file location for production build - Cache more asset types: fonts and worker variants - Parallelize a few tasks during initalization - Only invalidate caches starting with our prefix - Remove public/serviceworker.js before building - Remove font preloads, they cause strange cors issues - Misc eslint config adjustments --- .eslintrc | 3 ++- Makefile | 6 ++--- templates/base/head.tmpl | 2 -- web_src/js/features/serviceworker.js | 38 ++++++++++++++++++---------- web_src/js/index.js | 2 +- web_src/js/serviceworker.js | 7 +++++ webpack.config.js | 2 +- 7 files changed, 38 insertions(+), 22 deletions(-) diff --git a/.eslintrc b/.eslintrc index 3a731cbf6b02d..3156f88375de2 100644 --- a/.eslintrc +++ b/.eslintrc @@ -25,7 +25,7 @@ globals: Tribute: false overrides: - - files: ["web_src/**/*.worker.js"] + - files: ["web_src/**/*.worker.js", "web_src/js/serviceworker.js"] env: worker: true rules: @@ -58,6 +58,7 @@ rules: no-restricted-syntax: [0] no-return-await: [0] no-shadow: [0] + no-underscore-dangle: [0] no-unused-vars: [2, {args: all, argsIgnorePattern: ^_, varsIgnorePattern: ^_, ignoreRestSiblings: true}] no-use-before-define: [0] no-var: [2] diff --git a/Makefile b/Makefile index 37c9a46d81ac0..eaff42d78924d 100644 --- a/Makefile +++ b/Makefile @@ -88,7 +88,7 @@ GO_PACKAGES ?= $(filter-out code.gitea.io/gitea/integrations/migration-test,$(fi WEBPACK_SOURCES := $(shell find web_src/js web_src/less -type f) WEBPACK_CONFIGS := webpack.config.js WEBPACK_DEST := public/js/index.js public/css/index.css -WEBPACK_DEST_DIRS := public/js public/css public/fonts +WEBPACK_DEST_ENTRIES := public/js public/css public/fonts public/serviceworker.js BINDATA_DEST := modules/public/bindata.go modules/options/bindata.go modules/templates/bindata.go BINDATA_HASH := $(addsuffix .hash,$(BINDATA_DEST)) @@ -194,7 +194,7 @@ node-check: .PHONY: clean-all clean-all: clean - rm -rf $(WEBPACK_DEST_DIRS) $(FOMANTIC_DEST_DIR) + rm -rf $(WEBPACK_DEST_ENTRIES) $(FOMANTIC_DEST_DIR) .PHONY: clean clean: @@ -598,7 +598,7 @@ $(FOMANTIC_DEST): $(FOMANTIC_CONFIGS) package-lock.json | node_modules webpack: $(WEBPACK_DEST) $(WEBPACK_DEST): $(WEBPACK_SOURCES) $(WEBPACK_CONFIGS) package-lock.json | node_modules - rm -rf $(WEBPACK_DEST_DIRS) + rm -rf $(WEBPACK_DEST_ENTRIES) npx webpack --hide-modules --display-entrypoints=false @touch $(WEBPACK_DEST) diff --git a/templates/base/head.tmpl b/templates/base/head.tmpl index a6a715531dd86..9ad7f8496c8d5 100644 --- a/templates/base/head.tmpl +++ b/templates/base/head.tmpl @@ -92,8 +92,6 @@ - - {{if .RequireSimpleMDE}} {{end}} diff --git a/web_src/js/features/serviceworker.js b/web_src/js/features/serviceworker.js index a8fd2d41df833..fa415866cd299 100644 --- a/web_src/js/features/serviceworker.js +++ b/web_src/js/features/serviceworker.js @@ -1,16 +1,18 @@ const {UseServiceWorker, AppSubUrl, AppVer} = window.config; -const cacheName = 'static-cache-v2'; +const cachePrefix = 'static-cache-v'; // actual version is set in the service worker script async function unregister() { - for (const registration of await navigator.serviceWorker.getRegistrations()) { - const serviceWorker = registration.active; - if (!serviceWorker) continue; - registration.unregister(); - } + const registrations = await navigator.serviceWorker.getRegistrations(); + await Promise.all(registrations.map((registration) => { + return registration.active && registration.unregister(); + })); } async function invalidateCache() { - await caches.delete(cacheName); + const cacheKeys = await caches.keys(); + await Promise.all(cacheKeys.map((key) => { + return key.startsWith(cachePrefix) && caches.delete(key); + })); } async function checkCacheValidity() { @@ -19,7 +21,7 @@ async function checkCacheValidity() { // invalidate cache if it belongs to a different gitea version if (cacheKey && storedCacheKey !== cacheKey) { - invalidateCache(); + await invalidateCache(); localStorage.setItem('staticCacheKey', cacheKey); } } @@ -28,16 +30,24 @@ export default async function initServiceWorker() { if (!('serviceWorker' in navigator)) return; if (UseServiceWorker) { - await checkCacheValidity(); try { - await navigator.serviceWorker.register(`${AppSubUrl}/serviceworker.js`); + // normally we'd serve the service worker as a static asset from StaticUrlPrefix but + // the spec strictly requires it to be same-origin so it has to be AppSubUrl to work + await Promise.all([ + checkCacheValidity(), + navigator.serviceWorker.register(`${AppSubUrl}/serviceworker.js`), + ]); } catch (err) { console.error(err); - await invalidateCache(); - await unregister(); + await Promise.all([ + invalidateCache(), + unregister(), + ]); } } else { - await invalidateCache(); - await unregister(); + await Promise.all([ + invalidateCache(), + unregister(), + ]); } } diff --git a/web_src/js/index.js b/web_src/js/index.js index 84e08c1dd3d1b..89068202d1279 100644 --- a/web_src/js/index.js +++ b/web_src/js/index.js @@ -2469,7 +2469,7 @@ $(document).ready(async () => { } }); - // parallel init of lazy-loaded features + // parallel init of async loaded features await Promise.all([ highlight(document.querySelectorAll('pre code')), attachTribute(document.querySelectorAll('#content, .emoji-input')), diff --git a/web_src/js/serviceworker.js b/web_src/js/serviceworker.js index e9dfde22f9140..c96ef8bd97ffe 100644 --- a/web_src/js/serviceworker.js +++ b/web_src/js/serviceworker.js @@ -3,9 +3,16 @@ import {StaleWhileRevalidate} from 'workbox-strategies'; const cacheName = 'static-cache-v2'; +// disable workbox debug logging in development, remove when debugging the service worker +self.__WB_DISABLE_DEV_LOGS = true; + +// see https://developer.mozilla.org/en-US/docs/Web/API/RequestDestination for possible values const cachedDestinations = new Set([ + 'font', 'manifest', + 'paintworklet', 'script', + 'sharedworker', 'style', 'worker', ]); diff --git a/webpack.config.js b/webpack.config.js index b1038c407d4c4..70a5029e631b1 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -47,7 +47,7 @@ module.exports = { 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'; + return chunk.name === 'serviceworker' ? '[name].js' : 'js/[name].js'; }, chunkFilename: 'js/[name].js', }, From 376988d032e7ec2d95fb078929bd3331ce3e90d1 Mon Sep 17 00:00:00 2001 From: silverwind Date: Sat, 23 May 2020 12:43:05 +0200 Subject: [PATCH 2/2] remove webpack output files on watch-frontend --- Makefile | 1 + 1 file changed, 1 insertion(+) diff --git a/Makefile b/Makefile index eaff42d78924d..1afdcf7d3f415 100644 --- a/Makefile +++ b/Makefile @@ -295,6 +295,7 @@ lint-frontend: node_modules .PHONY: watch-frontend watch-frontend: node_modules + rm -rf $(WEBPACK_DEST_ENTRIES) NODE_ENV=development npx webpack --hide-modules --display-entrypoints=false --watch --progress .PHONY: test