Import the @kevinmarrec/nuxt-pwa module to fix the related bugs of PWA feature.

app.vue

@@ -1,6 +1,5 @@
 <template>
   <div>
-    <VitePwaManifest />
     <NuxtLoadingIndicator />
     <NuxtLayout>
       <NuxtPage />

layouts/default.vue

@@ -304,48 +304,6 @@ onNuxtReady(async () => {
       <NuxtPage/>
     </v-main>
 
-    <div>
-      <div
-          v-if="$pwa?.offlineReady || $pwa?.needRefresh"
-          class="pwa-toast"
-          role="alert"
-      >
-        <div class="message">
-          <span v-if="$pwa.offlineReady">
-            App ready to work offline
-          </span>
-          <span v-else>
-            New content available, click on reload button to update.
-          </span>
-        </div>
-        <button
-            v-if="$pwa.needRefresh"
-            @click="$pwa.updateServiceWorker()"
-        >
-          Reload
-        </button>
-        <button @click="$pwa.cancelPrompt()">
-          Close
-        </button>
-      </div>
-      <div
-          v-if="$pwa?.showInstallPrompt && !$pwa?.offlineReady && !$pwa?.needRefresh"
-          class="pwa-toast"
-          role="alert"
-      >
-        <div class="message">
-          <span>
-            Install PWA
-          </span>
-        </div>
-        <button @click="$pwa.install()">
-          Install
-        </button>
-        <button @click="$pwa.cancelInstall()">
-          Cancel
-        </button>
-      </div>
-    </div>
   </v-app>
 </template>
 
@@ -361,26 +319,4 @@ onNuxtReady(async () => {
   border-radius: 3px;
 }
 
-.pwa-toast {
-  position: fixed;
-  right: 0;
-  bottom: 0;
-  margin: 16px;
-  padding: 12px;
-  border: 1px solid #8885;
-  border-radius: 4px;
-  z-index: 1;
-  text-align: left;
-  box-shadow: 3px 4px 5px 0 #8885;
-}
-.pwa-toast .message {
-  margin-bottom: 8px;
-}
-.pwa-toast button {
-  border: 1px solid #8885;
-  outline: none;
-  margin-right: 5px;
-  border-radius: 2px;
-  padding: 3px 10px;
-}
 </style>

nuxt.config.ts

@@ -25,36 +25,18 @@ export default defineNuxtConfig({
         'highlight.js/styles/panda-syntax-dark.css',
     ],
     modules: [
-        '@vite-pwa/nuxt',
+        '@kevinmarrec/nuxt-pwa',
         '@nuxtjs/color-mode',
         '@nuxtjs/i18n',
     ],
     pwa: {
-        registerType: 'autoUpdate',
         manifest: {
             name: appName,
             short_name: appName,
-            icons: [
+            description: 'A ChatGPT web Client'
-                {
-                    src: 'icon-black.svg',
-                    sizes: '900x900',
-                    purpose: 'any maskable',
-                }
-            ],
         },
         workbox: {
-            navigateFallback: '/',
+            enabled: true
-            globPatterns: ['**/*.{js,css,html,png,svg,ico}'],
-        },
-        client: {
-            installPrompt: true,
-            // you don't need to include this: only for testing purposes
-            // if enabling periodic sync for update use 1 hour or so (periodicSyncForUpdates: 3600)
-            periodicSyncForUpdates: 20,
-        },
-        devOptions: {
-            enabled: false,
-            type: 'module',
         }
     },
     i18n: {

package.json

@@ -8,6 +8,7 @@
     "postinstall": "nuxt prepare"
   },
   "devDependencies": {
+    "@kevinmarrec/nuxt-pwa": "^0.17.0",
     "@nuxtjs/color-mode": "^3.2.0",
     "@nuxtjs/i18n": "^8.0.0-beta.9",
     "material-design-icons-iconfont": "^6.7.0",
@@ -15,7 +16,6 @@
   },
   "dependencies": {
     "@microsoft/fetch-event-source": "^2.0.1",
-    "@vite-pwa/nuxt": "^0.0.7",
     "copy-to-clipboard": "^3.3.3",
     "highlight.js": "^11.7.0",
     "is-mobile": "^3.1.1",