How to set disable to precache image resources

[weekenchen]

Only fonts, JS, and CSS files need to be precached. Other files do not need to be precached, such as image files. How to configure such a requirement?

[DuCanhGH]

@weekenchen first, set additionalPrecacheEntries to an empty array if you use @serwist/next. This is to disable the default scanning of the public directory. Second, remove @serwist/sw.RuntimeCaching entries or @serwist/routing.registerRoute calls that match your image files. Finally, filter image files out using exclude.

[DuCanhGH]

@weekenchen @serwist/routing.registerRoute is not an "inner code". It is a public API. So is runtimeCaching. In your case, set runtimeCaching to undefined.

import { defaultCache } from "@serwist/next/browser";
import type { PrecacheEntry } from "@serwist/precaching";
import { installSerwist } from "@serwist/sw";

declare const self: ServiceWorkerGlobalScope & {
  // Change this attribute's name to your `injectionPoint`.
  // `injectionPoint` is an InjectManifest option.
  // See https://serwist.pages.dev/docs/build/inject-manifest/configuring
  __SW_MANIFEST: (PrecacheEntry | string)[] | undefined;
};

installSerwist({
  precacheEntries: self.__SW_MANIFEST,
  skipWaiting: true,
  clientsClaim: true,
  navigationPreload: true,
  runtimeCaching: undefined,
});

[weekenchen]

I understand that you didn't understand what I meant. I just want to filter precache images. RuntimeCaching should cache dynamic images /_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fback.aa8a546f.png&w=70&q=75 . Right?

[weekenchen]

declare const self: ServiceWorkerGlobalScope & {
  __SW_MANIFEST: (precaching.PrecacheEntry | string)[] | undefined;
};

const blackList = ['.png', '.pag', '.jpg', 'jpeg', '.svg'];

const filteredManifest = (self.__SW_MANIFEST || []).filter((entry) => {
  if (typeof entry === 'string') {
    return !blackList.some((ext) => entry.endsWith(ext));
  }

  return !blackList.some((ext) => entry.url.endsWith(ext));
});

installSerwist({
  precacheEntries: filteredManifest,
  skipWaiting: true,
  clientsClaim: true,
  navigationPreload: true,
  runtimeCaching: defaultCache,
});

This's my solution

[DuCanhGH]

@weekenchen no. It's just that I have to deal with quite a few GitHub issues in Serwist everyday, so I can get things mixed up sometimes. In your case, set runtimeCaching to defaultCache.filter(e => e.options.cacheName !== "static-image-assets" && e.options.cacheName !== "next-image"), then set exclude to [/\.(?:jpg|jpeg|gif|png|svg|ico|webp)$/i] to filter images out of self.__SW_MANIFEST:

import withSerwistInit from "@serwist/next";

const withSerwist = withSerwistInit({
  exclude: [/\.(?:jpg|jpeg|gif|png|svg|ico|webp)$/i],
});

export default withSerwist({});

[weekenchen]

I think this is the right solution, thank you for your project. I have clicked star. good luck