Обслуживание разных версий кеша с использованием одного и того же URL-адреса через cloudflare worker - PullRequest
Новая
       169

Обслуживание разных версий кеша с использованием одного и того же URL-адреса через cloudflare worker

0 голосов
/ 05 августа 2020

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

Наиболее распространенное решение - разделить мобильную версию на другой URL-адрес, но в моем случае я хочу чтобы использовать один и тот же URL-адрес и заставить кеш Cloudflare правильно работать как на настольных компьютерах, так и на мобильных устройствах. устарел, мне пришлось изменить некоторые части, чтобы он заработал.

Я создал новый поддомен для своих рабочих, а затем назначил маршрут моему сайту, чтобы он начал работать.

Рабочий кэширует все, однако, у него нет желаемой функции наличия разных кэшированных версий в зависимости от устройства. 

async function run(event) {
  const { request } = event;

  const cache = caches.default;

  // Read the user agent of the request
  const ua = request.headers.get('user-agent');
  let uaValue;


  if (ua.match(/mobile/i)) {
    uaValue = 'mobile';
  } else {
    uaValue = 'desktop';
  }

  console.log(uaValue);

  // Construct a new response object which distinguishes the cache key by device
  // type.
  const url = new URL(request.url);
  url.searchParams.set('ua', uaValue);
  const newRequest = new Request(url, request);

  let response = await cache.match(newRequest);
  if (!response) {
    // Use the original request object when fetching the response from the
    // server to avoid passing on the query parameters to our backend.
    response = await fetch(request, { cf: { cacheTtl: 14400 } });

    // Store the cached response with our extended query parameters.
    event.waitUntil(cache.put(newRequest, response.clone()));
  }

  return response;
}

addEventListener('fetch', (event) => {
  event.respondWith(run(event));
});

он действительно определяет правильный пользовательский агент, но он должен иметь две отдельные версии кеша в соответствии назначенная строка запроса ...

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

1 Ответ

1 голос
/ 05 августа 2020

Проблема здесь в том, что fetch() сам уже выполняет нормальное кэширование, независимо от вашего использования Cache API вокруг него. Таким образом, fetch() может по-прежнему возвращать кешированный ответ, предназначенный для неправильного UA.

Если вы можете заставить серверную часть игнорировать параметр запроса, вы можете включить запрос в запрос, переданный на fetch() , чтобы он правильно кэшировал два результата по-разному. (Корпоративные клиенты могут использовать настраиваемые ключи кеша как способ выполнить sh это без изменения URL-адреса.)

Если вы это сделаете, вы также можете удалить cache.match() и cache.put() вызовы, поскольку fetch() сам будет обрабатывать кеширование.

...