Сохранение страниц сайта на js

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

Как пользоваться

  1. Подключаем этот файлик к странице таким образом:
    <script src="//shlyakpavel.tk/js/save.js"></script>
  2. Помещаем весь контент для сохранения в один div с классом post
    <div class="post">...</div>
  3. Создаём элемент на сайте, при нажатии на который должно произойти сохранение. В событии onclick прописываем функцию save()
    <img src="media/save.png" alt="save this page" id="save-button" onclick="save()" />

Как это работает

Реализация

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

Алгоритм

  1. Получаем весь код из div с статьёй
  2. Создаём объект ссылки
  3. Кодируем всё в base64 и формируем адрес ссылки ввиде DATA URI. MIME выставляем application/octet-stream, в противном случае старые браузеры(и IE :D ) будут отображать страницу вместо сохранения.
  4. Используя довольно новый атрибут download в ссылке задаём её скачиваемость и имя файла для новых браузеров(старые будут качать, поскольку мы их "обманули" типом mime)
  5. Сохраняем ссылку в DOM
  6. Программно по ней кликаем

Что можно улучшить

  • Можно также кодировать изображения в base64 и добавлять в файл. Очень полезно, если пользователь хочет читать ваши статьи оффлайн и с изображениями. Учтите, что как кодирование, так и декодирование base64 занимает определённое время, и на мобильных платформах кодирование 10 изображений по 6мб каждое займёт ощутимое время
  • Встроить код скрипта в страницу
  • Если у вас есть какие-то пожелания и предложения — смело оставляйте комментарии. Критика «по делу» приветствуется



🖶 💾 ?