What strategy should be used for caching <picture>s?

Edgio Q&A
1

What strategy should be used inside DeepFetchPlugin for caching images within <picture> tag?

2

well I guess best option would be using something like: <link rel="preload" href="bg-image-wide.png" as="image" media="(min-width: 601px)"> from within route handler, and not using inside DeepFetchPlugin. what do you think?

3

There isn’t really a defined strategy for this, since a service worker can’t really know the width of the window without being explicitly told by the window. You suggestion of manually adding the <link> tags in the route handler would work fine, assuming you have access to the compute level and can transform your response from there.

If you don’t have access to transform your response, then you could potentially do something like this:

  1. Use postMessage in the window to pass a message to the service worker, letting it know what the width of the window is.
  2. Use that value in a callback in the DeepFetchPlugin to determine which <source> to use for the prefetch, and manually call the prefetch() function with the right srcset attribute.