Гэтсби Изображения не кэшируются должным образом на iPad - PullRequest
Новая
       16

Гэтсби Изображения не кэшируются должным образом на iPad

2 голосов
/ 03 февраля 2020

У меня есть слайд-шоу PWA с Гэтсби. Вот репо (на самом деле это легкая, не марочная версия реальной вещи). Я также размещал сборку на Netlify .

Шаги для воспроизведения :

  1. Откройте Netlify желательно с iPad.
  2. Добавить PWA на домашний экран
  3. Открыть PWA с помощью значка на главном экране; ничего не трогайте после его открытия
  4. Go в настройках ioPad и отключите WiFi / Inte rnet
  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: publi c, max-age = 31536000 ; было сказано, что он создает «агрессивную» политику кэширования ...

  3. Использование для каждого отдельного изображения слайда.
  4. Пробовал оба обычных image tags and the gatsby-image image tag, in the hopes that maybe the latter would come with its own cache policy override.
  5. Searched the documentation for gatsby-plugin-offline и gatsby-plugin-manifest ; Я не чувствую, что мне чего-то там не хватает.

«Реальное» приложение размером около 45 МБ, поэтому оно плотное, но я чувствую, что оно должно быть в состоянии правильно кешировать на iPad. Я не знаю, что мне не хватает; мне кажется, что преимуществом номер один PWA является его способность (разумно) работать в автономном режиме. Что еще я могу сделать, чтобы убедиться, что изображения кэшируются без необходимости открывать все слайды (в реальном приложении их довольно много)?

Большое спасибо!

1 Ответ

1 голос
/ 04 февраля 2020

Мне пришел ответ от незнакомца на 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 дня на просмотр всего приложения и настроек сервера.

Спасибо любому, кто хотя бы немного подумал о моей проблеме!

...