WIP vue-cli 5

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

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 {