На данном сайте используются cookie-файлы и аналогичные технологии. Если, прочитав это сообщение, вы остаетесь на сайте, это означает, что вы не возражаете против использования этих технологий.
Подробнее Хорошо
Сайт работает в мобильном... оффлайн!
Блог
Андрей Викторович
Специалист по внедрению технических инноваций
14. 06. 2017г.
0

Сайт работает в мобильном... оффлайн!

Помнится, я обещал рассказать, как можно сделать прогрессивное веб-приложение, которое сможет работать на мобильном без соединения с Интернет. Это возможно, и мы это сделаем.

Нам понадобятся:

  1. SSL-сертификат для сайта (обязательно) - для соединения по https,

  2. Некоторый код на Javascript,

  3. Адаптивный сайт, выполненный в формате Progressive Web App.

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

Современные мобильные браузеры (Safari на iOS, Chrome на Android), позволяют зарегистрировать так называемого Service Worker - служебный код, который будет выполняться после добавления сайта из браузера на главный экран в случае, если Интернет недоступен.

Регистрация оффлайн-сервиса - простой Javascript-код. Что делает Service Worker? Он слушает событие "установка" (install) и по нему кэширует (сохраняет) все файлы, необходимые для работы сайта, локально. Затем, по событию запроса файла от браузера, которое он же и перехватывает, он отдает закэшированную копию. Всё!

Пример

Код регистрации Service Worker:

Код самого Service Worker, выполняющий действия из описания в предыдущем пункте:

Обратите внимание, реализация использует скрипт cache-polyfill.js, который легко найти поиском в Интернет. Он обеспечивает совместимость функционала со старыми браузерами.

Как это выглядит

После добавления сайта на главный экран, и единоразового запуска с главного экрана, мы можем отключить Интернет на мобильном и протестировать работу нашего прогрессивного веб-приложения оффлайн:

winter_sw

Если Вы мне не верите, то попробуйте приложение из примера сами!
https://bottest.axiomatest.ru :)
Метки:
Оставить комментарий
Назад
В корзине 0 товаров на 0 р.