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

Я пытаюсь заставить 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 с потрясающим шрифтом — нет. Есть ли способ добиться этого?


progressive-web-apps sw-precache
person zeosamaster    schedule 14.11.2016    source источник

Ответы (1)


arrow_upward
10
arrow_downward

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, кэшировать это, а затем обслуживать его в кэше один раз при последующих посещениях.

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

person Jeff Posnick    schedule 14.11.2016
comment
Спасибо за ваш ответ. У меня уже есть runtimeCaching urlPattern, как вы предложили, моя проблема возникла, когда пользователь впервые получил доступ к моему pwa (предварительное кэширование всего в staticFileGlobs), а затем получил доступ к нему в автономном режиме при втором посещении. Удивительный шрифт никогда не загружался сервис-воркером, потому что единственный раз, когда он был загружен браузером, это было, когда сервис-воркер все еще устанавливался (это означает, что runtimeCaching еще не использовался). - person zeosamaster; 15.11.2016
comment
Я уже думал об использовании локальной копии, но мне было интересно, есть ли способ избежать этого. Я собираюсь использовать этот подход, как вы предложили. Спасибо за замечание, я не знал об этом :) - person zeosamaster; 15.11.2016
comment
@zeodamaster взломал это, загрузив скрытый iframe, содержащий вашу страницу, после установки работника службы. - person oligofren; 05.01.2018
comment
Привет, это более полезно для меня. Могу ли я исключить URL-адрес моего дочернего сайта для предварительного кэширования? - person kamalav; 02.03.2018