feat(front): update Nuxt configuration and dependencies for PWA support

front/nuxt.config.ts

@@ -1,6 +1,90 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   compatibilityDate: '2024-04-03',
+  app: {
+    head: {
+      htmlAttrs: {
+        lang: "en",
+        dir: "ltr",
+      },
+      title: "Home",
+      titleTemplate: "%s - PWA App",
+      link: [
+        {
+          rel: "manifest",
+          href: "/manifest.json",
+        },
+        {
+          rel: "shortcut icon",
+          href: "/favicon.ico",
+        },
+        {
+          rel: "apple-touch-icon",
+          href: "/apple-touch-icon.png",
+          sizes: "180x180",
+        },
+      ],
+      meta: [
+        {
+          name: "application-name",
+          content: "PWA App",
+        },
+        {
+          name: "description",
+          content: "Best PWA app in the world!",
+        },
+        {
+          name: "apple-mobile-web-app-capable",
+          content: "yes",
+        },
+        {
+          name: "apple-mobile-web-app-status-bar-style",
+          content: "default",
+        },
+        {
+          name: "apple-mobile-web-app-title",
+          content: "My Awesome PWA App",
+        },
+        {
+          name: "format-detection",
+          content: "telephone=no",
+        },
+        {
+          property: "og:type",
+          content: "website",
+        },
+        {
+          property: "og:title",
+          content: "My Awesome PWA App",
+        },
+        {
+          property: "og:description",
+          content: "Best PWA app in the world!",
+        },
+        {
+          property: "og:site:name",
+          content: "PWA App",
+        },
+        {
+          name: "twitter:card",
+          content: "website",
+        },
+        {
+          name: "twitter:title",
+          content: "My Awesome PWA App",
+        },
+        {
+          name: "twitter:description",
+          content: "Best PWA app in the world!",
+        },
+        {
+          name: "theme-color",
+          content: "#FFFFFF",
+        },
+      ],
+    },
+  },
   devtools: { enabled: true },
-  modules: ['@nuxtjs/tailwindcss', '@vueuse/nuxt',],
+  modules: ['@nuxtjs/tailwindcss', '@vueuse/nuxt', '@serwist/nuxt'],
+  serwist: {},
 })

front/package.json

@@ -10,7 +10,7 @@
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
-    "nuxt": "^3.13.0",
+    "nuxt": "^3.16.0",
     "vue": "latest",
     "vue-router": "latest"
   },
@@ -18,6 +18,8 @@
   "devDependencies": {
     "@nuxtjs/tailwindcss": "^6.13.2",
     "@serwist/build": "^9.0.12",
+    "@serwist/nuxt": "^9.0.12",
+    "@serwist/vite": "^9.0.12",
     "@vueuse/core": "^13.0.0",
     "@vueuse/nuxt": "^13.0.0",
     "serwist": "^9.0.12"

front/service-worker.ts

@@ -0,0 +1,25 @@
+import { defaultCache } from "@serwist/vite/worker";
+import type { PrecacheEntry, SerwistGlobalConfig } from "serwist";
+import { Serwist } from "serwist";
+
+// This declares the value of `injectionPoint` to TypeScript.
+// `injectionPoint` is the string that will be replaced by the
+// actual precache manifest. By default, this string is set to
+// `"self.__SW_MANIFEST"`.
+declare global {
+  interface WorkerGlobalScope extends SerwistGlobalConfig {
+    __SW_MANIFEST: (PrecacheEntry | string)[] | undefined;
+  }
+}
+
+declare const self: ServiceWorkerGlobalScope;
+
+const serwist = new Serwist({
+  precacheEntries: self.__SW_MANIFEST,
+  skipWaiting: true,
+  clientsClaim: true,
+  navigationPreload: true,
+  runtimeCaching: defaultCache,
+});
+
+serwist.addEventListeners();

front/tsconfig.json

@@ -1,4 +1,12 @@
 {
   // https://nuxt.com/docs/guide/concepts/typescript
-  "extends": "./.nuxt/tsconfig.json"
-}
+  "extends": "./.nuxt/tsconfig.json",
+  "compilerOptions": {
+    // Other options...
+    "lib": [
+      // Other libs...
+      // Add this! Doing so adds WebWorker and ServiceWorker types to the global.
+      "webworker"
+    ],
+  },
+}