Gatsby 图像无法在 iPad 上按需要缓存答案

【问题标题】：Gatsby Images don't cache as desired on iPadGatsby 图像无法在 iPad 上按需要缓存
【发布时间】：2020-05-19 12:11:06
【问题描述】：

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

复制步骤：

打开Netlify install，最好使用iPad。
将 PWA 添加到主屏幕
通过主屏幕图标打开 PWA；打开后不要碰任何东西
转到 ioPad 设置并禁用 WiFi/互联网
返回应用并浏览幻灯片
请注意，幻灯片图像未加载（我们只看到黑色背景）

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

期望的行为：只要应用程序打开，幻灯片中包含的所有图像都会被缓存并准备好使用，而无需打开幻灯片。此应用程序旨在用于无法使用 WiFi 的环境中。我不想让人们一张一张打开所有幻灯片，以确保在使用前缓存图像。

已经尝试过什么：

一次生成所有图像：

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

基本原理是，只要生成一次，它们就会立即被缓存并离线工作。

放标题 Cache-Control: public, max-age=31536000 ;据说创建了一个“积极的”缓存策略……
用于每张幻灯片图像。
尝试了普通的标签和 gatsby-image 标签，希望后者可能带有自己的缓存政策覆盖。
在文档中搜索 gatsby-plugin-offline 和 gatsby-plugin-manifest ；我不觉得我在那里缺少任何东西。

“真正的”应用程序大约有 45MB 大，所以它很紧凑，但我觉得它应该能够在 iPad 上正确缓存。我不知道我错过了什么；在我看来，PWA 的第一大优势是它能够（合理地）离线工作。我还能做些什么来确保在无需打开所有幻灯片的情况下缓存图像（实际应用中的幻灯片很多）？

非常感谢！

【问题讨论】：

标签： caching gatsby gatsby-image

【解决方案1】：

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 天的时间来回研究整个应用程序和服务器配置。

感谢任何花一些时间考虑我的问题的人！

【讨论】：