swPrecache и CDN как прокси?

Я использую swPrecache для загрузки моих статических ресурсов моего PWA, чтобы поддерживать автономный режим. Это работает отлично. Моя установка что-то вроде:

https://www.myexampledomain.com/myapp/ загружает статический index.html, который, в свою очередь, использует swPrecache для загрузки статических ресурсов, таких как JS, Images, CSS и т. д. Имейте в виду, что все они загружаются из одного домена, например www.myexampledomain.com/myapp/js/file1.js

Но мой список swprecache содержит приличное количество файлов, и загрузка по медленному интернет-соединению занимает некоторое время. К вашему сведению, я уже откладываю регистрацию работника сервиса до чего-то вроде "загрузки".

Так вот, что я пытаюсь сейчас. Мне нужен кто-то, чтобы проверить, если это возможно:

  1. https://www.myexampledomain.com/myapp/ загружает статические HTML-файлы, как и раньше.
  2. Имеет ли swPrecache перехват статических запросов, поступающих в домен приложения (например, https://www.myexampledomain.com/myapp/js/file1.js), и вместо этого извлекает их в конечную точку CDN? (например, https://some.cloudfront.com/myapp/js/file1.js).
  3. После загрузки swPrecache продолжает работать как обычно.

По сути, я надеюсь, что swPrecache прокси-запросы статических активов в CDN, чтобы ускорить загрузку во время начальной загрузки.

Любые комментарии / указатели на это помогут.

2 ответа

Вы можете использовать stripPrefixMulti вариант в sw-precache изменить URL-адреса, которые записываются в ваш файл работника службы. Однако это довольно грубая сила, поэтому полезно, если есть общий префикс, который используется всеми активами, которые будут обслуживаться из CDN.

Например, если все, что будет обслуживаться из CDN, хранится в локальном assets/ каталог, и их пути в CDN будут начинаться с https://my-cdn.com/assets/, ты можешь использовать

{
  stripPrefixMulti: {'assets/': 'https://my-cdn.com/assets/'},
  // ... other sw-precache options...
}

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

Да, вы можете использовать

{
   stripPrefixMulti: {'assets/': 'https://my-cdn.com/assets/'},
   // ... other sw-precache options...
 }

но я уверен, что вы столкнетесь с новой проблемой CORS. Я тоже над этим работаю

Другие вопросы по тегам