Кэширование внешних ресурсов с помощью sw-precache

Question

Я пытаюсь получить sw-precache предварительно кэшировать внешние ресурсы CDN, но сгенерированный service-worker.js не содержит URL-адреса CDN в precacheConfig массив.

Это то, что у меня есть в моем gulpfile:

staticFileGlobs: [
    'http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css',
     'client/assets/**/*.{js,html,css,png,jpg,gif,svg,eot,ttf,woff,ico}'
]

Файлы внутри моего местного client/assets папки добавляются в precacheConfig массив, но внешний шрифт-удивительный CSS нет. Есть ли способ добиться этого?

Answer 1

sw-precache может только кэшировать и обновлять локальные ресурсы, такие как те, которые соответствуют client/assets/**/*... шаблон, который вы используете. Он не предназначен для работы с удаленными активами, доступ к которым осуществляется через CDN.

У вас есть пара подходов:

1. использование npm (или менеджер пакетов или ваш выбор), чтобы загрузить локальную копию ресурса (то есть font-awesome), а затем развернуть этот сторонний ресурс вместе с вашими основными ресурсами. Если сторонний код подобран по шаблону, который вы передаете staticFileGlobs тогда он может быть передан и версионирован, как и все остальное локальное.

2. Используйте кэширование во время выполнения для обработки ресурса в CDN. Поскольку URL для вашего конкретного ресурса включает в себя 4.0.3 версионная строка, можно предположить, что основное содержимое никогда не изменится, и cacheFirst стратегия, вероятно, безопасна.

Вы можете изменить свой sw-precache Конфигурация должна выглядеть следующим образом:

{
  staticFileGlobs: [
    'client/assets/**/*.{js,html,css,png,jpg,gif,svg,eot,ttf,woff,ico}'
  ],
  runtimeCaching: [{
    urlPattern: /^https:\/\/netdna\.bootstrapcdn\.com\//,
    handler: 'cacheFirst'
  }],
  // ...any other config options...
}

Эта конфигурация достаточно широка, чтобы взять что-либо, обслуживаемое из этой CDN, кэшировать его, а затем обслуживать его сначала один раз в последующих посещениях.

Обратите внимание, что ваш пример использовал http: протокол для URL вашего CDN, и вам нужно будет использовать https: получить ответ, который хорошо сочетается с кэшированием сервисных работников.