Assets included in includeAssets are not cached

[Raphyyy]

Hello,

I am using the latest version of this plugin (v0.20.1).
It looks like there is an issue with the includeAssets option.
Every files in my bundle are properly registered in the generated sw.js, excepted the assets I manually put with the includeAssets option.

Here is the output of vite build :

The asset dist/assets/aqi-background-D25KdR55.png simply does not appears in the generated sw.js :

[...]
define(["./workbox-e1498109"], function (e) {
  "use strict";
  self.skipWaiting(),
    e.clientsClaim(),
    e.precacheAndRoute(
      [
        { url: "assets/ClusterGrid.worker-B8toWJm3.js", revision: null },
        { url: "assets/index-C2y8JH2N.css", revision: null },
        { url: "assets/index-Cc0cbzqV.js", revision: null },
        { url: "assets/messages-C2ixRVlm.js", revision: null },
        { url: "assets/messages-DkWAU7L6.js", revision: null },
        { url: "index.html", revision: "91ec22311c293aacccf8c1e141fffbd9" },
        { url: "registerSW.js", revision: "6a7126f4909d378979bca200ff77879d" },
        {
          url: "manifest.webmanifest",
          revision: "7805a711b1d2f46f6d1eadf5beec4fb4",
        },
      ],
      {}
    ),
    e.cleanupOutdatedCaches(),
    e.registerRoute(
      new e.NavigationRoute(e.createHandlerBoundToURL("index.html"))
    );
});

I use this file in a React App through a CSS property background: url(...) and the file is located under /src/assets/

Here is my vite-plugin-wpa config :

const config: UserConfig = {
    [...]
    VitePWA({
      // scope: "/",
      registerType: "autoUpdate",
      includeAssets: ["assets/*.png"],
    })
    [...]
};

The file is properly imported during the build with a proper hash into the final bundle but doesn't get cached.

I tried with includeAssets: ["**/*.png"] or includeAssets: ["*.png"], nothing helps

[userquin]

Just remove that entry, you only need to include files extensions in workbox.globPatterns array (includeAssets is for assets in the public folder, Vite will emit assets folder entries in the dist/assets folder when building the app):
globPatterns: ['**/*.{js,css,html,png}']

(if you also have webp, jpeg or ico files add the extension to the list).

https://vite-pwa-org.netlify.app/guide/static-assets.html#globpatterns

[Raphyyy]

Thanks man ! And sorry for the confusion