Как перевести сайт в оффлайн

В этой статье будет использоваться термин статика. Почитать о нём можно здесь.

Представьте, что вы сверстали сайт для продажи кепок, и index.html выглядит вот так:

Получить исходники можно по этой ссылке

Но, как только вы выключаете интернет, он начинает выглядеть вот так:

Странно, картинки куда-то пропали. Очевидно, они хранились не у вас на компьютере, а где-то в интернете, поэтому без интернета они сразу исчезли. Вот как они подключались в коде:

<img src="https://dvmn.org/filer/canonical/1569333144/331/" class="card-img-top" alt="...">

Почему это может быть плохо и как это исправить вы найдёте в статье ниже.

А чем плохо хранить файлы не у себя?

Для начала стоит разобраться, а плохо-ли то, что статика хранится не вместе с сайтом, а по ссылке? Обычно — нет, ведь всё равно пользователи без интернета никак не попадут на ваш сайт, и сайта без статики они тоже не увидят. Но вот несколько причин, почему это может понадобиться:

1. Если вы не уверены, что файлы по ссылке будут доступны всегда — их лучше скачать. Например, если ваш сайт использует картинки с какого-нибудь файлхостинга — хостинг может их удалить. Или, если вы использовали картинку из чьего-нибудь поста в блоге, а владелец блога решил удалить свой сайт — картинка пропадёт для вас навсегда.

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

3. Если это меню роутера или другая программа с веб-интерфейсом. Меню роутера должно работать и без доступа в интернет, т.к. в этом меню доступ к интернету и настраивается. Есть ещё много подобных программ: часто проще сделать небольшой сайтик оффлайн, чем делать не-браузерный интерфейс. Даже меню игр Warcraft III или StarCraft II — это приложения на базе браузера.

4. Ресурсы из интернета иногда банит Роскомнадзор. Иногда он по ошибке банит сайты, где хранятся популярные библиотеки, например, Bootstrap. Когда к вам на сайт зайдёт пользователь, его браузер попытается скачать Bootstrap, и у него ничего не получится. Пользователь получит поломанную страницу, как на скриншоте выше. Если хранить всё у себя, вероятность поломки уменьшится — даже если что-то забанят — у вашего сайта будет личная незабаненная копия библиотеки.

Хранить всю статику у себя — не обязательно, но если хочется — хуже не станет.

Простой способ сделать сайт оффлайн

Если вам нужно просто скачать какую-нибудь страничку из интернета, то для этого в браузере уже есть встроенная функция: нажмите комбинацию Ctrl S и страница скачается сразу со всеми ресурсами и даже сама подменит все пути к картинками и js/css файлам.

Это простой способ, но мы сейчас воспользуемся чуть более сложным, чтобы в более запутанных случаях было понятно как действовать.

Как перенести все ресурсы к себе

Для начала скачайте файл по этой ссылке и откройте у себя в браузере. Далее будем работать с ним.

1. Узнайте, какие файлы вообще скачивал браузер

Откройте вкладку Network в Chrome Dev Tools и обновите страницу с помощью F5:

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

Теперь выключите интернет и обновите страницу в браузере, вы увидите файлы, которые не скачались, они подсветятся красным:

А почему Bootstrap не отключился?

Странно, bootstrap.min.css тоже брался из интернета, но стили с сайта никуда не пропали. Во вкладке Network он тоже красным не подсвечен. Вот как он подключался в коде:

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

На самом деле браузер его закешировал. Очень многие сайты используют Bootstrap, поэтому браузер уже скачал его один раз и подсовывает вам его каждый раз, как будто он скачал его заново. Это делается для того, чтобы сайты грузились быстрее: зачем скачивать одни и те же популярные библиотеки раз за разом при каждом клике на сайте, если можно скачать один раз и сохранить у себя. Чтобы сбросить кэш, обновите страницу комбинацией клавиш Ctrl F5. Теперь с сайта пропадут вообще все ресурсы из интернета:

Chrome Dev Tools тоже покажет, что заново Bootstrap скачать не удалось:

2. Скачайте файлы к себе

Теперь, когда вы знаете, какие из файлов вам нужны, можно включить интернет обратно и скачать их все по очереди. Для этого кликните по ним правой клавишей и нажмите Open in new Tab. Вы получите вкладку, где показан нужный вам ресурс. Осталось только скачать его к себе на компьютер. Вот как скачать картинку:

А вот JS-файл. Здесь выделите текст через Ctrl a и скопируйте его в файл с таким же названием:

Продолжайте, пока не скачаете все файлы, которые подгружались из интернета. Их список можно перепроверить с помощью предыдущего раздела статьи “1. Узнайте, какие файлы вообще скачивал сайт”.

Хранить все скачанные файлы лучше в отдельной папке. Если это статика, то в static/, а если медиа — в media/. Вот статья о разнице.

3. Замените ссылки

Теперь, когда вы скачали все файлы к себе, нужно заставить сайт использовать скачанные файлы вместо ссылок в интернет. Для этого нужно найти где подключались эти файлы в index.html. После этого просто заменить ссылку на адрес до файла на компьютере.

На вкладке Network в колонке Iniciator показано где какой файл подключался:

Обратите внимание, что в таблице встречаются странные записи со статусом 302 Found и пустым превью. Это редиректы. Если нажать на “инициатора” у картинки, можно заметить, что они как раз и были скачаны по “редиректу”:

4. Проверьте, что сайт теперь оффлайн.

Выключите интернет и откройте ваш сайт. Снова откройте вкладку Network и нажмите Ctrl F5. Если какие-то из подключаемых файлов подсветились красным — у вас что-то не получилось и сайт всё ещё использует интернет для подгрузки файлов. Скорее всего у вас не получился предыдущий шаг: вы неправильно указали ссылку на адрес до скачанного файла. Если указать адрес правильно не получается, вам поможет эта статья в разделе про ошибку net::ERR_FILE_NOT_FOUND.

Частые проблемы

• Если браузер ругается на загадочный CORS