caching - Gatsby 图片在 iPad 上无法按需要缓存

Question

我有一个用 Gatsby 制作的幻灯片 PWA。 Here's the repo (实际上是真品的轻量、无品牌版本)。我还在 Netlify 上托管了构建.

重现步骤:

1. 打开Netlify install ，最好使用 iPad。
2. 将 PWA 添加到主屏幕
3. 通过主屏幕图标打开 PWA ；打开后请勿触摸任何东西
4. 前往 ioPad 设置并禁用 WiFi/互联网
5. 返回应用并浏览幻灯片
6. 请注意，幻灯片图像未加载(我们只能看到黑色背景)

连接到 WiFi 时图像可以正常加载。此外，如果您在关闭 WiFi 之前打开幻灯片，即使应用程序关闭然后重新打开，它们也会缓存并保持可用。

期望的行为: 一旦应用程序打开，幻灯片中包含的所有图像都会被缓存并准备好使用，而无需打开幻灯片。该应用程序适合在没有 WiFi 的环境中使用。我不想要求人们一张一张地打开所有幻灯片以确保图像在使用前已缓存。

已尝试过的内容:

1. 一次性生成所有图像:

   // 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>
   

   理由是，一旦生成它们，它们就会立即被缓存并离线工作。

2. 放入 header Cache-Control: public, max-age=31536000 ；据说它创建了一个“积极的”缓存策略......

3. 用于每张幻灯片图像。
4. 尝试了普通的 标记和 gatsby-image 标记，希望后者可能带有自己的缓存政策覆盖。
5. 在文档中搜索 gatsby-plugin-offline和 gatsby-plugin-manifest ;我不觉得我错过了什么。

“真正的”应用程序大约有 45MB 大，所以它很紧张，但我觉得它应该能够在 iPad 上正确缓存。我不知道我错过了什么；在我看来，PWA 的首要优势是它能够(合理地)离线工作。我还能做些什么来确保图像被缓存而不必打开所有幻灯片(真实应用程序中有很多幻灯片)？

非常感谢!

Answer 1

Reddit 上的一个陌生人给了我答案，我在 Reddit 上发布了同样的问题。

在我的 gatsby-config 中，我设置了以下选项:

{
    resolve: gatsby-plugin-offline,
    options: {
        globPatterns: ['**/*.{js,jpg,png,html,css}']
    }
},

但显然我需要将 globPatterns 放入 workboxConfig 对象中:

{
    resolve: `gatsby-plugin-offline`,
    options: {
        workboxConfig: {
            globPatterns: ['**/*.{js,jpg,png,html,css}'],
        },
    }
},

不敢相信我花了近 3 天的时间来回考虑整个应用程序和服务器配置。

感谢任何花时间思考我的问题的人，哪怕是一点点!