How to fix bad-precaching-response (sw - worksbox)?

Question

every time I get error - Uncaught (in promise) bad-precaching-response: bad-precaching-response :: [{"url" this error occurs both when logging into the site and when switching between pages, and sometimes the screen becomes just white until you clear the cache and log in again. Tell me what I'm doing wrong in the settings

enter image description here

my SW file look like:

import { setCacheNameDetails } from 'workbox-core';
import { precacheAndRoute, matchPrecache } from 'workbox-precaching';

import { registerRoute } from 'workbox-routing';
import {
  CacheFirst,
  NetworkFirst,
  StaleWhileRevalidate,
} from 'workbox-strategies';
import { CacheableResponsePlugin } from 'workbox-cacheable-response';
import { ExpirationPlugin } from 'workbox-expiration';

setCacheNameDetails({
  prefix: 'app',
});

// @ts-ignore
const manifest = self.__WB_MANIFEST || [];

if (manifest) {
  precacheAndRoute(manifest);
}

registerRoute(
  ({ request }) => request.mode === 'navigate',
  async ({ request }) => {
    try {
      const response = await fetch(request);
      return response;
    } catch (error) {
      const cacheResponse = await matchPrecache('/index.html');

      if (cacheResponse) {
        return cacheResponse;
      }

      return Response.error();
    }
  },
);

registerRoute(
  new RegExp('/api/'),
  new NetworkFirst({
    cacheName: 'api',
    networkTimeoutSeconds: 7,
    plugins: [
      new CacheableResponsePlugin({
        statuses: [200],
      }),
    ],
  }),
);

registerRoute(
  ({ request }) =>
    request.destination === 'style' ||
    request.destination === 'script' ||
    request.destination === 'worker',
  new StaleWhileRevalidate({
    cacheName: 'assets',
    plugins: [
      new CacheableResponsePlugin({
        statuses: [200],
      }),
    ],
  }),
);

registerRoute(
  ({ request }) => request.destination === 'image',
  new CacheFirst({
    cacheName: 'images',
    plugins: [
      new CacheableResponsePlugin({
        statuses: [200],
      }),
      new ExpirationPlugin({
        maxAgeSeconds: 7 * 24 * 60 * 60, // 7 Days
      }),
    ],
  }),
);

webpack plagin what generate sw file:

    new WorkboxPlugin.InjectManifest({
      mode: 'production',
      swSrc: path.resolve(appPath, 'sw.ts'),
      exclude: [
        /\.htaccess$/,
        /manifest$/,
        /LICENSE$/,
        /\.gz$/,
        /\.br$/,
        /\.png$/,
        /\.jpg$/,
        /\.jpeg$/,
      ],
    }),
  ],

workbox version 5.0.0