2

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

复制步骤：

  1. 打开Netlify 安装，最好使用 iPad。
  2. 将 PWA 添加到主屏幕
  3. 通过主屏幕图标打开 PWA；打开后不要触摸任何东西
  4. 转到 ioPad 设置并禁用 WiFi/Internet
  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. 将标头Cache-Control: public, max-age=31536000 ; 据说创建了一个“积极的”缓存策略......

  3. 用于每张幻灯片图像。
  4. 尝试了普通的 <img src="..." /> 标签和 gatsby-image <Img fluid="..." /> 标签，希望后者可能会带有自己的缓存策略覆盖。
  5. 搜索gatsby-plugin-offline和gatsby-plugin-manifest的文档；我不觉得我在那里缺少任何东西。

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

非常感谢 ！

4

1 回答 1

2

我在 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 天的时间在整个应用程序和服务器配置上来回走动。

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

于 2020-02-04T02:04:31.627 回答