Runtime caching with inject Manifest

[R0N1n-dev]

Cannot seem to get runtime caching to allow for caching of api data.

vite.config.js

import { defineConfig } from "vite";
import Components from "unplugin-vue-components/vite";
import vue from "@vitejs/plugin-vue2";
import { VitePWA } from "vite-plugin-pwa";

//Runtime Caching

export default defineConfig({
  alias: {
    "@": require("path").resolve(__dirname, "src"),
  },
  plugins: [
    vue(),
    Components(),
    VitePWA({
      //Runtime
      workbox: {
        runtimeCaching: [
          {
            urlPattern: "https://www.themealdb.com/*", // Adjust the URL pattern to match your API endpoint
            handler: "NetworkFirst",
            options: {
              cacheName: "mealDb", // Name for your cache
              expiration: {
                maxEntries: 500,
                maxAgeSeconds: 60 * 60 * 24,
                purgeOnQuotaError: true,
              },
              cacheableResponse: { statuses: [0, 200] },
            },
          },
        ],
      },
      strategies: "injectManifest",
      srcDir: "src",
      filename: "sw.js",
      injectManifest: {
        globPatterns: [
          // all packaged resources are stored here
          "assets/*",
          // add HTML and other resources for the root directory
          "*.{svg,png,jpg}",
          "*.html",
          //"manifest.webmanifest",
          // be careful, not to add sw.js
        ],
      },
      manifest: {
        name: "Test Project",
        short_name: "Test",
        theme_color: "#ffffff",
        id: "/",
        description: "Vue PWA ",
        display: "standalone",
        background_color: "#ffffff",
        icons: [
          {
            src: "/android-chrome-192x192.png",
            sizes: "192x192",
            type: "image/png",
          },
          {
            src: "/android-chrome-512x512.png",
            sizes: "512x512",
            type: "image/png",
          },
          {
            src: "/android-chrome-512x512.png",
            sizes: "512x512",
            type: "image/png",
            purpose: "any maskable",
          },
        ],
      },
    }),
  ],
});

sw.js

import { cleanupOutdatedCaches, precacheAndRoute } from "workbox-precaching";

self.addEventListener("message", (event) => {
  if (event.data && event.data.type === "SKIP_WAITING") self.skipWaiting();
});
cleanupOutdatedCaches();
precacheAndRoute(self.__WB_MANIFEST);

Your proposed solution
@R0N1n-dev workbox-build only works in one mode, if you are using custom sw (injectManifest strategy), you MUST include runtimeCaching in your service worker logic, check this for example: https://github.com/elk-zone/elk/blob/main/service-worker/sw.ts#L56-L94

Those entries are the equivalent to your workbox.runtimeCaching handler: when using generateSW strategy, workbox-build will generate a registerRoute per plugin in the sw output.

In summary, when using generateSW workbox-build will be configured using workbox pwa plugin configuration entry; when using injectManifest strategy workbox-build will be configured using injectManifest pwa plugin configuration entry.

I really wish you guys wouldn't close the issue b4 confirmation that ur proposed solution is working, because it is not and now i will reopen it till i get a working solution

[brc-dd]

#61 is reopened. There is no need to be rude.