DeepFetchPlugin: can't prefetch external images

Issues
1

Is it possible to deep-fetch external images?

Here’s an example of service-worker.js file code:

  • console.info is getting called
  • prefetch(url) call doesn’t make it
  • https://external-images-domain.net has access-control-allow-origin: * response header
import { skipWaiting, clientsClaim } from 'workbox-core'
import { precacheAndRoute } from 'workbox-precaching'
import { Prefetcher, prefetch } from "@xdn/prefetch/sw"
import DeepFetchPlugin from "@xdn/prefetch/sw/DeepFetchPlugin"

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

new Prefetcher({
    plugins: [
      new DeepFetchPlugin([
        {
          jsonQuery: 'pageProps[*].product_image:filter',
          jsonQueryOptions: {
            locals: {
              filter: images => images.map((img, i) => {
                console.info(`DeepFetchPlugin (filter) | img [${i}]: `, img);
                prefetch(img);
                return img;
              }),
            },
          },
          maxMatches: 10,
          as: 'image',
          cors: false,
        },
      ]),
    ],
  })
    .route()
    .cache(/^https:\/\/external-images-domain\.net\/.*/);
2

Which front-end framework are you using? You may need to call install() to setup the prefetch handler: Moovweb XDN Documentation - Prefetching

In your example, the prefetch call shouldn’t be there as the DeepFetchPlugin will automatically invoke it so long as your filter returns some values.

3

Which front-end framework are you using? You may need to call install() to setup the prefetch handler: Moovweb XDN Documentation - Prefetching

I’m using NextJS framework which calls install() automatically

In your example, the prefetch call shouldn’t be there as the DeepFetchPlugin will automatically invoke it so long as your filter returns some values.

I know. But it doesn’t work whether I add manual prefetch(url) call or not.

4

Prefetch requests are sent when the Prefetcher library sends a message to code running in the window instructing it to add a <link rel="prefetch"/> or <link rel="preload"/> element to the document head. Do you see those tags being added?

5

I see it adds rel="prefetch" only for JSON 1-level links, but not for the images to deep-fetch

6

It could be that the messaging mechanism from service worker to window isn’t functioning properly.

7

The following workaround helped to resolve the issue:

Seems the issue is for NextJS projects only so I’ll label this post accordingly // UPD: I can’t do that