Автор оригинала: FreeCodeCamp Community Member.

Благодаря этану

Новый подход для смешивания веб-двигателя в нативные приложения

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

И что, если, просто настроив JSON Markup, вы можете получить доступ к всем нативным API, родным интерфейсам пользовательских интерфейсов, а также родных переходов из коробки?

Вот как выглядит минимальный пример в действии:

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

Прежде чем я объясню, как, вы можете спросить: «Это круто, но вы можете сделать что-нибудь значимое, кроме как просто отображение веб-страницы в кадре Native App?»

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

Вот один такой пример:

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

1. Сотрудник навигационного заголовка, в комплекте со встроенным переходным функциями
2. Вид веб-представления, который встраивает веб-приложение QR-код QR
3. Носный входной компонент чата внизу

Все это можно описать, просто настраивая некоторые атрибуты JSON Markup, которые мы видели выше.

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

Никакая структура разработки приложений не пыталась в корне решить эту проблему «Бесшовная интеграция веб-вида веб в нативные приложения» Потому что они все сосредоточены на выборе на 100% родных или на 100% HTML5.

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

Никто из них не видит родные None of them see native and html

В этой статье я собираюсь объяснить:

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

Почему вы использовали HTML в нативном приложении?

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

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

Некоторые части вашего приложения могут быть лучше реализованы с помощью веб-двигателя. Например, Websocket Это веб-класса, предназначенная для веб-среды. В этом случае имеет смысл использовать встроенный веб-двигатель ( wkwebview для iOS и WebView для Android ) вместо установки 3-й партийной библиотеки, по существу «Эмилирует» Websocket.

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

2. Avoid Large Binary Size Избегайте больших бинарных размеров

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

Например, для включения генератора изображений QR-кода вначале необходимо установить некоторую третью вечеринку, которая увеличит бинарный размер. Но если вы используете Engine Web View и библиотеку JavaScript через простой <скрипт s RC>, вы получаете все это бесплатно, и вам не нужно устанавливать любые 3-я местные собственные библиотеки.

3. No Reliable Mobile Library Exists Никакая надежная мобильная библиотека не существует

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

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

4. Build part-native, part-web-based apps Построить Part-Nature, Part-Web на основе приложений

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

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

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

Как это работает?

А. Джасонец

Jasonette – это с открытым исходным кодом, на основе наматываний подход к строительству кроссплатформенных нативных приложений.

Это похоже на веб-браузер, но вместо интерпретации HTML Markup на веб-страницы он интерпретирует json Markup в нативных приложений на iOS и Android.

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

Вы можете узнать больше о Jasonette здесь Отказ

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

B. Jasonette Web Conticer

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

Но интеграция веб-представлений в нативное приложение – это сложный бизнес. Безшовная интеграция требует:

1. Вид на веб-вид должен быть интегрирован как часть родного макета: Вид на веб-вид должен смешаться в приложение в составе нативной макеты и обрабатывается так же, как и любые другие собственные компоненты пользовательского интерфейса. В противном случае это будет чувствовать неуклюжем, и оно будет чувствовать себя точно так, как есть – это веб-сайт.
2. Родительское приложение может управлять детским веб-контейнером: Родительское приложение должно иметь возможность свободно управлять дочерним видом на ребенка.
3. Детский веб-контейнер может вызвать собственные события в родительском приложении: Приложение для детей должно быть в состоянии вызвать события родительского приложения для запуска собственных API.

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

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

Это было уже довольно полезно, но у него все еще было ограничение быть неинтерактивными Отказ

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

C. Jasonette Web Container 2.0: сделать его интерактивным

После освобождения версии 1 я экспериментировал со второй частью головоломки – Добавление интерактивности к веб-контейнеру.

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

Реализация: Интерактивный веб-контейнер

1. Load by URL Нагрузка по URL

Проблема

Ранее в версии 1, чтобы использовать веб-контейнер в качестве компонента просмотра фона, вы должны были сначала Установите $ Jason.body.buebackground.type. к "html" а затем сложный код HTML текст под $ Jason.body.bodybackground.Text атрибут Previously in version 1, to use web container as a background view component, you had to first set the

{  "$jason": {    "head": {      ...    },    "body": {      "background": {        "type": "html",        "text": "
Hello World
"      }    }  }}

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

Решение

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

{  "$jason": {    "head": {      ...    },    "body": {      "background": {        "type": "html",        "url": "file://index.html"      }    }  }}

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

{  "$jason": {    "head": {      ...    },    "body": {      "background": {        "type": "html",        "url": "https://news.ycombinator.com"      }    }  }}

2. Parent App <=> Web Container Communication Родительское приложение <=> веб-контейнер связи

Проблема

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

1. Jasonette => Web содержит ER: Вызовите функции JavaScript внутри веб-контейнера от Jasonette.
2. Веб-контейнер => Jasonet TE: Вызовите нативные API из веб-контейнеров.

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

Решение

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

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

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

{  "type": "$agent.request",  "options": {    "id": "$webcontainer",    "method": "login",    "params": ["username", "password"]  }}

$ agent.request это нативная API, которая вызывает запрос JSON-RPC в веб-контейнер. Чтобы использовать его, мы должны пройти Варианты объект как его параметр.

Варианты Объект – это фактический JSON-RPC Запрос это будет отправлено в веб-контейнер. Давайте посмотрим, что означает каждый атрибут:

• ID : Веб-контейнер построен на верхней части архитектуры более низкого уровня агент Отказ Обычно вы можете иметь несколько агентов для единого представления, и каждый агент может иметь свой уникальный идентификатор. Но Веб-контейнер – это специальный тип агента, который может иметь только идентификатор $ webcontainer Вот почему мы используем этот идентификатор здесь.
• Метод : Имя функции JavaScript звонить
• Пармы : Массив параметров для передачи в функцию JavaScript.

Полная разметка будет выглядеть что-то подобное:

{  "$jason": {    "head": {      "actions": {        "$load": {          "type": "$agent.request",          "options": {            "id": "$webcontainer",            "method": "login",            "params": ["alice", "1234"]          }        }      }    },    "body": {      "header": {        "title": "Web Container 2.0"      },      "background": {        "type": "html",        "url": "file://index.html"      }    }  }}

Эта разметка говорит:

Когда нагрузка на вид ( $ Jason.head.actions. $ Load ), сделайте запрос JSON-RPC в веб-контейнер ( $ agent.request ), где запрос указан в разделе опции When the view loads ( $jason.head.actions.$load

Веб-контейнер определяется под $ Jason.body.buebackground , который в этом случае загружается локальный файл под названием Файл://index.html Отказ

Он будет искать функцию JavaScript под названием Вход и пройти два аргумента под Пармы ( "Алиса" и "1234" )

login("alice", "1234")

Я объяснил, что только родительское приложение может вызвать вызовы функций JavaScript Child Web Container, но вы также можете сделать противоположную и Пусть веб-контейнер срабатывает на родном API родительской приложения Отказ

Чтобы узнать больше, проверьте Агентская документация Отказ

Пример

Допустимся к примеру QR-код, который я кратко поделился выше:

1. компонент ввода нижнего колонтитула на 100% родной Отказ
2. QR-код генерируется веб-контейнером Как веб-приложение Отказ
3. Когда пользователь вводит что-то и нажимает «генерировать», он называет $ agent.request Действие в веб-контейнер, вызывая Функция JavaScript “QR”

Вы можете проверить пример здесь Отказ

3. Script Injection Инъюждение скрипта

Проблема

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

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

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

Решение

Как упоминалось в предыдущем разделе, $ Jason.body.buebackground Веб-контейнер – это просто еще один агент As mentioned in the previous section, the $jason.body.background web container is just another agent

4. URL Click Handling URL Щелчок обработки

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

1. Readonly: Обратите внимание на веб-контейнер так, чтобы отреагировали и игнорируйте все события, такие как Touch или Scroll. Все веб-контейнеры доступны, если вы не сообщите им, чтобы вести себя как обычный браузер, как описано ниже.
2. Регулярное поведение браузера: Пусть пользователи взаимодействуют со страницей, ведущим себя как обычный браузер. Вы объявляете его, установив «Тип»: «$ по умолчанию» как его Действие атрибут.

Проблема

Оба являются «Все или ничего» решения Отказ

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

Решение

С новым веб-контейнером вы можете прикрепить любой Действие на $ Jason.body.buebackground Веб-контейнер для обработки ссылок Нажмите события.

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

{  "$jason": {    "head": {      "actions": {        "displayBanner": {          "type": "$util.banner",          "options": {            "title": "Clicked",            "description": "Link {{$jason.url}} clicked!"          }        }      }    },    "body": {      "background": {        "type": "html",        "url": "file://index.html",        "action": {          "trigger": "displayBanner"        }      }    }  }}

Здесь мы приложили «Trigger»: «Displaybanner» к веб-контейнеру. Это означает, что когда пользователь нажимает на любую ссылку в веб-контейнере, он будет срабатывать Displaybanner Действие вместо того, чтобы позволить просматривать вид на веб-вид.

Кроме того, если вы посмотрите на Displaybanner Действие, вы заметите $ Джейсон Переменная. В этом случае ссылка на щелчке будет передана через $ Джейсон Переменная. Например, если вы нажали URL-адрес по имени "https://google.com" , $ Джейсон будет иметь следующее значение:

{  "url": "https://google.com"}

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

Давайте возьмем еще один пример, где мы реализуем пользовательский веб-браузер:

{  "$jason": {    "head": {      "actions": {        "handleLink": [{          "{{#if $jason.url.indexOf('signin') !== -1 }}": {            "type": "$href",            "options": {              "url": "file://key.html"            }          }        }, {          "{{#else}}": {            "type": "$default"          }        }]      }    },    "body": {      "background": {        "type": "html",        "url": "file://index.html",        "action": {          "trigger": "handleLink"        }      }    }  }}

Мы проверяем, если URL содержит строку войти We test if the URL contains the string signin

1. Если он содержит Signin Он открывает новый взгляд, чтобы позаботиться о подписании в результате.
2. Если это не содержит войти просто запустите «Тип»: «$ по умолчанию» действие, так что оно ведет себя как обычный браузер.

Пример использования

Создание пользовательского веб-браузера

Теперь мы можем воспользоваться тем, что новый веб-контейнер может:

1. Возьми URL Атрибут для загрузки, функционирует как полноценный браузер
2. Выборочно обрабатывать клики ссылки в зависимости от URL

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

Например, взгляните на пример ниже:

С левой стороны мы видим, что нажатие на ссылку ведет себя как обычный браузер ( «Тип»: «$ по умолчанию» )

На правой стороне мы видим, что нажатие на ссылку делает нативный переход на другой вид Джейсона.

Все это может быть достигнуто путем избирательного запуска различных действий на основе $ Jason.url Отказ

Шаг 1. Приложить действие с именем визит в веб-контейнер, как это:

{  ...  "body": {    "background": {      "type": "html",      "url": "https://news.ycombinator.com",      "action": {        "trigger": "visit"      }    }  }}

Шаг 2. Запускать соответствующие действия внутри визит, на основе $ Jason.url.

В следующем коде мы проверяем, если $ Jason.url матчи Новейшие , показать , Спросите и т. Д. (Это верхние ссылки на пункт меню). Если они сделают, мы позволяем веб-контейнеру вести себя как обычный браузер, установив «Тип»: «$ по умолчанию»

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

..."actions": {  "visit": [    {      "{{#if /\\/(newest|show|ask)$/.test($jason.url) }}": {        "type": "$default"      }    },    {      "{{#else}}": {        "type": "$href",        "options": {          "url": "https://jasonette.github.io/Jasonpedia/webcontainer/agent/hijack.json",          "preload": {            "background": "#ffffff"          },          "options": {            "url": "{{$jason.url}}"          }        }      }    }  ]},

Проверьте полную разметку JSON для веб-браузера здесь Check out the full JSON markup for the web browser here

Мгновенное приложение “Hybrid”

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

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

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

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

JASONBASE – это бесплатный сервис хостинга JSON, который я создал, чтобы легко хостить JSON Markup для приложений Jasonette.

Естественно, это просто сайт, но я встроен в Jasonette так, чтобы при нажатии на ссылку, вместо того, чтобы открыть веб-страницу, она делает родной $ HREF. Переход на родной вид Джейсона.

Мне не нужно было коснуться любого из кода Jasonbase.com, чтобы построить это приложение.

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

Вы можете проверить код здесь Отказ

Вывод

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

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

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

Решение было созданию абстракции состоит из:

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

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

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

В целом, это было здорово, и я доволен тем, как оказалось. Overall, it’s been great and I’m satisfied with how it turned out. The documentation is up to date to reflect all the new features, so feel free to dig in and play around. Документация актуальна

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

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

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

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

Идя вперед, я планирую поделиться большим количеством этих случаев использования и учебников, поэтому, если вы заинтересованы, пожалуйста, следуйте на средний Going forward I’m planning to share more of these use cases and tutorials, so if you’re interested, please follow along on medium or twitter