Видеоурок Серия 4: Cмешанный режим работы, онлайн и оффлайн приложение

Делаем приложение универсальным: если на устройстве есть сеть, показываем онлайн версию. Если интернет соединения нет, показывам "закешированную" версию приложения.
План серии:

Смешанный режим работы, онлайн и оффлайн приложение
Проверяем наличие сети плагином network information на отсутсвие или наличие сети
В соотвествии с этим знанием перенаправляем на нужный адрес (внутрь www или на внешний сайт)

Предыдущая серия Следующая серия

Поблагодарить и поддержать!

Поддержать выпуски видео уроков, поблагодарить за полезную инструкцию или заметку можно через:

Юманей

Все серии

Комментарии к видео

Все комментарии: Оставить комментарий

Михаил Базаров 10.04.2022

Дополнение.
Если хотите что бы офлайн режим включался и после загрузки приложения.
Например:
- если пользователь уже попал на на главную страницу;
- у него пропала сеть;
- он попробовал перейти на другую страницу;
Получит туже, не красивую ошибку.

Что бы и в таком случае отдать оффлайн страницу, добавляем плагин inappbrowser
На индексной странице добавляем:

Код
<script> document.addEventListener("deviceready", onDeviceReady, false); function onDeviceReady() { document.addEventListener("offline", onOffline, false); function onOffline(e) { e.preventDefault(); var src = '/offline.html'; var target = '_self'; var option = "location=no, toolbar=no, zoom=no, hidden=yes, hardwareback=no, hideurlbar=yes,hidenavigationbuttons=yes"; var ref = cordova.InAppBrowser.open(src, target, option); } var target = "_blank"; var options = "location=no,toolbar=no,hideurlbar=yes,hidenavigationbuttons=yes,lefttoright=yes,zoom=no"; var opensite = cordova.InAppBrowser.open('https://ВАШ_САЙТ/', target, options); } </script>

Код

<script>         document.addEventListener("deviceready", onDeviceReady, false);         function onDeviceReady() {             document.addEventListener("offline", onOffline, false);             function onOffline(e) {                 e.preventDefault();                 var src = '/offline.html';                 var target = '_self';                 var option = "location=no, toolbar=no, zoom=no, hidden=yes, hardwareback=no, hideurlbar=yes,hidenavigationbuttons=yes";                 var ref = cordova.InAppBrowser.open(src, target, option);             }             var target = "_blank";             var options = "location=no,toolbar=no,hideurlbar=yes,hidenavigationbuttons=yes,lefttoright=yes,zoom=no";             var opensite = cordova.InAppBrowser.open('https://ВАШ_САЙТ/', target, options);         }     </script>

На локальной странице offline.html делаем, собственно оффлайн странику с красивой версткой или алертом.
На нейже, можно добавить проверку события (document.addEventListener("ofnline", onOnline, false)

- появления сети и автоматически возвращать пользователя на сайт.