Помнится, я обещал рассказать, как можно сделать прогрессивное веб-приложение, которое сможет работать на мобильном без соединения с Интернет. Это возможно, и мы это сделаем.
Нам понадобятся:
-
SSL-сертификат для сайта (обязательно) - для соединения по https,
-
Некоторый код на Javascript,
-
Адаптивный сайт, выполненный в формате Progressive Web App.
Как это работает
Современные мобильные браузеры (Safari на iOS, Chrome на Android), позволяют зарегистрировать так называемого Service Worker - служебный код, который будет выполняться после добавления сайта из браузера на главный экран в случае, если Интернет недоступен.
Регистрация оффлайн-сервиса - простой Javascript-код. Что делает Service Worker? Он слушает событие "установка" (install) и по нему кэширует (сохраняет) все файлы, необходимые для работы сайта, локально. Затем, по событию запроса файла от браузера, которое он же и перехватывает, он отдает закэшированную копию. Всё!
Пример
Код регистрации Service Worker:
Код самого Service Worker, выполняющий действия из описания в предыдущем пункте:
Обратите внимание, реализация использует скрипт cache-polyfill.js, который легко найти поиском в Интернет. Он обеспечивает совместимость функционала со старыми браузерами.
Как это выглядит
После добавления сайта на главный экран, и единоразового запуска с главного экрана, мы можем отключить Интернет на мобильном и протестировать работу нашего прогрессивного веб-приложения оффлайн:.png)
Если Вы мне не верите, то попробуйте приложение из примера сами!
https://bottest.axiomatest.ru :)