Revert force download through api

.gitignore

@@ -46,3 +46,6 @@ romm_mock
 # testing
 backend/romm_test/resources
 backend/romm_test/logs
+
+# service worker
+frontend/dev-dist

frontend/src/components/Game/Card/ActionBar.vue

@@ -15,13 +15,24 @@ const downloadUrl = `${window.location.origin}${props.rom.download_path}`;
   <v-card-text>
     <v-row>
       <v-col class="pa-0">
-        <v-btn
-          @click="downloadRomApi(rom)"
-          :disabled="downloadStore.value.includes(rom.file_name)"
-          icon="mdi-download"
-          size="x-small"
-          variant="text"
-        />
+        <template v-if="rom.multi">
+          <v-btn
+            @click="downloadRomApi(rom)"
+            :disabled="downloadStore.value.includes(rom.file_name)"
+            icon="mdi-download"
+            size="x-small"
+            variant="text"
+          />
+        </template>
+        <template v-else>
+          <v-btn
+            :href="downloadUrl"
+            download
+            icon="mdi-download"
+            size="x-small"
+            variant="text"
+          />
+        </template>
         <v-btn
           icon="mdi-content-save-all"
           size="x-small"

frontend/src/components/Game/ListItem/Item.vue

@@ -64,13 +64,24 @@ const downloadUrl = `${window.location.origin}${props.rom.download_path}`;
       lg="1"
       class="d-flex justify-center align-center mr-4"
     >
-      <v-btn
-        @click="downloadRomApi(rom)"
-        :disabled="downloadStore.value.includes(rom.file_name)"
-        icon="mdi-download"
-        size="x-small"
-        variant="text"
-      />
+      <template v-if="rom.multi">
+        <v-btn
+          @click="downloadRomApi(rom)"
+          :disabled="downloadStore.value.includes(rom.file_name)"
+          icon="mdi-download"
+          size="x-small"
+          variant="text"
+        />
+      </template>
+      <template v-else>
+        <v-btn
+          :href="downloadUrl"
+          download
+          icon="mdi-download"
+          size="x-small"
+          variant="text"
+        />
+      </template>
       <v-btn
         icon="mdi-content-save-all"
         size="x-small"

frontend/src/views/Details.vue

@@ -183,15 +183,28 @@ onBeforeMount(() => {
         </v-row>
         <v-row class="pl-3 pr-3 action-buttons">
           <v-col class="pa-0">
-            <v-btn
-              @click="downloadRomApi(rom, filesToDownload)"
-              :disabled="downloadStore.value.includes(rom.file_name)"
-              rounded="0"
-              color="primary"
-              block
-            >
-              <v-icon icon="mdi-download" size="large" />
-            </v-btn>
+            <template v-if="rom.multi">
+              <v-btn
+                @click="downloadRomApi(rom, filesToDownload)"
+                :disabled="downloadStore.value.includes(rom.file_name)"
+                rounded="0"
+                color="primary"
+                block
+              >
+                <v-icon icon="mdi-download" size="large" />
+              </v-btn>
+            </template>
+            <template v-else>
+              <v-btn
+                :href="downloadUrl"
+                download
+                rounded="0"
+                color="primary"
+                block
+              >
+                <v-icon icon="mdi-download" size="large" />
+              </v-btn>
+            </template>
           </v-col>
           <v-col class="pa-0">
             <v-btn rounded="0" block :disabled="!saveFiles"

frontend/vite.config.js

@@ -40,6 +40,14 @@ export default defineConfig(({ mode }) => {
             },
           ],
         },
+        workbox: {
+          globPatterns: ['**/*.{js,css,html,ico,png,svg}'],
+          navigateFallbackDenylist: [/^\/assets\/romm\/library/],
+        },
+        devOptions: {
+          enabled: false,
+          type: 'module',
+        },
       }),
     ],
     define: { "process.env": {} },