Gatsby Images don't cache as desired on iPad - caching

Question

I have a slideshow PWA made with Gatsby. Here's the repo (actually a light, unbranded version of the real thing). I've also hosted the build on Netlify.
Steps to repro :
Open the Netlify install, preferably with an iPad.
Add PWA to home screen
Open PWA via the home screen icon ; don't touch anything after it's open
Go to ioPad settings and disable WiFi/Internet
Return to the app and browse the slides
Notice that slide images aren't loaded (we see only the black background)
The images will load fine while connected to the WiFi. Also if you open the slides before turning off the WiFi, they will cache and remain available even if the app is closed and then reopened.
Desired behavior :
That as soon as the app is open, all the images contained in the slides be cached and ready to use without having opened the slides. This app is meant to be used in an environment where WiFi won't be available. I don't want to have to ask the people to open all the slides one by one to make sure the images are cached before usage.
What has been tried :
Generating all the images once :
// src/pages/index.js, line 156 :
<div id="offline">
{data.slides.edges.map((s) => {
return s.node.frontmatter.gallery.map((i, key) => <img src={i} alt="" key={"cache-"+key} />)
})}
</div>
The rationale was that by generating them once, they would immediately be cached and work offline.
Put the header Cache-Control: public, max-age=31536000 ; it was said to create an "agressive" cache policy...
Use for each single slide image.
Tried both the normal <img src="..." /> tags and the gatsby-image <Img fluid="..." /> tag, in the hopes that maybe the latter would come with its own cache policy override.
Searched the documentation for gatsby-plugin-offline and gatsby-plugin-manifest ; I don't feel I'm missing anything there.
The "real" app is about 45MB big, so it's tight but I feel it should be able to cache properly on an iPad. I don't know what I'm missing ; it seems to me like the number one advantage of a PWA is its ability to (reasonably) work offline. What more can I do to make sure the images are cached without having to open all the slides (there's quite a lot on the real app) ?
Thanks so much !

Answer 1

An answer came to me from a stranger on Reddit where I posted the same question.
In my gatsby-config, I had the following options set up :
{
resolve: gatsby-plugin-offline,
options: {
globPatterns: ['**/*.{js,jpg,png,html,css}']
}
},
But apparently I needed to put the globPatterns inside a workboxConfig object :
{
resolve: `gatsby-plugin-offline`,
options: {
workboxConfig: {
globPatterns: ['**/*.{js,jpg,png,html,css}'],
},
}
},
Can't believe I spent nearly 3 days going back and forth on the whole app and the server configs.
Thanks to anyone who took some time to think about my problem even a little !