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

Это очень распространенная проблема, которую я видел у многих людей, которые используют разные версии своего сайта для мобильных и настольных компьютеров, многие темы имеют эту функцию. Проблема в том, что 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));
});

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

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


javascript caching cloudflare cloudflare-workers
person svelandiag    schedule 05.08.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

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

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

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

person Kenton Varda    schedule 05.08.2020
comment
Спасибо! Постараюсь понять о чем вы и воплотить в жизнь! К счастью, у меня очень маленький бизнес, и я не могу позволить себе платить за корпоративный план. Я попросил отдел продаж получить только эту функцию корпоративного плана и индивидуальную цену, которая могла бы соответствовать моему бюджету, но они сказали мне, что это невозможно. . - person svelandiag; 05.08.2020
comment
Ура!! это сработало!!! Боже, спасибо тебе огромное !! Вы не представляете, как долго я пытался этого добиться! Я удалил то, что вы мне сказали, и использовал newRequeset в вызове fetch вместо исходного запроса, затем создал правило страницы с Cache Level: Ignore Query String, и теперь оно работает должным образом. Боже мой, это хорошо. Большое спасибо! - person svelandiag; 05.08.2020
comment
Хм, я бы подумал, что установка уровня кэша на Ignore Query String будет противоположностью тому, что вы хотите. Вся суть строки запроса заключалась в том, чтобы отдельно кэшировать ресурсы ... - person Kenton Varda; 06.08.2020
comment
Я думаю, что вы правы, ну, я думаю, что правило страницы игнорируется, на самом деле все мои правила страницы игнорируются, мне пришлось самому кодировать URL-адреса, где мне нужно обходить кеш. По какой-то причине, если я включаю своего воркера, cloudflare игнорирует мои правила страницы. - person svelandiag; 06.08.2020