WIP vue-cli 5

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

config/dev.exs

@@ -24,7 +24,8 @@ config :mobilizon, Mobilizon.Web.Endpoint,
       "node_modules/webpack/bin/webpack.js",
       "--mode",
       "development",
-      "--watch-stdin",
+      "--watch",
+      "--watch-options-stdin",
       "--config",
       "node_modules/@vue/cli-service/webpack.config.js",
       cd: Path.expand("../js", __DIR__)

js/.browserslistrc

@@ -1,3 +1,4 @@
 > 1%
 last 2 versions
 not dead
+not ie 11

js/.eslintrc.js

@@ -8,8 +8,8 @@ module.exports = {
   extends: [
     "plugin:vue/essential",
     "eslint:recommended",
-    "@vue/prettier",
     "@vue/typescript/recommended",
+    "@vue/prettier",
     "@vue/prettier/@typescript-eslint",
   ],
 

js/package.json

@@ -8,7 +8,7 @@
     "test:unit": "LANG=en_US.UTF-8 LANGUAGE=en_US:en LC_ALL=en_US.UTF-8 vue-cli-service test:unit",
     "test:e2e": "vue-cli-service test:e2e",
     "lint": "vue-cli-service lint",
-    "build:assets": "vue-cli-service build --modern",
+    "build:assets": "vue-cli-service build",
     "build:pictures": "bash ./scripts/build/pictures.sh"
   },
   "dependencies": {
@@ -50,7 +50,7 @@
     "ngeohash": "^0.6.3",
     "p-debounce": "^4.0.0",
     "phoenix": "^1.4.11",
-    "register-service-worker": "^1.7.1",
+    "register-service-worker": "^1.7.2",
     "tippy.js": "^6.2.3",
     "unfetch": "^4.2.0",
     "v-tooltip": "^2.1.3",
@@ -78,22 +78,22 @@
     "@types/vuedraggable": "^2.23.0",
     "@typescript-eslint/eslint-plugin": "^4.18.0",
     "@typescript-eslint/parser": "^4.18.0",
-    "@vue/cli-plugin-babel": "~4.5.13",
-    "@vue/cli-plugin-e2e-cypress": "~4.5.13",
-    "@vue/cli-plugin-eslint": "~4.5.13",
-    "@vue/cli-plugin-pwa": "~4.5.13",
-    "@vue/cli-plugin-router": "~4.5.13",
-    "@vue/cli-plugin-typescript": "~4.5.13",
-    "@vue/cli-plugin-unit-jest": "~4.5.13",
-    "@vue/cli-service": "~4.5.13",
+    "@vue/cli-plugin-babel": "~5.0.0-beta.0",
+    "@vue/cli-plugin-e2e-cypress": "~5.0.0-beta.0",
+    "@vue/cli-plugin-eslint": "~5.0.0-beta.0",
+    "@vue/cli-plugin-pwa": "~5.0.0-beta.0",
+    "@vue/cli-plugin-router": "~5.0.0-beta.0",
+    "@vue/cli-plugin-typescript": "~5.0.0-beta.0",
+    "@vue/cli-plugin-unit-jest": "~5.0.0-beta.0",
+    "@vue/cli-service": "~5.0.0-beta.0",
     "@vue/eslint-config-prettier": "^6.0.0",
     "@vue/eslint-config-typescript": "^7.0.0",
     "@vue/test-utils": "^1.1.0",
-    "eslint": "^6.7.2",
+    "eslint": "^7.20.0",
     "eslint-plugin-cypress": "^2.10.3",
     "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-prettier": "^3.3.1",
-    "eslint-plugin-vue": "^6.2.2",
+    "eslint-plugin-vue": "^7.6.0",
     "flush-promises": "^1.0.2",
     "jest-junit": "^12.0.0",
     "mock-apollo-client": "^0.6",
@@ -102,12 +102,11 @@
     "sass": "^1.29.0",
     "sass-loader": "^8.0.2",
     "typescript": "~4.1.5",
+    "ts-jest": "^26.5.3",
+    "vue-jest": "^4.0.1",
     "vue-cli-plugin-svg": "~0.1.3",
     "vue-i18n-extract": "^1.0.2",
     "vue-template-compiler": "^2.6.11",
-    "webpack-cli": "^3.3"
-  },
-  "resolutions": {
-    "workbox-webpack-plugin": "5.1.3"
+    "webpack-cli": "^4.7.0"
   }
 }

js/public/img/icons/safari-pinned-tab.svg

@@ -1,149 +1,3 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
- "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
-<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
- width="16.000000pt" height="16.000000pt" viewBox="0 0 16.000000 16.000000"
- preserveAspectRatio="xMidYMid meet">
-<metadata>
-Created by potrace 1.11, written by Peter Selinger 2001-2013
-</metadata>
-<g transform="translate(0.000000,16.000000) scale(0.000320,-0.000320)"
-fill="#000000" stroke="none">
-<path d="M18 46618 c45 -75 122 -207 122 -211 0 -2 25 -45 55 -95 30 -50 55
--96 55 -102 0 -5 5 -10 10 -10 6 0 10 -4 10 -9 0 -5 73 -135 161 -288 89 -153
-173 -298 187 -323 14 -25 32 -57 41 -72 88 -149 187 -324 189 -335 2 -7 8 -13
-13 -13 5 0 9 -4 9 -10 0 -5 46 -89 103 -187 175 -302 490 -846 507 -876 8 -16
-20 -36 25 -45 28 -46 290 -498 339 -585 13 -23 74 -129 136 -236 61 -107 123
--215 137 -240 14 -25 29 -50 33 -56 5 -5 23 -37 40 -70 18 -33 38 -67 44 -75
-11 -16 21 -33 63 -109 14 -25 29 -50 33 -56 4 -5 21 -35 38 -65 55 -100 261
--455 269 -465 4 -5 14 -21 20 -35 15 -29 41 -75 103 -180 24 -41 52 -88 60
--105 9 -16 57 -100 107 -185 112 -193 362 -626 380 -660 8 -14 23 -38 33 -55
-11 -16 23 -37 27 -45 4 -8 26 -46 48 -85 23 -38 53 -90 67 -115 46 -81 64
--113 178 -310 62 -107 121 -210 132 -227 37 -67 56 -99 85 -148 16 -27 32 -57
-36 -65 4 -8 15 -27 25 -42 9 -15 53 -89 96 -165 44 -76 177 -307 296 -513 120
--206 268 -463 330 -570 131 -227 117 -203 200 -348 36 -62 73 -125 82 -140 10
--15 21 -34 25 -42 4 -8 20 -37 36 -65 17 -27 38 -65 48 -82 49 -85 64 -111 87
--153 13 -25 28 -49 32 -55 4 -5 78 -134 165 -285 87 -151 166 -288 176 -305
-10 -16 26 -43 35 -59 9 -17 125 -217 257 -445 132 -229 253 -441 270 -471 17
--30 45 -79 64 -108 18 -29 33 -54 33 -57 0 -2 20 -37 44 -77 24 -40 123 -212
-221 -383 97 -170 190 -330 205 -355 16 -25 39 -65 53 -90 13 -25 81 -144 152
--265 70 -121 137 -238 150 -260 12 -22 37 -65 55 -95 18 -30 43 -73 55 -95 12
--22 48 -85 80 -140 77 -132 163 -280 190 -330 13 -22 71 -123 130 -225 59
--102 116 -199 126 -217 10 -17 29 -50 43 -72 15 -22 26 -43 26 -45 0 -2 27
--50 60 -106 33 -56 60 -103 60 -105 0 -2 55 -98 90 -155 8 -14 182 -316 239
--414 13 -22 45 -79 72 -124 27 -46 49 -86 49 -89 0 -2 14 -24 30 -48 16 -24
-30 -46 30 -49 0 -5 74 -135 100 -176 5 -8 24 -42 43 -75 50 -88 58 -101 262
--455 104 -179 199 -345 213 -370 14 -25 28 -49 32 -55 4 -5 17 -26 28 -45 10
--19 62 -109 114 -200 114 -197 133 -230 170 -295 16 -27 33 -57 38 -65 17 -28
-96 -165 103 -180 4 -8 16 -28 26 -45 10 -16 77 -131 148 -255 72 -124 181
--313 243 -420 62 -107 121 -209 131 -227 35 -62 323 -560 392 -678 38 -66 83
--145 100 -175 16 -30 33 -59 37 -65 4 -5 17 -27 29 -47 34 -61 56 -100 90
--156 17 -29 31 -55 31 -57 0 -2 17 -32 39 -67 21 -35 134 -229 251 -433 117
--203 235 -407 261 -451 27 -45 49 -85 49 -88 0 -4 8 -19 19 -34 15 -21 200
--341 309 -533 10 -19 33 -58 51 -87 17 -29 31 -54 31 -56 0 -2 25 -44 55 -94
-30 -50 55 -95 55 -98 0 -4 6 -15 14 -23 7 -9 27 -41 43 -71 17 -30 170 -297
-342 -594 171 -296 311 -542 311 -547 0 -5 5 -9 10 -9 6 0 10 -4 10 -10 0 -5
-22 -47 49 -92 27 -46 58 -99 68 -118 24 -43 81 -140 93 -160 5 -8 66 -114 135
--235 69 -121 130 -227 135 -235 12 -21 259 -447 283 -490 10 -19 28 -47 38
--62 11 -14 19 -29 19 -32 0 -3 37 -69 83 -148 99 -170 305 -526 337 -583 13
--22 31 -53 41 -70 11 -16 22 -37 26 -45 7 -14 82 -146 103 -180 14 -24 181
--311 205 -355 13 -22 46 -80 75 -130 29 -49 64 -110 78 -135 14 -25 51 -88 82
--140 31 -52 59 -102 63 -110 4 -8 18 -33 31 -55 205 -353 284 -489 309 -535
-17 -30 45 -78 62 -106 18 -28 36 -60 39 -72 4 -12 12 -22 17 -22 5 0 9 -4 9
--10 0 -5 109 -197 241 -427 133 -230 250 -431 259 -448 51 -90 222 -385 280
--485 37 -63 78 -135 92 -160 14 -25 67 -117 118 -205 51 -88 101 -175 111
--193 34 -58 55 -95 149 -257 51 -88 101 -173 110 -190 9 -16 76 -131 147 -255
-72 -124 140 -241 151 -260 61 -108 281 -489 355 -615 38 -66 77 -133 87 -150
-35 -63 91 -161 100 -175 14 -23 99 -169 128 -220 54 -97 135 -235 142 -245 4
--5 20 -32 35 -60 26 -48 238 -416 276 -480 10 -16 26 -46 37 -65 30 -53 382
--661 403 -695 10 -16 22 -37 26 -45 4 -8 26 -48 50 -88 24 -41 43 -75 43 -77
-0 -2 22 -40 50 -85 27 -45 50 -84 50 -86 0 -3 38 -69 83 -147 84 -142 302
--520 340 -587 10 -19 34 -60 52 -90 18 -30 44 -75 57 -100 14 -25 45 -79 70
--120 25 -41 56 -96 70 -121 14 -25 77 -133 138 -240 62 -107 122 -210 132
--229 25 -43 310 -535 337 -581 11 -19 26 -45 34 -59 17 -32 238 -414 266 -460
-11 -19 24 -41 28 -49 3 -7 75 -133 160 -278 84 -146 153 -269 153 -274 0 -5 5
--9 10 -9 6 0 10 -4 10 -10 0 -5 82 -150 181 -322 182 -314 201 -346 240 -415
-12 -21 80 -139 152 -263 71 -124 141 -245 155 -270 14 -25 28 -49 32 -55 6 -8
-145 -248 220 -380 37 -66 209 -362 229 -395 11 -19 24 -42 28 -49 4 -8 67
--118 140 -243 73 -125 133 -230 133 -233 0 -2 15 -28 33 -57 19 -29 47 -78 64
--108 17 -30 53 -93 79 -139 53 -90 82 -141 157 -272 82 -142 115 -199 381
--659 142 -245 268 -463 281 -485 12 -22 71 -125 132 -230 60 -104 172 -298
-248 -430 76 -132 146 -253 156 -270 11 -16 22 -36 26 -44 3 -8 30 -54 60 -103
-29 -49 53 -91 53 -93 0 -3 18 -34 40 -70 22 -36 40 -67 40 -69 0 -2 37 -66 81
--142 45 -77 98 -168 119 -204 20 -36 47 -81 58 -100 12 -19 27 -47 33 -62 6
--16 15 -28 20 -28 5 0 9 -4 9 -9 0 -6 63 -118 140 -251 77 -133 140 -243 140
--245 0 -2 18 -33 41 -70 22 -37 49 -83 60 -101 10 -19 29 -51 40 -71 25 -45
-109 -189 126 -218 7 -11 17 -29 22 -40 6 -11 22 -38 35 -60 14 -22 37 -62 52
--90 14 -27 35 -62 45 -77 11 -14 19 -29 19 -32 0 -3 18 -35 40 -71 22 -36 40
--67 40 -69 0 -2 19 -35 42 -72 23 -38 55 -94 72 -124 26 -47 139 -244 171
--298 6 -9 21 -36 34 -60 28 -48 37 -51 51 -19 6 12 19 36 29 52 10 17 27 46
-38 65 11 19 104 181 208 360 103 179 199 345 213 370 14 25 42 74 64 109 21
-34 38 65 38 67 0 2 18 33 40 69 22 36 40 67 40 69 0 3 177 310 199 346 16 26
-136 234 140 244 2 5 25 44 52 88 27 44 49 81 49 84 0 2 18 34 40 70 22 36 40
-67 40 69 0 2 20 36 43 77 35 58 169 289 297 513 9 17 50 86 90 155 40 69 86
-150 103 180 16 30 35 62 41 70 6 8 16 24 22 35 35 64 72 129 167 293 59 100
-116 199 127 220 11 20 30 53 41 72 43 72 1070 1850 1121 1940 14 25 65 113
-113 195 48 83 96 166 107 185 10 19 28 50 38 68 11 18 73 124 137 235 64 111
-175 303 246 427 71 124 173 299 225 390 52 91 116 202 143 248 27 45 49 85 49
-89 0 4 6 14 14 22 7 9 28 43 46 76 26 47 251 436 378 655 11 19 29 51 40 70
-11 19 101 176 201 348 99 172 181 317 181 323 0 5 5 9 10 9 6 0 10 5 10 11 0
-6 8 23 18 37 11 15 32 52 49 82 16 30 130 228 253 440 122 212 234 405 248
-430 13 25 39 70 57 100 39 65 69 117 130 225 25 44 50 87 55 95 12 19 78 134
-220 380 61 107 129 224 150 260 161 277 222 382 246 425 15 28 47 83 71 123
-24 41 43 78 43 83 0 5 4 9 8 9 4 0 13 12 19 28 7 15 23 45 36 67 66 110 277
-478 277 483 0 3 6 13 14 21 7 9 27 41 43 71 17 30 45 80 63 110 34 57 375 649
-394 685 6 11 16 27 22 35 6 8 26 42 44 75 18 33 41 74 51 90 10 17 24 41 32
-55 54 97 72 128 88 152 11 14 19 28 19 30 0 3 79 141 175 308 96 167 175 305
-175 308 0 3 6 13 14 21 7 9 26 39 41 66 33 60 276 483 338 587 24 40 46 80 50
-88 4 8 13 24 20 35 14 23 95 163 125 215 11 19 52 91 92 160 40 69 80 139 90
-155 9 17 103 179 207 360 105 182 200 346 211 365 103 181 463 802 489 845 7
-11 15 27 19 35 4 8 29 51 55 95 64 110 828 1433 848 1470 9 17 24 41 33 55 9
-14 29 48 45 77 15 28 52 93 82 145 30 51 62 107 71 123 17 30 231 398 400 690
-51 88 103 179 115 202 12 23 26 48 32 55 6 7 24 38 40 68 17 30 61 107 98 170
-37 63 84 144 103 180 19 36 41 72 48 81 8 8 14 18 14 21 0 4 27 51 59 106 32
-55 72 124 89 154 16 29 71 125 122 213 51 88 104 180 118 205 13 25 28 50 32
-55 4 6 17 26 28 45 11 19 45 80 77 135 31 55 66 116 77 135 11 19 88 152 171
-295 401 694 620 1072 650 1125 11 19 87 152 170 295 83 143 158 273 166 288 9
-16 21 36 26 45 6 9 31 52 55 96 25 43 54 94 66 115 11 20 95 164 186 321 91
-157 173 299 182 315 9 17 26 46 37 65 12 19 66 114 121 210 56 96 108 186 117
-200 8 14 24 40 34 59 24 45 383 664 412 713 5 9 17 29 26 45 15 28 120 210
-241 419 36 61 68 117 72 125 4 8 12 23 19 34 35 57 245 420 262 453 11 20 35
-61 53 90 17 29 32 54 32 56 0 3 28 51 62 108 33 57 70 119 80 138 10 19 23 42
-28 50 5 8 32 53 59 100 27 47 149 258 271 470 122 212 234 405 248 430 30 53
-62 108 80 135 6 11 15 27 19 35 4 8 85 150 181 315 96 165 187 323 202 350 31
-56 116 202 130 225 5 8 25 42 43 75 19 33 92 159 162 280 149 257 157 271 202
-350 19 33 38 67 43 75 9 14 228 392 275 475 12 22 55 96 95 165 40 69 80 139
-90 155 24 42 202 350 221 383 9 15 27 47 41 72 14 25 75 131 136 236 61 106
-121 210 134 232 99 172 271 470 279 482 5 8 23 40 40 70 18 30 81 141 142 245
-60 105 121 210 135 235 14 25 71 124 127 220 56 96 143 247 194 335 51 88 96
-167 102 175 14 24 180 311 204 355 23 43 340 590 356 615 5 8 50 87 101 175
-171 301 517 898 582 1008 25 43 46 81 46 83 0 2 12 23 27 47 14 23 40 67 56
-97 16 30 35 62 42 70 7 8 15 22 18 30 4 8 20 38 37 65 16 28 33 57 37 65 6 12
-111 196 143 250 5 8 55 95 112 193 57 98 113 195 126 215 12 20 27 46 32 57 6
-11 14 27 20 35 5 8 76 130 156 270 80 140 165 287 187 325 23 39 52 90 66 115
-13 25 30 52 37 61 8 8 14 18 14 21 0 4 41 77 92 165 50 87 175 302 276 478
-101 176 208 360 236 408 28 49 67 117 86 152 19 35 41 70 48 77 6 6 12 15 12
-19 0 7 124 224 167 291 12 21 23 40 23 42 0 2 21 40 46 83 26 43 55 92 64 109
-54 95 327 568 354 614 19 30 45 75 59 100 71 128 82 145 89 148 4 2 8 8 8 13
-0 5 42 82 94 172 311 538 496 858 518 897 14 25 40 70 58 100 18 30 42 71 53
-90 10 19 79 139 152 265 73 127 142 246 153 265 10 19 43 76 72 125 29 50 63
-108 75 130 65 116 80 140 87 143 4 2 8 8 8 12 0 8 114 212 140 250 6 8 14 24
-20 35 5 11 54 97 108 190 l100 170 -9611 3 c-5286 1 -9614 -1 -9618 -5 -5 -6
--419 -719 -619 -1068 -89 -155 -267 -463 -323 -560 -38 -66 -81 -140 -95 -165
--31 -56 -263 -457 -526 -910 -110 -190 -224 -388 -254 -440 -29 -52 -61 -109
--71 -125 -23 -39 -243 -420 -268 -465 -11 -19 -204 -352 -428 -740 -224 -388
--477 -826 -563 -975 -85 -148 -185 -322 -222 -385 -37 -63 -120 -207 -185
--320 -65 -113 -177 -306 -248 -430 -72 -124 -172 -297 -222 -385 -51 -88 -142
--245 -202 -350 -131 -226 -247 -427 -408 -705 -65 -113 -249 -432 -410 -710
--160 -278 -388 -673 -506 -877 -118 -205 -216 -373 -219 -373 -3 0 -52 82
--109 183 -58 100 -144 250 -192 332 -95 164 -402 696 -647 1120 -85 149 -228
-396 -317 550 -212 365 -982 1700 -1008 1745 -10 19 -43 76 -72 125 -29 50 -64
-110 -77 135 -14 25 -63 110 -110 190 -47 80 -96 165 -110 190 -14 25 -99 171
--188 325 -89 154 -174 300 -188 325 -13 25 -64 113 -112 195 -48 83 -140 242
--205 355 -65 113 -183 317 -263 454 -79 137 -152 264 -163 282 -50 89 -335
-583 -354 614 -12 19 -34 58 -50 85 -15 28 -129 226 -253 440 -124 215 -235
-408 -247 430 -12 22 -69 121 -127 220 -58 99 -226 389 -373 645 -148 256 -324
-561 -392 678 -67 117 -134 232 -147 255 -13 23 -33 59 -46 80 l-22 37 -9615 0
--9615 0 20 -32z"/>
-</g>
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.00251 14.9297L0 1.07422H6.14651L8.00251 4.27503L9.84583 1.07422H16L8.00251 14.9297Z" fill="black"/>
 </svg>

js/src/router/index.ts

@@ -47,7 +47,7 @@ export const routes = [
     path: "/search",
     name: RouteName.SEARCH,
     component: (): Promise<EsModuleComponent> =>
-      import(/* webpackChunkName: "search" */ "../views/Search.vue"),
+      import(/* webpackChunkName: "Search" */ "@/views/Search.vue"),
     props: true,
     meta: { requiredAuth: false },
   },
@@ -140,7 +140,9 @@ export const routes = [
     path: "/404",
     name: RouteName.PAGE_NOT_FOUND,
     component: (): Promise<EsModuleComponent> =>
-      import(/* webpackChunkName: "search" */ "../views/PageNotFound.vue"),
+      import(
+        /* webpackChunkName: "PageNotFound" */ "../views/PageNotFound.vue"
+      ),
     meta: { requiredAuth: false },
   },
   {

js/src/service-worker.ts

@@ -0,0 +1,89 @@
+import { registerRoute, setCatchHandler } from "workbox-routing";
+import {
+  NetworkFirst,
+  StaleWhileRevalidate,
+  CacheFirst,
+} from "workbox-strategies";
+
+// Used for filtering matches based on status code, header, or both
+import { CacheableResponsePlugin } from "workbox-cacheable-response";
+// Used to limit entries in cache, remove entries after a certain period of time
+import { ExpirationPlugin } from "workbox-expiration";
+
+import { precacheAndRoute, matchPrecache } from "workbox-precaching";
+
+// Use with precache injection
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+// eslint-disable-next-line no-underscore-dangle
+precacheAndRoute(self.__WB_MANIFEST);
+
+// Catch routing errors, like if the user is offline
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+setCatchHandler(async ({ event }) => {
+  // Return the precached offline page if a document is being requested
+  if (event.request.destination === "document") {
+    return matchPrecache("/offline.html");
+  }
+
+  return Response.error();
+});
+
+registerRoute(
+  // Check to see if the request is a navigation to a new page
+  ({ request }) => request.mode === "navigate",
+  // Use a Network First caching strategy
+  new NetworkFirst({
+    // Put all cached files in a cache named 'pages'
+    cacheName: "pages",
+    plugins: [
+      // Ensure that only requests that result in a 200 status are cached
+      new CacheableResponsePlugin({
+        statuses: [200],
+      }),
+    ],
+  })
+);
+
+// Cache CSS, JS, and Web Worker requests with a Stale While Revalidate strategy
+registerRoute(
+  // Check to see if the request's destination is style for stylesheets, script for JavaScript, or worker for web worker
+  ({ request }) =>
+    request.destination === "style" ||
+    request.destination === "script" ||
+    request.destination === "worker",
+  // Use a Stale While Revalidate caching strategy
+  new StaleWhileRevalidate({
+    // Put all cached files in a cache named 'assets'
+    cacheName: "assets",
+    plugins: [
+      // Ensure that only requests that result in a 200 status are cached
+      new CacheableResponsePlugin({
+        statuses: [200],
+      }),
+    ],
+  })
+);
+
+// Cache images with a Cache First strategy
+registerRoute(
+  // Check to see if the request's destination is style for an image
+  ({ request }) => request.destination === "image",
+  // Use a Cache First caching strategy
+  new CacheFirst({
+    // Put all cached files in a cache named 'images'
+    cacheName: "images",
+    plugins: [
+      // Ensure that only requests that result in a 200 status are cached
+      new CacheableResponsePlugin({
+        statuses: [200],
+      }),
+      // Don't cache more than 50 items, and expire them after 30 days
+      new ExpirationPlugin({
+        maxEntries: 50,
+        maxAgeSeconds: 60 * 60 * 24 * 30, // 30 Days
+      }),
+    ],
+  })
+);

js/src/views/Event/Event.vue

@@ -1306,7 +1306,7 @@ export default class Event extends EventMixin {
 }
 
 .header-picture-default {
-  background-image: url("/img/mobilizon_default_card.png");
+  background-image: url("../../../public/img/mobilizon_default_card.png");
 }
 
 div.sidebar {

js/src/views/Event/MyEvents.vue

@@ -356,18 +356,18 @@ section {
 
 .not-found {
   .img-container {
-    background-image: url("/img/pics/event_creation-480w.jpg");
+    background-image: url("../../../public/img/pics/event_creation-480w.jpg");
     @media (min-resolution: 2dppx) {
       & {
-        background-image: url("/img/pics/event_creation-1024w.jpg");
+        background-image: url("../../../public/img/pics/event_creation-1024w.jpg");
       }
     }
 
     &.webp {
-      background-image: url("/img/pics/event_creation-480w.webp");
+      background-image: url("../../../public/img/pics/event_creation-480w.webp");
       @media (min-resolution: 2dppx) {
         & {
-          background-image: url("/img/pics/event_creation-1024w.webp");
+          background-image: url("../../../public/img/pics/event_creation-1024w.webp");
         }
       }
     }

js/src/views/Group/MyGroups.vue

@@ -200,18 +200,18 @@ section {
 
 .not-found {
   .img-container {
-    background-image: url("/img/pics/group-480w.jpg");
+    background-image: url("../../../public/img/pics/group-480w.jpg");
 
     @media (min-resolution: 2dppx) {
       & {
-        background-image: url("/img/pics/group-1024w.jpg");
+        background-image: url("../../../public/img/pics/group-1024w.jpg");
       }
     }
     &.webp {
-      background-image: url("/img/pics/group-480w.webp");
+      background-image: url("../../../public/img/pics/group-480w.webp");
       @media (min-resolution: 2dppx) {
         & {
-          background-image: url("/img/pics/group-1024w.webp");
+          background-image: url("../../../public/img/pics/group-1024w.webp");
         }
       }
     }

js/src/views/Home.vue

@@ -649,11 +649,11 @@ section.hero {
     height: 100%;
     opacity: 0.3;
     z-index: -1;
-    background: url("/img/pics/homepage_background-1024w.png");
+    background: url("../../public/img/pics/homepage_background-1024w.png");
     background-size: cover;
   }
   &.webp::before {
-    background-image: url("/img/pics/homepage_background-1024w.webp");
+    background-image: url("../../public/img/pics/homepage_background-1024w.webp");
   }
 
   & > .hero-body {

js/tests/unit/svgTransform.ts

@@ -2,7 +2,7 @@
 const vueJest = require("vue-jest/lib/template-compiler");
 
 module.exports = {
-  process(content) {
+  process(content: any) {
     const { render } = vueJest({
       content,
       attrs: {

js/vue.config.js

@@ -1,40 +1,20 @@
 const path = require("path");
-const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
-const webpack = require("webpack");
 
 module.exports = {
   outputDir: path.resolve(__dirname, "../priv/static"),
-  configureWebpack: (config) => {
-    // Limit the used memory when building
-    // Source : https://stackoverflow.com/a/55810460/10204399
-    // get a reference to the existing ForkTsCheckerWebpackPlugin
-    const existingForkTsChecker = config.plugins.filter(
-      (p) => p instanceof ForkTsCheckerWebpackPlugin
-    )[0];
-
-    // remove the existing ForkTsCheckerWebpackPlugin
-    // so that we can replace it with our modified version
-    config.plugins = config.plugins.filter(
-      (p) => !(p instanceof ForkTsCheckerWebpackPlugin)
-    );
-
-    // copy the options from the original ForkTsCheckerWebpackPlugin
-    // instance and add the memoryLimit property
-    const forkTsCheckerOptions = existingForkTsChecker.options;
-    forkTsCheckerOptions.memoryLimit = process.env.NODE_BUILD_MEMORY || 2048;
-
-    config.plugins.push(new ForkTsCheckerWebpackPlugin(forkTsCheckerOptions));
-    config.plugins.push(
-      new webpack.DefinePlugin({
-        global: "window", // Placeholder for global used in any node_modules
-      })
-    );
-    config.node.global = false;
-  },
   chainWebpack: (config) => {
     // remove the prefetch plugin
     config.plugins.delete("prefetch");
   },
+  pwa: {
+    themeColor: "#ffd599", //not required for service worker, but place theme color here if manifest.json doesn't change the color
+    workboxPluginMode: "InjectManifest",
+    workboxOptions: {
+      // swSrc is required in InjectManifest mode.
+      swSrc: "./src/service-worker.ts",
+      // ...other Workbox options...
+    },
+  },
   css: {
     loaderOptions: {
       scss: {