Офлайн-страница

Просмотров: 13538
Дата последнего изменения: 25.01.2024

Александр Суворов

Сложность урока:

4 уровень - сложно, требуется сосредоточиться, внимание деталям и точному следованию инструкции.

Основными ресурсами для мобильных браузеров, конечно же, являются html-страницы. Нужно помнить о правилах оформления html-страниц для мобильных браузеров.

Мета тег viewport

В отличие от классического приложения на BitrixMobile, где управление масштабированием и размерами страницы осуществляется в PHP, в офлайн-приложении мета-тег viewport не выставляется автоматически. Т.е. размеры контента, масштабирование страницы придется выставлять в каждом файле самостоятельно, включая мета-тег viewport в <head> страницы. Например, вот так:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
  <meta name="format-detection" content="telephone=no">
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=320">
 </head>
...

Примечание: Более подробно ознакомиться с viewport-атрибутами и рекомендациями по его конфигурированию можно в официальной документации по платформам iOS и Android.

Важно! Платформа BitrixMobile iOS использует WKWebView для отображения веб-контента. С апреля 2020 года компания Apple отказалась от поддержки UIWebView в пользу WKWebView с современным API WebKit. В WKWebView была изменена работа с пользовательскими схемами и для обращения к офлайн-ресурсу в BitrixMobile необходимо обязательно использовать схему bxlocal://.

Подключение ядра платформы BitrixMobile

Опять же, на офлайн-страницах автоматически не подключается ядро мобильной платформы. Это нужно сделать самостоятельно.

Для начала нужно подключить базовый скрипт Cordova __deviceload__/cordova.js, используя схему bxlocal://:

<head>
  <meta charset="UTF-8">
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
  <meta name="format-detection" content="telephone=no">
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=290">
  <!--Include mobile platform-->
  <script type="text/javascript" src="bxlocal://__deviceload__/cordova.js"></script>
</head>

На офлайн-страницах не будут доступны javascript-библиотеки платформы «1C-Битрикс» в том виде, в котором они доступны на обычных страницах на удаленном сервере. Но будет доступен bundle из нескольких javascript-библиотек, которые нужно обязательно подключить для работы с основным API. Чтобы его использовать нужно подключить скрипт bitrix_mobile_core.js, используя схему bxlocal://:

<head>
    <meta charset="UTF-8">
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<meta name="format-detection" content="telephone=no">
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=290">
    <!--Include mobile platform-->
    <script type="text/javascript" src="bxlocal://__deviceload__/cordova.js"></script>
    <script type="text/javascript" src="bxlocal://bitrix_mobile_core.js"></script>
    <!---->
</head>

Теперь на странице можно использовать весь API платформы BitrixMobile, который описан ниже в данном курсе в разделе API.

В bitrix_mobile_core.js входят:

Основная библиотека: /bitrix/js/main/core/core.js
Библиотека для работы с ajax-запросами: /bitrix/js/main/core/core_ajax.js
Библиотека для работы с базой данных SQLite: /bitrix/js/main/core/core_db.js
Мобильные библиотеки: /bitrix/js/mobileapp/bitrix_mobile.js и /bitrix/js/mobileapp/mobile_lib.js

Подключение скриптов и стилей

Как уже было указано в уроке Итоговая файловая структура офлайн-ресурсов, все файлы офлайн ресурсов располагаются в приложении на одном уровне (в одной папке). Поэтому подключать js- и css-файлы можно просто, указав имя файла в атрибуте src/href со схемой bxlocal://:

<head>
    <meta charset="UTF-8">
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<meta name="format-detection" content="telephone=no">
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=290">
    <!--Include mobile platform-->
    <script type="text/javascript" src="bxlocal://__deviceload__/cordova.js"></script>
    <script type="text/javascript" src="bxlocal://bitrix_mobile_core.js"></script>
    <!---->
    <script type="text/javascript" src="bxlocal://script.js"></script>
    <link href="bxlocal://style.css" rel="stylesheet" type="text/css">
</head>

Обращение к изображениям в css-файлах и javascript-файлах также осуществляется по простому названию файла. Он будет браться относительно текущего расположения файла.

Использование API BitrixMobile

Здесь нет ограничений. Все так же, как и раньше. Но для работоспособности всего набора функций нужно на странице объявить версию API, которую вы будете использовать. Сейчас это 17 API. Также нужно определить версию платформы ios или android. Это можно сделать через определение user-agent браузера прямо javascript. В примере ниже мы просто установили platform="ios" и appVersion=17:

<head>
    <meta charset="UTF-8">
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<meta name="format-detection" content="telephone=no">
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=290">
    <!--Include mobile platform-->
      <script type="text/javascript">var appVersion = 17;var platform = "ios";</script>
    <script type="text/javascript" src="bxlocal://__deviceload__/cordova.js"></script>
    <script type="text/javascript" src="bxlocal://bitrix_mobile_core.js"></script>
    <!---->
    <script type="text/javascript" src="bxlocal://script.js"></script>

    <link href="bxlocal://style.css" rel="stylesheet" type="text/css">
</head>

Курсы разработаны в компании «1С-Битрикс»

Если вы нашли неточность в тексте, непонятное объяснение, пожалуйста, сообщите нам об этом в комментариях.

Развернуть комментарии