Cache media received from the server

[uskov-dev]

Hello. Please tell me the URLs of media, pictures and audio are coming from my server. I'm trying to cache them so that when I go to the main page after they come from the server, they are immediately cached without going to other pages. Here is my config.

VitePWA({
  base: env.VITE_BASE_URL,
  registerType: 'autoUpdate',
  injectRegister: 'auto',
  workbox: {
    navigateFallback: null,
    globPatterns: ['**/*.{js,css,html,ico,png,svg,json,woff2,woff,jpg,webp,mp3,mp4,gif}'],
    maximumFileSizeToCacheInBytes: 100000000,
    runtimeCaching: [
      {
        urlPattern: new RegExp(`^${env.VITE_URL}.*`, 'i'),
        handler: 'NetworkFirst',
        options: {
          cacheName: 'json-data',
          expiration: {
            maxEntries: 10,
            maxAgeSeconds: 60 * 60 * 24 * 365,
          },
          cacheableResponse: {
            statuses: [0, 200],
          },
        },
      },
    ],
  },
  manifest: {
    theme_color: '#ffffff',
    background_color: '#ffffff',
    display: 'fullscreen',
    scope: env.VITE_BASE_URL,
    start_url: env.VITE_BASE_URL,
    name: 'My site',
    short_name: 'My site',
    description: 'My site',
    icons: [
      {
        src: 'icon-192x192.png',
        sizes: '192x192',
        type: 'image/png',
      },
      {
        src: 'icon-256x256.png',
        sizes: '256x256',
        type: 'image/png',
      },
      {
        src: 'icon-384x384.png',
        sizes: '384x384',
        type: 'image/png',
      },
      {
        src: 'icon-512x512.png',
        sizes: '512x512',
        type: 'image/png',
      },
    ],
  },
}),

Here is the code that comes

"elements": {
  "pagetitle": "Elements",
  "children": {
    "one": {
      "pagetitle": "One",
      "text": "Text One",
      "icon": "/assets/content/elements/one/dubovyij-list.svg",
      "audio": "/assets/content/elements/one/7-dubovyi-listok.mp3",
      "gallery": [
        {
          "image": "/assets/content/elements/one/1.jpg"
        },
        {
          "image": "/assets/content/elements/one/2.jpg"
        },
        {
          "image": "/assets/content/elements/one/3.jpg"
        },
        {
          "image": "/assets/content/elements/one/4.jpg"
        },
        {
          "image": "/assets/content/elements/one/5.jpg"
        }
      ]
    },
    "two": {
      "pagetitle": "Two",
      "text": "Text Two",
      "icon": "/assets/content/elements/two/zaseyannoe-pole.svg",
      "audio": "/assets/content/elements/two/5-zaseiannoe-pole.mp3",
      "gallery": [
        {
          "image": "/assets/content/elements/two/1.jpg"
        },
        {
          "image": "/assets/content/elements/two/2.jpg"
        },
        {
          "image": "/assets/content/elements/two/3.jpg"
        },
        {
          "image": "/assets/content/elements/two/4.jpg"
        },
        {
          "image": "/assets/content/elements/two/5.jpg"
        },
        {
          "image": "/assets/content/elements/two/6.jpg"
        }
      ]
    }
  }
}

The most important thing is that text data is cached, but it does not cache media files, it caches them only if I go to the page on which the media files will be located and caches them. But I need that as soon as I go to the main page for the first time and receive data from the server, all the media files that are sent in json are automatically cached.

If you build with local media resources, then everything is fine, but media coming from the server is not cached and that’s it.

[userquin]

Remove file extensions from globPatterns, for example, you can remove mp3 and mp4 extensions, then add a new runtime caching handler:

          {
            urlPattern: ({ url, sameOrigin }) => sameOrigin && /\.(mp3|mp4)$/.test(url.pathname),
            handler: 'StaleWhileRevalidate',
            options: {
              cacheName: 'mp-cache',
              expiration: {
                maxEntries: 10,
                maxAgeSeconds: 60 * 60 * 24 * 365,
              },
              cacheableResponse: {
                statuses: [200],
              },
            },
         }