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

Как работает кэш Google?

Google сохраняет весь ваш HTML. Затем, когда посетитель переходит на кешированную страницу, он повторно вставляет этот необработанный HTML-код в div на очень простой HTML-странице, которая также содержит заголовок и ссылки Google. Google не кэширует ваши файлы JS. Google не кэширует ваш CSS, Google не кэширует изменения, которые ваш JS может внести в DOM. Google просто кэширует простой HTML-результат HTTP-запроса и восстанавливает его. Вот и все.

…Или все же? Но тогда как ссылки все еще будут работать? Как будет загружаться ваш JS/CSS-файл? Это кажется подозрительным!

Ну тут действительно есть маленькая хитрость. В дополнение к вашему HTML Google поместил в модель DOM базовый HTML-тег, указывающий на ваш домен. Итак, если у вас есть сайт https://pastaornotpasta.com, вы увидите тег <base href="https://pastaornotpasta.com”> в DOM, благодаря которому все ваши относительные ссылки будут работать так же, как если бы сайт находился под вашим доменом. Таким образом, это приведет к тому, что href /css/styles.css будет указывать на https://paspaornotpasta/css/styles.css, даже если URL-адрес текущей страницы на самом деле что-то вроде https://webcache.googleusercontent.com/search?q=cache:blahblah:https://pastaornotpasta.com.

Проблема с JavaScript

Все выглядит хорошо и чисто, верно? Всего лишь простой тег HTML, и ваши внешние ресурсы загружаются просто отлично, у вас есть правильный JS, правильный CSS, все к лучшему в лучшем из всех возможных миров.

Но вдруг вы пытаетесь получить кэш для своего сайта, и все ломается. Вы видите странные данные, страницу с ошибкой или страницу вообще нет. Что случилось?

Ответ прост: даже если ваш HTML такой же, даже если ваши JS и CSS загружены и корректны, все равно есть одно довольно большое различие между вашим живым веб-сайтом и кешированной версией: URL-адрес и, в частности, путь, не то же самое.

Если вы каким-либо образом используете URL-адрес для изменения DOM, ваша кешированная версия Google, вероятно, повреждена. Наиболее очевидными примерами, как показано выше для Uber и Discord, являются те, которые используют маршрутизацию Frontend: маршрутизатор увидит странный и неизвестный путь и потеряется. В лучшем случае (Uber здесь выше) он покажет страницу 404. В противном случае он просто покажет пустую страницу, потому что у вас там ничего нет.

Исправление кеша

Прежде всего: вам нужно исправить кеш? Это правильный вопрос, потому что сломанный кеш Google обычно не является нарушителем условий сделки. В конце концов, это не затронет так много пользователей, верно? Я лично решил исправить это по 3 причинам:

  • Это все еще лучше для тех немногих пользователей, которые его используют. Я иногда использую его сам, и меня раздражает, когда сайт не работает.
  • Это легко решить.
  • Меня попросили, потому что некоторые люди опасались, что сломанный кеш может негативно повлиять на SEO. Скорее всего, это не так, но, поскольку SEO — это магия вуду, иррациональные меры, которые в конечном итоге оказываются почти бесплатными, можно считать гениальным ходом.

Тогда давайте просто решим это быстро и эффективно: просто отключим JS для кешированных страниц.

Какие? Отключить JS? Почему такое радикальное решение? Как я уже сказал, Google НЕ кэширует ваш JS. Как часто вы его обновляете? И что он делает? Смысл кеша в том, чтобы представить сайт таким, каким он был некоторое время назад. Если вы дадите ему настоящий JS и запустите его, это может:

  • Ломать. DOM старый, а JS новый, вероятность того, что они несовместимы, довольно высока.
  • Представить более новую версию сайта, чем кеш. Не драматично, но это как бы противоречит цели кэширования, не так ли?

С другой стороны, отключить его не проблема. Пользователь, который заходит в кеш, не собирается посещать весь ваш сайт и взаимодействовать с вашими блестящими кнопками, он просто хочет проверить какой-то текст/иллюстрацию, которая исчезла в текущей версии. Помните, когда вы ищете что-то в Google, когда термины появляются в выдержке, но не появляются при посещении страницы? Это, вероятно, 90% моего использования кеша Google. Так что давайте перестанем беспокоиться и просто отключим JS для кеша:

// If you don't use the base tag yourself
// just check if it's in the DOM
const is_cached = document.getElementsByTagName('base').length > 0
// Alternatively, you could also see if the URL domain 
// contains "cache" or something similar
const is_domain_cached = document.location.hostname.indexOf('cache') > -1
// You could also have a whitelist of acceptable hostnames, 
// the benefit is that it will also prevent JS from working from
// other caches like archive.org that do not use the base tag.
const acceptable_hostnames = ['pastaornotpasta.com']
const is_acceptable = acceptable_hostnames.indexOf(document.location.hostname) > -1
if (is_acceptable) {
    // Your JS here
}

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