Меню

Стрим №5: Оффлайн доступ в мобильном приложении (бонус видео)

Внимание! Все сообщения на форуме проходят модерацию. Ваше сообщение появится после проверки.
Поиск  Правила 
Ответить
RSS
Стрим №5: Оффлайн доступ в мобильном приложении (бонус видео)
 
#1
Это нравится: 0 Да / 0 Нет
01.02.2022 13:56:56
Стрим №5: Оффлайн доступ в мобильном приложении (бонус видео)

Дополнительное видео: рассказываю о реализации оффлайн доступа в приложении, если на устройстве пользователя отсутствует интернет-соединение.
 
   Цитировать   Имя
 
#2
Это нравится: 0 Да / 0 Нет
01.02.2022 13:56:57
Дополнение.
Если хотите что бы офлайн режим включался и после загрузки приложения.
Например:
- если пользователь уже попал на на главную страницу;
- у него пропала сеть;
- он попробовал перейти на другую страницу;
Получит туже, не красивую ошибку.

Что бы и в таком случае отдать оффлайн страницу, добавляем плагин 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);) - появления сети и автоматически возвращать пользователя на сайт.
 
Цитировать   Имя
 
#3
Это нравится: 0 Да / 0 Нет
21.02.2024 15:48:39
Можно вообще избавиться от страницы с ошибкой браузера?
Цитата
Цитата
написал:
На локальной странице offline.html делаем, собственно оффлайн странику с красивой версткой или алертом.На нейже, можно добавить проверку события (document.addEventListener("ofnline", onOnline, false) - появления сети и автоматически возвращать пользователя на сайт.
А можно пример проверки события (document.addEventListener("ofnline", onOnline, false) - появления сети и автоматически возвращать пользователя на сайт ))

Я на странице offline.html делаю следующую проверку:
Код
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {

document.addEventListener("online", onOnline, false);

function onOnline() {
  var networkState = navigator.connection.type;
  if (networkState !== Connection.NONE) {
    //window.location.replace('https://s-be.ru/mobileapp/');
    var ref = cordova.InAppBrowser.open('https://сайт/mobileapp/', '_blank', 'location=yes');
  }else {var ref = window.open('offline.html', '_self', 'location=yes');}
}
}
Изначально на index.html подключается js:

Код
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {

function onOffline(e) {
  e.preventDefault();
  var src = '/offline.html';
  var target = '_self';
  var option = "location=no, toolbar=yes, zoom=no, hidden=yes, hardwareback=no, hideurlbar=yes,hidenavigationbuttons=yes";
  var ref = cordova.InAppBrowser.open(src, target, option);
}

var target = "_blank";
var options = "location=yes";
var opensite = cordova.InAppBrowser.open('https://сайт/mobileapp/', target, options);
}
Т.е какая логика работает:
Если изначально нет интернета:
1. Клиент заходит в приложение видит болванку html, что нет интернета
2. Включает интернет, у него сразу страница восстанавливается
3. Снова интернет пропадает и выходит некрасивая странница (вот нужно чтобы появлялась болванка, а не ошибка браузера)

Если интернет есть изначально:
1. Клиент зашел на сайт с интернетом
2. Интернет пропал, появилась болванка
3. Интернет восстановился, страница автоматически вернулась.
4. Интернет снова пропал, появляется некрасивая странница (вот нужно чтобы появлялась болванка, а не ошибка браузера)  
 
Цитировать   Имя
 
#4
Это нравится: 0 Да / 0 Нет
21.02.2024 16:45:52
Цитата
написал:
var opensite = cordova.InAppBrowser.open('https://ВАШ_САЙТ/&#39;, target, options)
Здесь открывает сайт без statusbar'a. Как можно снова его отобразить. Если указать var target = "_self"; то страницу приложения не открывает.
Код
 <preference name="StatusBarOverlaysWebView" value="true" />
и
StatusBar.show();


Не меняют ситуацию, StatusBar не отображается на странице... Подскажите как модно отобразить?
Изменено: Михаил Базаров - 21.02.2024 19:34:08
 
Цитировать   Имя
 
Ответить
Читают тему
BBCode   Правила
Форма ответов
 
Текст сообщения*
Перетащите файлы
Ничего не найдено
Файл
 

Блог-note: заметки разработчика

Фильтрация разделов каталога с помощью умного фильтра

Задача: В каталоге выводится умный фильтр, нужно сделать так чтобы он применялся не только к товарам но и к компоненту &...

Memcached на сайте под управлением битрикс, при использовании Веб Окружения Битрикс

Если вам важна скорость отдачи сайта, а у вашего сервера медленный диск для использования кеша на файлах. Можно кеширова...

AJAX корзина с отправкой количества из раздела каталога

Столкнулся с задачкой: нужно было на одном сайте реализовать интерактивный прайс лист. При этом, у пользователя должна б...

Кнопка для отправки на печать карточки товара, без лишних данных

Задача: реализовать возможность печати карточки товара, но так что бы в ней не было не нужных данных: шапки и футера сай...

Получить список элементов инфоблока с ценами с помощью D7

Задача: использовать D7 в 1С-Битрикс для получения списка элементов инфоблока вместе с их ценами. Это может быть полезно...

Заполнить свойство заказа выбранным пунктом самовывоза и передать в 1С

Задача: При оформлении заказа пользователь может выбрать пункт самовывоза (склады магазина). Нужно заполнить сво...

Если предложение SKU в корзине, поменять кнопку добавления на "В корзине"

Данная заметка является дополнением к ранее опубликованной: Если товар в корзине, поменять значение input на "В корзине"...

Определить местоположение пользователя и показать магазины поблизости.

Задача: в мобильном приложении, которое открывает сайт на 1С-Битрикс внутри себя, нужно определить местоположение пользо...

Фиксированная корзина с обновлением, без перезагрузки страницы.

Иногда нужно сделать так, чтобы корзина в интернет магазине, созданном на Битрикс, была постоянно на виду, при этом обно...