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

Просмотров: 1144

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

  • Смешанный режим работы, онлайн и оффлайн приложение
  • Проверяем наличие сети плагином 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>

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