fix: Fix PWA (#6090)

2025-10-26 15:54:20 -04:00 · 2025-09-03 00:44:52 -05:00
parent 37789c342e
commit ff958a5015
28 changed files with 109 additions and 110 deletions
--- a/dev/code-generation/gen_ts_locales.py
+++ b/dev/code-generation/gen_ts_locales.py
@@ -174,7 +174,7 @@ the code generation ID is hardcoded into the script and required in the nuxt con

 def inject_nuxt_values():
    all_date_locales = [
-        f'"{match.stem}": require("./lang/dateTimeFormats/{match.name}"),' for match in datetime_dir.glob("*.json")
+        f'"{match.stem}": () => import("./lang/dateTimeFormats/{match.name}"),' for match in datetime_dir.glob("*.json")
    ]

    all_langs = []
--- a/frontend/components/Layout/DefaultLayout.vue
+++ b/frontend/components/Layout/DefaultLayout.vue
@@ -1,6 +1,5 @@
 <template>
  <v-app dark>
-    <NuxtPwaManifest />
    <TheSnackbar />

    <AppHeader>
--- a/frontend/i18n.config.ts
+++ b/frontend/i18n.config.ts
@@ -1,48 +1,47 @@
-/* eslint-disable @typescript-eslint/no-require-imports */
 const datetimeFormats = {
  // CODE_GEN_ID: DATE_LOCALES
-  "af-ZA": require("./lang/dateTimeFormats/af-ZA.json"),
-  "ar-SA": require("./lang/dateTimeFormats/ar-SA.json"),
-  "bg-BG": require("./lang/dateTimeFormats/bg-BG.json"),
-  "ca-ES": require("./lang/dateTimeFormats/ca-ES.json"),
-  "cs-CZ": require("./lang/dateTimeFormats/cs-CZ.json"),
-  "da-DK": require("./lang/dateTimeFormats/da-DK.json"),
-  "de-DE": require("./lang/dateTimeFormats/de-DE.json"),
-  "el-GR": require("./lang/dateTimeFormats/el-GR.json"),
-  "en-GB": require("./lang/dateTimeFormats/en-GB.json"),
-  "en-US": require("./lang/dateTimeFormats/en-US.json"),
-  "es-ES": require("./lang/dateTimeFormats/es-ES.json"),
-  "et-EE": require("./lang/dateTimeFormats/et-EE.json"),
-  "fi-FI": require("./lang/dateTimeFormats/fi-FI.json"),
-  "fr-BE": require("./lang/dateTimeFormats/fr-BE.json"),
-  "fr-CA": require("./lang/dateTimeFormats/fr-CA.json"),
-  "fr-FR": require("./lang/dateTimeFormats/fr-FR.json"),
-  "gl-ES": require("./lang/dateTimeFormats/gl-ES.json"),
-  "he-IL": require("./lang/dateTimeFormats/he-IL.json"),
-  "hr-HR": require("./lang/dateTimeFormats/hr-HR.json"),
-  "hu-HU": require("./lang/dateTimeFormats/hu-HU.json"),
-  "is-IS": require("./lang/dateTimeFormats/is-IS.json"),
-  "it-IT": require("./lang/dateTimeFormats/it-IT.json"),
-  "ja-JP": require("./lang/dateTimeFormats/ja-JP.json"),
-  "ko-KR": require("./lang/dateTimeFormats/ko-KR.json"),
-  "lt-LT": require("./lang/dateTimeFormats/lt-LT.json"),
-  "lv-LV": require("./lang/dateTimeFormats/lv-LV.json"),
-  "nl-NL": require("./lang/dateTimeFormats/nl-NL.json"),
-  "no-NO": require("./lang/dateTimeFormats/no-NO.json"),
-  "pl-PL": require("./lang/dateTimeFormats/pl-PL.json"),
-  "pt-BR": require("./lang/dateTimeFormats/pt-BR.json"),
-  "pt-PT": require("./lang/dateTimeFormats/pt-PT.json"),
-  "ro-RO": require("./lang/dateTimeFormats/ro-RO.json"),
-  "ru-RU": require("./lang/dateTimeFormats/ru-RU.json"),
-  "sk-SK": require("./lang/dateTimeFormats/sk-SK.json"),
-  "sl-SI": require("./lang/dateTimeFormats/sl-SI.json"),
-  "sr-SP": require("./lang/dateTimeFormats/sr-SP.json"),
-  "sv-SE": require("./lang/dateTimeFormats/sv-SE.json"),
-  "tr-TR": require("./lang/dateTimeFormats/tr-TR.json"),
-  "uk-UA": require("./lang/dateTimeFormats/uk-UA.json"),
-  "vi-VN": require("./lang/dateTimeFormats/vi-VN.json"),
-  "zh-CN": require("./lang/dateTimeFormats/zh-CN.json"),
-  "zh-TW": require("./lang/dateTimeFormats/zh-TW.json"),
+  "af-ZA": () => import("./lang/dateTimeFormats/af-ZA.json"),
+  "ar-SA": () => import("./lang/dateTimeFormats/ar-SA.json"),
+  "bg-BG": () => import("./lang/dateTimeFormats/bg-BG.json"),
+  "ca-ES": () => import("./lang/dateTimeFormats/ca-ES.json"),
+  "cs-CZ": () => import("./lang/dateTimeFormats/cs-CZ.json"),
+  "da-DK": () => import("./lang/dateTimeFormats/da-DK.json"),
+  "de-DE": () => import("./lang/dateTimeFormats/de-DE.json"),
+  "el-GR": () => import("./lang/dateTimeFormats/el-GR.json"),
+  "en-GB": () => import("./lang/dateTimeFormats/en-GB.json"),
+  "en-US": () => import("./lang/dateTimeFormats/en-US.json"),
+  "es-ES": () => import("./lang/dateTimeFormats/es-ES.json"),
+  "et-EE": () => import("./lang/dateTimeFormats/et-EE.json"),
+  "fi-FI": () => import("./lang/dateTimeFormats/fi-FI.json"),
+  "fr-BE": () => import("./lang/dateTimeFormats/fr-BE.json"),
+  "fr-CA": () => import("./lang/dateTimeFormats/fr-CA.json"),
+  "fr-FR": () => import("./lang/dateTimeFormats/fr-FR.json"),
+  "gl-ES": () => import("./lang/dateTimeFormats/gl-ES.json"),
+  "he-IL": () => import("./lang/dateTimeFormats/he-IL.json"),
+  "hr-HR": () => import("./lang/dateTimeFormats/hr-HR.json"),
+  "hu-HU": () => import("./lang/dateTimeFormats/hu-HU.json"),
+  "is-IS": () => import("./lang/dateTimeFormats/is-IS.json"),
+  "it-IT": () => import("./lang/dateTimeFormats/it-IT.json"),
+  "ja-JP": () => import("./lang/dateTimeFormats/ja-JP.json"),
+  "ko-KR": () => import("./lang/dateTimeFormats/ko-KR.json"),
+  "lt-LT": () => import("./lang/dateTimeFormats/lt-LT.json"),
+  "lv-LV": () => import("./lang/dateTimeFormats/lv-LV.json"),
+  "nl-NL": () => import("./lang/dateTimeFormats/nl-NL.json"),
+  "no-NO": () => import("./lang/dateTimeFormats/no-NO.json"),
+  "pl-PL": () => import("./lang/dateTimeFormats/pl-PL.json"),
+  "pt-BR": () => import("./lang/dateTimeFormats/pt-BR.json"),
+  "pt-PT": () => import("./lang/dateTimeFormats/pt-PT.json"),
+  "ro-RO": () => import("./lang/dateTimeFormats/ro-RO.json"),
+  "ru-RU": () => import("./lang/dateTimeFormats/ru-RU.json"),
+  "sk-SK": () => import("./lang/dateTimeFormats/sk-SK.json"),
+  "sl-SI": () => import("./lang/dateTimeFormats/sl-SI.json"),
+  "sr-SP": () => import("./lang/dateTimeFormats/sr-SP.json"),
+  "sv-SE": () => import("./lang/dateTimeFormats/sv-SE.json"),
+  "tr-TR": () => import("./lang/dateTimeFormats/tr-TR.json"),
+  "uk-UA": () => import("./lang/dateTimeFormats/uk-UA.json"),
+  "vi-VN": () => import("./lang/dateTimeFormats/vi-VN.json"),
+  "zh-CN": () => import("./lang/dateTimeFormats/zh-CN.json"),
+  "zh-TW": () => import("./lang/dateTimeFormats/zh-TW.json"),
  // END: DATE_LOCALES
 };

--- a/frontend/layouts/basic.vue
+++ b/frontend/layouts/basic.vue
@@ -1,6 +1,5 @@
 <template>
  <v-app dark>
-    <NuxtPwaManifest />
    <TheSnackbar />

    <AppHeader :menu="false" />
--- a/frontend/layouts/blank.vue
+++ b/frontend/layouts/blank.vue
@@ -1,6 +1,5 @@
 <template>
  <v-app dark>
-    <NuxtPwaManifest />
    <TheSnackbar />

    <v-banner
--- a/frontend/nuxt.config.ts
+++ b/frontend/nuxt.config.ts
@@ -1,5 +1,4 @@
 import { defineNuxtConfig } from "nuxt/config";
-import commonjs from "vite-plugin-commonjs";

 const AUTH_TOKEN = "mealie.auth.token";

@@ -56,6 +55,7 @@ export default defineNuxtConfig({
        { "rel": "shortcut icon", "type": "image/png", "href": "/icons/icon-x64.png", "data-n-head": "ssr" },
        { "rel": "apple-touch-icon", "type": "image/png", "href": "/icons/apple-touch-icon.png", "data-n-head": "ssr" },
        { "rel": "mask-icon", "href": "/icons/safari-pinned-tab.svg", "data-n-head": "ssr" },
+        { "rel": "manifest", "href": "/manifest.webmanifest", "data-n-head": "ssr" },
      ],
    },

@@ -126,12 +126,6 @@ export default defineNuxtConfig({
    baseURL: process.env.SUB_PATH || "",
  },

-  vite: {
-    plugins: [
-      commonjs(),
-    ],
-  },
-
  auth: {
    isEnabled: true,
    // disableServerSideAuth: true,
@@ -240,37 +234,57 @@ export default defineNuxtConfig({
    vueI18n: "./../i18n.config.ts", // note: we need to up one ../ because the default root of lang dir is the /frontend/i18n, which can not be configured
  },

-  // PWA module configuration: https://go.nuxtjs.dev/pwa
+  // PWA module configuration: https://vite-pwa-org.netlify.app/frameworks/nuxt.html
  pwa: {
-    mode: process.env.NODE_ENV === "production" ? "production" : "development",
    registerType: "autoUpdate",
-    useCredentials: true,
+    devOptions: {
+      enabled: false,
+      suppressWarnings: true,
+    },
+    workbox: {
+      navigateFallback: "/",
+      globPatterns: ["**/*.{js,css,html,png,svg,ico}"],
+      cleanupOutdatedCaches: true,
+      skipWaiting: true,
+      clientsClaim: true,
+    },
+    client: {
+      installPrompt: true,
+      periodicSyncForUpdates: 120,
+    },
+    includeAssets: ["favicon.ico", "apple-touch-icon.png", "safari-pinned-tab.svg"],
    manifest: {
-      start_url: "/",
-      scope: "/",
-      lang: "en",
      name: "Mealie",
      short_name: "Mealie",
-      id: "mealie",
-      description: "Mealie is a recipe management and meal planning app",
-      theme_color: process.env.THEME_LIGHT_PRIMARY || "#E58325",
-      background_color: "#FFFFFF",
+      id: "/",
+      start_url: "/",
+      scope: "/",
      display: "standalone",
+      background_color: "#FFFFFF",
+      theme_color: process.env.THEME_LIGHT_PRIMARY || "#E58325",
+      description: "Mealie is a recipe management and meal planning app",
+      lang: "en",
      display_override: [
        "standalone",
        "minimal-ui",
        "browser",
        "window-controls-overlay",
      ],
+      orientation: "portrait-primary",
+      categories: ["food", "lifestyle"],
+      prefer_related_applications: false,
+      handle_links: "preferred",
+      launch_handler: {
+        client_mode: ["focus-existing", "auto"],
+      },
+      edge_side_panel: {
+        preferred_width: 400,
+      },
      share_target: {
        action: "/r/create/url",
        method: "GET",
        params: {
-          /* title and url are not currently used in Mealie. If there are issues
-              with sharing, uncommenting those lines might help solve the puzzle. */
-          // "title": "title",
          text: "recipe_import_url",
-          // "url": "url",
        },
      },
      icons: [
@@ -383,17 +397,6 @@ export default defineNuxtConfig({
          ],
        },
      ],
-      prefer_related_applications: false,
-      handle_links: "preferred",
-      categories: [
-        "food",
-      ],
-      launch_handler: {
-        client_mode: ["focus-existing", "auto"],
-      },
-      edge_side_panel: {
-        preferred_width: 400,
-      },
    },
  },

--- a/frontend/pages/admin/manage/groups/[id].vue
+++ b/frontend/pages/admin/manage/groups/[id].vue
@@ -9,7 +9,7 @@
          width="100%"
          max-height="125"
          max-width="125"
-          :src="require('~/static/svgs/manage-group-settings.svg')"
+          src="/svgs/manage-group-settings.svg"
        />
      </template>
      <template #title>
--- a/frontend/pages/admin/manage/households/[id].vue
+++ b/frontend/pages/admin/manage/households/[id].vue
@@ -9,7 +9,7 @@
          width="100%"
          max-height="125"
          max-width="125"
-          :src="require('~/static/svgs/manage-group-settings.svg')"
+          src="/svgs/manage-group-settings.svg"
        />
      </template>
      <template #title>
--- a/frontend/pages/admin/manage/users/[id].vue
+++ b/frontend/pages/admin/manage/users/[id].vue
@@ -9,7 +9,7 @@
          width="100%"
          max-height="125"
          max-width="125"
-          :src="require('~/static/svgs/manage-profile.svg')"
+          src="/svgs/manage-profile.svg"
        />
      </template>
      <template #title>
--- a/frontend/pages/admin/manage/users/create.vue
+++ b/frontend/pages/admin/manage/users/create.vue
@@ -6,7 +6,7 @@
          width="100%"
          max-height="125"
          max-width="125"
-          :src="require('~/static/svgs/manage-profile.svg')"
+          src="/svgs/manage-profile.svg"
        />
      </template>
      <template #title>
--- a/frontend/pages/admin/site-settings.vue
+++ b/frontend/pages/admin/site-settings.vue
@@ -10,7 +10,7 @@
          width="100%"
          max-height="200"
          max-width="150"
-          :src="require('~/static/svgs/admin-site-settings.svg')"
+          src="/svgs/admin-site-settings.svg"
        />
      </template>
      <template #title>
--- a/frontend/pages/g/[groupSlug]/cookbooks/index.vue
+++ b/frontend/pages/g/[groupSlug]/cookbooks/index.vue
@@ -42,7 +42,7 @@
    <v-container class="px-12" max-width="1000">
      <BasePageTitle divider>
        <template #header>
-          <v-img width="100%" max-height="100" max-width="100" :src="require('~/static/svgs/manage-cookbooks.svg')" />
+          <v-img width="100%" max-height="100" max-width="100" src="/svgs/manage-cookbooks.svg" />
        </template>
        <template #title>
          {{ $t("cookbook.cookbooks") }}
--- a/frontend/pages/g/[groupSlug]/r/create.vue
+++ b/frontend/pages/g/[groupSlug]/r/create.vue
@@ -7,7 +7,7 @@
            width="100%"
            max-height="175"
            max-width="175"
-            :src="require('~/static/svgs/recipes-create.svg')"
+            src="/svgs/recipes-create.svg"
          />
        </template>
        <template #title>
--- a/frontend/pages/g/[groupSlug]/recipes/finder/index.vue
+++ b/frontend/pages/g/[groupSlug]/recipes/finder/index.vue
@@ -6,7 +6,7 @@
          width="100"
          max-height="100"
          max-width="100"
-          :src="require('~/static/svgs/manage-cookbooks.svg')"
+          src="/svgs/manage-cookbooks.svg"
        />
      </template>
      <template #title>
--- a/frontend/pages/g/[groupSlug]/recipes/timeline.vue
+++ b/frontend/pages/g/[groupSlug]/recipes/timeline.vue
@@ -9,7 +9,7 @@
          width="100%"
          max-height="200"
          max-width="150"
-          :src="require('~/static/svgs/manage-members.svg')"
+          src="/svgs/manage-members.svg"
        />
      </template>
      <template #title>
--- a/frontend/pages/group/data.vue
+++ b/frontend/pages/group/data.vue
@@ -6,7 +6,7 @@
          width="100%"
          max-height="175"
          max-width="175"
-          :src="require('~/static/svgs/manage-recipes.svg')"
+          src="/svgs/manage-recipes.svg"
        />
      </template>
      <template #title>
--- a/frontend/pages/group/index.vue
+++ b/frontend/pages/group/index.vue
@@ -6,7 +6,7 @@
          width="100%"
          max-height="100"
          max-width="100"
-          :src="require('~/static/svgs/manage-group-settings.svg')"
+          src="/svgs/manage-group-settings.svg"
        />
      </template>
      <template #title>
--- a/frontend/pages/group/migrations.vue
+++ b/frontend/pages/group/migrations.vue
@@ -7,7 +7,7 @@
          max-height="200"
          max-width="200"
          class="mb-2"
-          :src="require('~/static/svgs/manage-data-migrations.svg')"
+          src="/svgs/manage-data-migrations.svg"
        />
      </template>
      <template #title>
--- a/frontend/pages/group/reports/[id].vue
+++ b/frontend/pages/group/reports/[id].vue
@@ -7,7 +7,7 @@
          max-height="200"
          max-width="200"
          class="mb-2"
-          :src="require('~/static/svgs/data-reports.svg')"
+          src="/svgs/data-reports.svg"
        />
      </template>
      <template #title>
--- a/frontend/pages/household/index.vue
+++ b/frontend/pages/household/index.vue
@@ -8,7 +8,7 @@
          width="100%"
          max-height="100"
          max-width="100"
-          :src="require('~/static/svgs/manage-group-settings.svg')"
+          src="/svgs/manage-group-settings.svg"
        />
      </template>
      <template #title>
--- a/frontend/pages/household/mealplan/settings.vue
+++ b/frontend/pages/household/mealplan/settings.vue
@@ -6,7 +6,7 @@
          width="100%"
          max-height="100"
          max-width="100"
-          :src="require('~/static/svgs/manage-cookbooks.svg')"
+          src="/svgs/manage-cookbooks.svg"
        />
      </template>
      <template #title>
--- a/frontend/pages/household/members.vue
+++ b/frontend/pages/household/members.vue
@@ -6,7 +6,7 @@
          width="100%"
          max-height="125"
          max-width="125"
-          :src="require('~/static/svgs/manage-members.svg')"
+          src="/svgs/manage-members.svg"
        />
      </template>
      <template #title>
--- a/frontend/pages/household/notifiers.vue
+++ b/frontend/pages/household/notifiers.vue
@@ -37,7 +37,7 @@
          width="100%"
          max-height="125"
          max-width="125"
-          :src="require('~/static/svgs/manage-notifiers.svg')"
+          src="/svgs/manage-notifiers.svg"
        />
      </template>
      <template #title>
--- a/frontend/pages/household/webhooks.vue
+++ b/frontend/pages/household/webhooks.vue
@@ -6,7 +6,7 @@
          width="100%"
          max-height="125"
          max-width="125"
-          :src="require('~/static/svgs/manage-webhooks.svg')"
+          src="/svgs/manage-webhooks.svg"
        />
      </template>
      <template #title>
--- a/frontend/pages/shopping-lists/[id].vue
+++ b/frontend/pages/shopping-lists/[id].vue
@@ -57,7 +57,7 @@
              <v-img
                max-height="100"
                max-width="100"
-                :src="require('~/static/svgs/shopping-cart.svg')"
+                src="/svgs/shopping-cart.svg"
              />
            </v-col>
            <v-col class="d-flex justify-end">
--- a/frontend/pages/shopping-lists/index.vue
+++ b/frontend/pages/shopping-lists/index.vue
@@ -55,7 +55,7 @@
          width="100%"
          max-height="100"
          max-width="100"
-          :src="require('~/static/svgs/shopping-cart.svg')"
+          src="/svgs/shopping-cart.svg"
        />
      </template>
      <template #title>
--- a/frontend/pages/user/profile/api-tokens.vue
+++ b/frontend/pages/user/profile/api-tokens.vue
@@ -6,7 +6,7 @@
          width="100%"
          max-height="200px"
          max-width="200px"
-          :src="require('~/static/svgs/manage-api-tokens.svg')"
+          src="/svgs/manage-api-tokens.svg"
        />
      </template>
      <template #title>
--- a/frontend/pages/user/profile/index.vue
+++ b/frontend/pages/user/profile/index.vue
@@ -91,7 +91,7 @@
        >
          <UserProfileLinkCard
            :link="{ text: $t('profile.manage-user-profile'), to: `/user/profile/edit` }"
-            :image="require('~/static/svgs/manage-profile.svg')"
+            image="/svgs/manage-profile.svg"
          >
            <template #title>
              {{ $t('profile.user-settings') }}
@@ -107,7 +107,7 @@
          >
            <UserProfileLinkCard
              :link="{ text: $t('profile.manage-your-api-tokens'), to: `/user/profile/api-tokens` }"
-              :image="require('~/static/svgs/manage-api-tokens.svg')"
+              image="/svgs/manage-api-tokens.svg"
            >
              <template #title>
                {{ $t('settings.token.api-tokens') }}
@@ -135,7 +135,7 @@
        >
          <UserProfileLinkCard
            :link="{ text: $t('profile.household-settings'), to: `/household` }"
-            :image="require('~/static/svgs/manage-group-settings.svg')"
+            image="/svgs/manage-group-settings.svg"
          >
            <template #title>
              {{ $t('profile.household-settings') }}
@@ -150,7 +150,7 @@
        >
          <UserProfileLinkCard
            :link="{ text: $t('profile.manage-cookbooks'), to: `/g/${groupSlug}/cookbooks` }"
-            :image="require('~/static/svgs/manage-cookbooks.svg')"
+            image="/svgs/manage-cookbooks.svg"
          >
            <template #title>
              {{ $t('sidebar.cookbooks') }}
@@ -166,7 +166,7 @@
        >
          <UserProfileLinkCard
            :link="{ text: $t('profile.manage-members'), to: `/household/members` }"
-            :image="require('~/static/svgs/manage-members.svg')"
+            image="/svgs/manage-members.svg"
          >
            <template #title>
              {{ $t('profile.members') }}
@@ -183,7 +183,7 @@
          >
            <UserProfileLinkCard
              :link="{ text: $t('profile.manage-webhooks'), to: `/household/webhooks` }"
-              :image="require('~/static/svgs/manage-webhooks.svg')"
+              image="/svgs/manage-webhooks.svg"
            >
              <template #title>
                {{ $t('settings.webhooks.webhooks') }}
@@ -200,7 +200,7 @@
          >
            <UserProfileLinkCard
              :link="{ text: $t('profile.manage-notifiers'), to: `/household/notifiers` }"
-              :image="require('~/static/svgs/manage-notifiers.svg')"
+              image="/svgs/manage-notifiers.svg"
            >
              <template #title>
                {{ $t('profile.notifiers') }}
@@ -228,7 +228,7 @@
        >
          <UserProfileLinkCard
            :link="{ text: $t('profile.group-settings'), to: `/group` }"
-            :image="require('~/static/svgs/manage-group-settings.svg')"
+            image="/svgs/manage-group-settings.svg"
          >
            <template #title>
              {{ $t('profile.group-settings') }}
@@ -244,7 +244,7 @@
        >
          <UserProfileLinkCard
            :link="{ text: $t('profile.manage-data'), to: `/group/data/foods` }"
-            :image="require('~/static/svgs/manage-recipes.svg')"
+            image="/svgs/manage-recipes.svg"
          >
            <template #title>
              {{ $t('profile.manage-data') }}
@@ -260,7 +260,7 @@
          >
            <UserProfileLinkCard
              :link="{ text: $t('profile.manage-data-migrations'), to: `/group/migrations` }"
-              :image="require('~/static/svgs/manage-data-migrations.svg')"
+              image="/svgs/manage-data-migrations.svg"
            >
              <template #title>
                {{ $t('profile.data-migrations') }}