Семь строк кода JSON, чтобы превратить ваш сайт в мобильное приложение

В этой статье описывается, как с помощью Jasonette создать настоящее «гибридное» приложение, объединив веб-представления и собственные компоненты.

Если я скажу вам, просто нужноПриведенные выше 7 строк оранжевого кода JSONНа сайте можно превратить в мобильное приложение, вы верите в это? И все это без использования какого-то фреймворка API, переписывающего веб-сайт, вы можете получить такое же поведение с мобильным приложением. Если у вас уже есть веб-сайт, просто URL-адрес ссылки может быть «упакован» как собственное приложение.

Исходя из этого, вы можете получить прямой доступ ко всем нативным API, нативным компонентам пользовательского интерфейса и нативным переходам представления (View Transition), лишь немного изменив содержимое кода JSON.

Наиболее упрощенный пример эффекта показан на следующем рисунке:

Как видите, я встроил веб-страницу GitHub.com, но остальная часть макета — это нативные компоненты пользовательского интерфейса, такие как панель навигации и панель вкладок внизу. И нам не нужно использовать какой-либо API для перезаписи веб-сайта, мы можем автоматически получить собственный эффект переключения.

Прежде чем углубиться в детали, вы можете спросить: «Выглядит круто, но в чем смысл этой техники, кроме как в отображении веб-страницы в нативном фреймворке приложения?»

Хороший вопрос! Этому также посвящена данная статья. Нам просто нужно создать бесшовнуюДвусторонняя связь между веб-представлением и приложением, что позволяет родительскому приложению запускать любую функцию JavaScript внутри веб-представления, которое затем может вызывать собственный API извне.

Например:

Обратите внимание, что это представление содержит:

Встроенная панель навигации со встроенным переключателем
Веб-представление, в которое встроено веб-приложение, генерирующее QR-коды.
Включите собственный компонент ввода текста внизу

Всего вышеперечисленного можно добиться лишь небольшими корректировками свойств кода JSON.

Наконец, обратите внимание, что когда вы вводите другой контент в область ввода текста, QR-код также будет меняться соответствующим образом. Набранный текст запускает функцию JavaScript в веб-приложении QR Code Generator для повторного создания изображения QR-кода.

Ни одна структура разработки никогда не пыталась фундаментально решить "Веб-представления легко интегрируются с собственными приложениями.", поскольку эти фреймворки ориентированы на полностью нативный или полностью HTML5-подход.

Всякий раз, когда мы слышим, как кто-то обсуждает будущее мобильных приложений, мы, скорее всего, услышим что-то вроде «Выиграет ли в конце концов HTML5 или нативный подход?"Такое заявление.

Кажется, никто не думаетnativeа такжеhtmlСосуществование возможно, а синергия и окончательная реализация того и другого не кажутся легкими.

В этой статье я представлю:

Почему слияние веб-движков и нативных компонентов часто является лучшей практикой.
Почему так сложно легко интегрировать HTML и нативный код и как этого добиться.
Что еще более важно, как использовать такую технологию для быстрого создания собственного приложения.

Зачем использовать HTML в нативных приложениях?

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

1. Используйте нативные веб-функции

Возможно, более целесообразно использовать веб-движок для частей приложения. Например, WebSocket — это встроенная веб-функция, в основном предназначенная для веб-среды. В этом случае целесообразнее использовать встроенный веб-движок (WKWebView для iOSтак же какAndroid-веб-просмотр), вместо установки чего-то, что может только "моделирование"Сторонняя библиотека для WebSocket.

Не лучше ли использовать бесплатные инструменты для достижения своих целей без установки дополнительного кода. В то же время это породило и следующую причину.

2. Избегайте слишком больших двоичных файлов

Для некоторых функций может потребоваться использование больших сторонних библиотек, и вы можете захотеть использовать такие функции быстро.

Например, чтобы изначально включить генератор изображений QR-кода, может потребоваться установка некоторых сторонних библиотек, что может привести к увеличению двоичных файлов. Но если вы используете движок веб-просмотра и передаете простой<script src>Вызов библиотеки JavaScript делает все это бесплатно и позволяет избежать использования сторонних нативных библиотек.

3. Отсутствие надежных мобильных библиотек

Для некоторых передовых технологий в настоящее время может не быть стабильной и надежной мобильной реализации.

К счастью, большинство этих технологий имеют веб-реализацию, поэтому наиболее эффективным способом интеграции является использование библиотеки JavaScript.

4. Создавайте частично нативные, частично веб-приложения

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

Например, у вас может быть очень сложная веб-страница, которую нельзя быстро преобразовать в мобильное приложение, но остальную часть веб-сайта можно легко преобразовать.

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

Как это достигается? А. Джейсонетт

Jasonette — это метод с открытым исходным кодом для создания кроссплатформенных собственных приложений на основе языков разметки.

Эта технология выглядит как веб-браузер, но вместо того, чтобы интерпретировать язык разметки HTML как веб-страницы, она интерпретирует разметку JSON как собственные приложения для iOS и Android.

Точно так же, как все веб-браузеры имеют один и тот же код, но могут предоставлять пользователям различные типы веб-приложений, интерпретируя различные типы HTML-разметки по мере необходимости, все приложения Jasonette имеют одну и ту же библиотеку, которая интерпретирует различные типы тегов HTML по мере необходимости. Разметьте JSON и создайте свое приложение. Разработчикам вообще не нужно трогать сам код, им нужно только написать теги и «перевести» код в нативные приложения в режиме реального времени для разработки собственных приложений.

Хотя основная роль Jasonette заключается в создании нативных приложений, в этой статье основное внимание уделяется тому, как интегрировать HTML в основной нативный движок, так что давайте посмотрим.

B. Веб-контейнер Jasonette

Нативное приложение отличное, но иногда нам все еще нужно использовать веб-функцию.

Но интеграция веб-представлений с нативными приложениями — трудоемкий процесс. Требования к бесшовной интеграции:

Веб-представления должны быть интегрированы как часть собственного макета.: веб-представления должны быть включены в приложение как часть собственного макета и должны работать так же, как и любые другие собственные компоненты пользовательского интерфейса. В противном случае пользователи будут чувствовать себя неуклюже и чувствовать, что они действительно посещают веб-сайт.
Родительское приложение может управлять дочерним веб-контейнером: Родительское приложение должно иметь возможность свободно управлять дочерними веб-представлениями.
Дочерний веб-контейнер может запускать собственные события родительского приложения.: дочернее приложение должно иметь возможность инициировать события родительского приложения для запуска собственного API.

Это очень тяжелая работа, поэтому начнем с первой ссылки:Встраивайте веб-контейнер непосредственно в нативный макет — и выпустил его как версию 1:

Веб-контейнер JSON, HTML в JSON станут нативными компонентами приложения.

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

Родительское приложение не может управлять дочерним веб-контейнером, а дочерний контейнер не может отправлять какие-либо уведомления о событиях в родительское приложение, чтоДелает веб-контейнер полностью изолированным от внешнего мира..

C. Веб-контейнер Jasonette 2.0: сделать его интерактивным

После выпуска версии 1 мы начали работать над второй проблемой:Добавьте интерактивности в веб-контейнеры.

Вот как добавить интерактивность в статический веб-контейнер, который вы создали ранее, и сделать его еще более мощным.

实现：交互式 Web 容器 1. 通过 URL 加载 вопрос

Перед первым изданием, чтобы использовать веб в качестве представления фона в контейнерной сборке, мы сначала надо$jason.body.background.typeУстановить как"html", затем в$jason.body.background.textдобавить жестко заданный HTML-текст под атрибутом, например:

Как правило, люди предпочитают создавать экземпляр контейнера напрямую, используя веб-URL, а не жестко кодировать весь HTML-код в виде одной строки кода.

решение

Веб-контейнер 2.0 добавляетurlсвойства, мы можем встроитьfile://локальный HTML в виде, например, этого (можно загрузить из локального HTML-файла, опубликованного вместе с приложением):

Или вы также можете встроить пультhttp[s]://URL-адрес, подобный этому (может быть загружен из удаленного HTML):

2. Двусторонняя связь между родительским приложением и веб-контейнером вопрос

Раньше веб-контейнеры можно было использовать только для отображения контента, а не интерактивности. это означаетНи одно из следующих действий не может быть выполнено:

Связь Jasonette с веб-контейнером: вызов функции JavaScript внутри веб-контейнера из Jasonette.
Веб-контейнер для связи Jasonette: вызов собственных API-интерфейсов из кода веб-контейнера.

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

решение

Самой большой целью Jasonette является разработка стандартизированного языка разметки, который может описывать кросс-платформенные мобильные приложения. Поэтому нам нужен этот язык разметки для полного описания двунаправленной связи между родительским приложением и дочерним веб-контейнером.

Для этого я использую конвейер связи на основе JSON-RPC между родительским приложением и дочерним веб-контейнером. Поскольку все в Jasonette выражается через объекты JSON, использование стандартного формата JSON-RPC в качестве протокола связи является очень естественным и логичным путем.

Чтобы функция JavaScript могла вызывать веб-контейнер, объявите файл с именем$agent.requestоперация:

$agent.request — это собственный API, который инициирует запросы JSON-RPC к веб-контейнеру. Чтобы использовать этот API,optionsОбъекты передаются как параметры.

optionsОбъекты на самом деле представляют собой запросы JSON-RPC, отправляемые в веб-контейнер. Значение каждого атрибута следующее:

id: веб-контейнер построен на базовой архитектуре, называемой агентом.Вообще говоря, мы можем использовать несколько агентов для представления, и каждый агент может иметь свой собственный уникальный идентификатор. Но веб-контейнер — это особый тип агента, который может использовать только $webcontainer в качестве идентификатора, поэтому здесь требуется идентификатор.
method: Имя вызываемой функции JavaScript.
params: Массив аргументов, передаваемых функции JavaScript.

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

Эта строка токенов на самом деле говорит:

Когда представление загружается ($jason.head.actions.$load), агенту веб-контейнера отправляется запрос JSON-RPC ($agent.request), и конкретный запросoptionsУказано.

Веб-контейнер определен в $jason.body.background, который в этом случае загрузит файл с именемfile://index.htmlлокальные файлы.

Затем он ищет функцию JavaScript с именем login и передаетparamsДва параметра ниже ("alice"а также"1234").

Выше описано, как родительское приложение инициирует вызов функции JavaScript дочернего веб-контейнера Мы также можем сделать обратное и позволить веб-контейнеру активировать собственный API родительского приложения.

Для получения подробной информации см. документацию агента.

Документация агента: https://docs.jasonette.com/agents/

Пример

Вернитесь к приведенному выше примеру генератора QR-кода:

Компонент ввода текста внизу на 100% родной.
QR-коды генерируются веб-контейнером, работающим как веб-приложение.
Когда пользователь что-то вводит и нажимает «сгенерировать»,$agent.requestдействие, которое, в свою очередь, вызывает функцию JavaScript "qr".

Конкретные примеры см.

https://github.com/Jasonette/Jasonpedia/blob/gh-pages/webcontainer/agent/fn/index.json

3. Внедрение скрипта вопрос

Иногда нам может понадобиться динамически внедрить код JavaScript в веб-контейнер после того, как веб-контейнер завершит начальную загрузку HTML.

Предположим, мы создаем пользовательское приложение веб-браузера, мы можем захотеть внедрить наш собственный пользовательский код JavaScript в каждое веб-представление, тем самым настроив поведение веб-представления, которое чем-то похоже на расширение веб-браузера.

Даже если вам не нужно создавать веб-браузер, вам также необходимо использовать внедрение скриптов, если вы хотите реализовать настраиваемое поведение для URL-адресов, содержащих контент, который мы не контролируем. Нативные приложения и веб-контейнеры могут быть$agentСвязь API, но если содержимое HTML не может быть изменено, единственный способ динамического внедрения$agentИнтерфейс добавляется в веб-контейнер.

решение

Как указано выше,$jason.body.backgroundЭтот веб-контейнер также являетсяagent, что означает, что мы можем использовать тот же метод $agent.inject, что и обычный агент.

4. Обработка кликов по URL

Исторически веб-контейнер мог обрабатывать клики по ссылкам только двумя способами:

только чтение: рассматривать веб-контейнер как доступный только для чтения и игнорировать все события, такие как касание или прокрутка. На данный момент все веб-контейнеры доступны только для чтения, если явно не задано поведение обычного браузера, как описано ниже.
Обычное поведение браузера: позволяет пользователю взаимодействовать со страницей, как в обычном браузере. Для этого требуется декларация, т."type": "$default"Установить какactionАтрибуты.

вопрос

обаРешение «все или ничего».

Для «только для чтения» веб-контейнер игнорирует любое взаимодействие с пользователем.
Для «нормального поведения браузера» веб-контейнер будет вести себя так же, как браузер. После нажатия на ссылку страница будет обновлена, как обычная веб-страница, чтобы отобразить содержимое ссылки, но нет возможности перехватить щелчок и вызвать другие собственные API.

решение

Используя новый веб-контейнер, любойactionприкреплен к$jason.body.backgroundЭтот веб-контейнер, в свою очередь, обрабатывает такие события, как клики по ссылкам.

Давайте вместе рассмотрим пример:

Здесь мы прикрепили веб-контейнер"trigger": "displayBanner", что означает, что когда пользователь щелкает любую ссылку внутри веб-контейнера,displayBannerоперации, а не обрабатываются непосредственно веб-представлением.

Также, если вы посмотрите наdisplayBannerОперация обнаружит, что здесь появляются переменные$jason. В этом примере ссылка, по которой щелкнули, пройдет через$jasonПеременная передача. Например, если вы нажмете на имя"https://google.com"URL,$jasonБудут получены следующие значения:

Это означает, что мы можем проверять значение $jason.url и выборочно запускать различные действия.

Давайте посмотрим на реализацию пользовательского веб-браузера в качестве другого примера:

Мы проверим, содержит ли URL строкуsignin, и выполнить два разных действия в зависимости от результата.

Если включеныsignin, открывает новое представление и завершает вход в систему.
если не включеныsignin, затем запустите напрямую"type": "$default"Операция для достижения поведения, аналогичного обычным браузерам.

Пример использования Создайте собственный веб-браузер

Много интересных вещей можно сделать со следующими функциями нового веб-контейнера:

пройти черезurlСвойства загружаются автоматически и действуют как полнофункциональный браузер.
При необходимости обрабатывать клики по ссылкам в зависимости от URL-адреса.

Мы даже можем создать собственный веб-браузер с десятками строк кода JSON. Поскольку каждый клик по ссылке теперь может быть перехвачен, можно проверить$jason.url, и запускаем любое действие, которое нам нужно, в зависимости от результата.

Например следующий пример:

Как видно из изображения выше, поведение после перехода по ссылке такое же, как и в обычном браузере ("type": "$default").

Как вы можете видеть на изображении ниже, щелчок по ссылке может естественным образом перейти к другому представлению JASON.

Все это может быть основано на$jason.urlЗначение , выборочно запускает реализацию.

Шаг 1: Прикрепите файл с именемvisitоперация:

Шаг 2: Согласно$jason.urlзначение для запускаvisitВнутренние связанные операции

В следующем коде мы проверяем$jason.urlбудь то сnewest,show,askи т. д. (обе ссылки на пункты меню верхнего уровня) совпадают. Если он совпадает, установите"type": "$default"Вы можете сделать веб-контейнер вести себя как обычный браузер.

Если шаблон не совпадает, вы можете пройти родным$hrefПереход открывает новое представление и передает нажатую ссылку в качестве параметра.

См. полную разметку JSON для этого веб-браузера (всего 48 строк!):

https://github.com/Jasonette/Jasonpedia/blob/gh-pages/webcontainer/agent/hijack.json

Мгновенно создавайте «гибридные» приложения

Когда люди обычно говорят «гибридные» приложения, они в основном имеют в виду веб-приложения HTML, инкапсулированные внутри собственных фреймворков приложений.

Но это не то, о чем мы говорим здесь. Так называемый «гибрид» здесь относится к настоящему гибридному приложению, то есть к приложению, которое может одновременно содержать несколько собственных представлений и несколько веб-представлений. В этом приложении представление может иметь несколько собственных компонентов пользовательского интерфейса и веб-контейнер, который отображается с одним и тем же собственным макетом.

Переплетение веб-представления с нативным представлением должно быть максимально бесшовным, чтобы оно было совершенно неразличимо для пользователя.

В этом примере я создал приложение, которое отображает содержимое jasonbase.com в веб-контейнере в виде домашней страницы.

Jasonbase — это бесплатная служба хостинга JSON, разработанная мной, которая упрощает размещение разметки JSON, используемой приложениями Jasonette.

Конечно, это сам сайт, но я его встраиваю в Jasonette, поэтому после перехода по ссылке он не открывает страницу, идет через родной$hrefПреобразуется для отображения собственных представлений JASON.

Это приложение можно создать, вообще не касаясь кода Jasonbase.com.

Просто встройте веб-сайт как веб-контейнер в Jasonette, а затем перехватите нативную обработку кликов по ссылкам, чтобы вы могли реализовать различные функции, которые есть в нативных приложениях, такие как запуск нативных API и выполнение нативных преобразований.

Полный код можно найти здесь:

https://github.com/Jasonette/Jasonpedia/blob/gh-pages/webcontainer/agent/hybrid.json

В заключение

Что делает все это таким удивительным, на мой взгляд, то,Все правильно обрабатывается на уровне фреймворка. Вся самая тяжелая работа выполняется в фоновом режиме.

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

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

Все решение создает абстракцию, состоящую из:

Декларативный язык разметки: используется для описания того, как встроить веб-представление в собственное приложение.
Протокол связи (JSON-RPC): для чрезвычайно простой связи между приложением и его дочерними веб-представлениями.

Я не думаю, что этот подход может решить все проблемы, но из вашего собственного использования случая, по крайней мере, это хорошее решение.

Я пытаюсь создавать приложения с очень передовыми технологиями, которые настолько передовые, что пока нет стабильной и надежной реализации на мобильных устройствах (из-за некоторой природы протокола даже не ясно, будет ли в конечном итоге мобильная реализация). . Хорошо, что все эти технологии реализованы на JavaScript, поэтому их легко интегрировать в ваше приложение без особых усилий.

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

Утверждение: Чем больше способности, тем больше ответственность

Наконец, я хочу сказать: несмотря на то, что эта новая технология действительно мощная, я думаю, что каждый должен идти на более комплексные компромиссы с точки зрения пользовательского опыта при разработке приложений.

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

Важно подчеркнуть, что я не думаю, что каждое ваше приложение должно содержать как HTML, так и нативные компоненты. Я просто думаю, что этот подход будет более полезен для многих людей, столкнувшихся с некоторыми конкретными ситуациями, только не переусердствуйте.

Ссылки по теме