feature: adds config for service worker and pwa assets config

Luis Doebbel · Luis Doebbel · commit 64b22b5b10db · 2024-07-22T09:35:49.000-04:00
diff --git a/frontend/index.html b/frontend/index.html
@@ -2,7 +2,6 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
     <meta name="viewport" content="initial-scale=1, width=device-width" />
     <meta name="theme-color" content="#000000" />
     <!-- Fonts to support Material Design -->
diff --git a/frontend/package.json b/frontend/package.json
@@ -46,6 +46,7 @@
     "@types/sass": "^1.45.0",
     "@typescript-eslint/eslint-plugin": "^7.13.1",
     "@typescript-eslint/parser": "^7.13.1",
+    "@vite-pwa/assets-generator": "^0.2.4",
     "@vitejs/plugin-react": "^4.3.1",
     "eclint": "^2.8.1",
     "eslint": "^8.57.0",
@@ -63,6 +64,11 @@
     "stylelint-prettier": "^5.0.0",
     "stylelint-scss": "^6.3.2",
     "typescript": "^5.2.2",
-    "vite": "^5.3.1"
+    "vite": "^5.3.1",
+    "vite-plugin-pwa": "^0.20.0"
+  },
+  "resolutions": {
+    "sharp": "0.32.6",
+    "sharp-ico": "0.1.5"
   }
 }
diff --git a/frontend/pwa-assets.config.ts b/frontend/pwa-assets.config.ts
@@ -0,0 +1,12 @@
+import {
+  defineConfig,
+  minimal2023Preset as preset,
+} from "@vite-pwa/assets-generator/config";
+
+export default defineConfig({
+  headLinkOptions: {
+    preset: "2023",
+  },
+  preset,
+  images: ["public/vite.svg"],
+});
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
@@ -1,12 +1,44 @@
 import { defineConfig, loadEnv } from "vite";
+import { VitePWA } from "vite-plugin-pwa";
 import react from "@vitejs/plugin-react";
 import path from "path";
 
 export default ({ mode }: { mode: string }) => {
   process.env = { ...process.env, ...loadEnv(mode, process.cwd()) };
 
   return defineConfig({
-    plugins: [react()],
+    plugins: [
+      react(),
+      VitePWA({
+        registerType: "autoUpdate",
+        injectRegister: false,
+
+        pwaAssets: {
+          disabled: false,
+          config: true,
+        },
+
+        manifest: {
+          name: "react-template-demo",
+          short_name: "react-template-demo",
+          description: "Nventive React Template Demo",
+          theme_color: "#ffffff",
+        },
+
+        workbox: {
+          globPatterns: ["**/*.{js,css,html,svg,png,ico}"],
+          cleanupOutdatedCaches: true,
+          clientsClaim: true,
+        },
+
+        devOptions: {
+          enabled: true,
+          navigateFallback: "index.html",
+          suppressWarnings: true,
+          type: "module",
+        },
+      }),
+    ],
     css: {
       preprocessorOptions: {
         scss: {
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
