Unable to prefetch resources with Next.js using DeepFetchPlugin

Issues
1

I’ve configured my Next SW to use the DeepFetchPlguin to prefetch images. My SW is defined with:

import { skipWaiting, clientsClaim } from 'workbox-core';
import { precacheAndRoute } from 'workbox-precaching';
import { Prefetcher } from '@xdn/prefetch/sw';
import DeepFetchPlugin from '@xdn/prefetch/sw/DeepFetchPlugin'

skipWaiting();
clientsClaim();
precacheAndRoute(self.__WB_MANIFEST || []);

new Prefetcher({
  plugins: [
    new DeepFetchPlugin([
      // deep fetches the "category" API call to get PLP images:
      {
        jsonQuery: 'pageProps.products.picture',
        maxMatches: 10,
        as: 'image',
      },
    ])
  ]
}).route();

I don’t see the images being fetched looking at the Network tab. Further debugging to ensure it is actually picking up values in the API response, I added this query option:

{
  jsonQuery: 'pageProps.products.picture:picture',
  jsonQueryOptions: {
    locals: {
      picture: input => { console.log('prefetch images', input); return input; },
    },
  },
  maxMatches: 10,
  as: 'image',
}

This does log the top 10 image URLs so I know my JSON query is parsing everything correctly. Any ideas?

2

The solution to this was to add a SW listener in _app.js to prefetch:

import { prefetch } from '@xdn/prefetch/window/prefetch'
...
function MyApp({ Component, pageProps }) {
  ...

  useEffect(() => {
    // register a listener for SW messages to prefetch images from the PLP API responses
    const { serviceWorker } = navigator
    if (serviceWorker) {
      serviceWorker.addEventListener('message', event => {
        if (event.data.action === 'prefetch') {
          prefetch(event.data.url, event.data.as, event.data.options)
        }
      })
    }
  }, []);
  
  ...
}