Как из сайта сделать приложение для ios
Перейти к содержимому

Как из сайта сделать приложение для ios

  • автор:

Building a Mobile App using HTML, CSS, and JavaScript

Wisdom Ekpotu

So you have seen the title, and you are wondering how you can pull off building an actual mobile application by just using the knowledge of basic web technologies without the need to learn Android or IOS development? This is made possible by converting your regular web applications to work as a standard mobile application that can be installed on multiple platforms. By doing this, we will achieve a type of application referred to as Progressive Web Apps (PWAs).

In this article, we will learn how to leverage the power of HTML, CSS, and Javascript to build a simple mobile app. We will not be using frameworks like Ionic or React Native. This is because this tutorial focuses on showing how a basic web app can be made to feel and behave like a native mobile application that can be installed and run on mobile devices using the most straightforward method with the least abstraction.

To proceed, let us have a brief introduction to PWAs.

What are Progressive Web Apps?

Progressive Web Apps (PWAs) are web apps that use service workers, manifests, and other web-platform features combined with progressive enhancement to give users an experience on par with native apps.

In simple terms, they are basically websites styled like apps that can be run either inside a website browser or installed directly on a mobile device and accessed like a native app.

There are three key components of a PWA;

  1. Service Worker: The service worker transforms the website into an app by allowing it to download and cache files on a device.
  2. Web Manifest: This JSON file provides the basic meta-information about the app, such as the app icon, background color, etc.
  3. Secure HTTPS: HTTPS is mandatory and makes PWAs more secure than regular web apps.

PWAs have pros and cons. Among the former:

  • Cheap and Fast Development: PWAs are less expensive, quicker, and easier to create than native apps. Native app development from the ground up necessitates particular technologies for both platforms. HTML, CSS, and JavaScript are all that are required for a PWA.
  • Cross-Platform Availability: One of the promising advantages of PWAs is that they can be installed and run on multiple devices across various operating systems.
  • Offline Functionality: Having bad or no internet at all won’t stop users from using your app as it can cache data for offline viewing using service workers.
  • Performance: Compared to native mobile apps, PWAs are much lighter, don’t take as much memory space, and have a faster load time.

On the negative side:

  • High Battery Usage: Because PWAs are built-in high-level web code, phones have to work harder to read the code; they use more battery than native apps.
  • Mobile hardware access: PWAs cannot access various hardware features like the device’s Bluetooth, proximity sensors, etc.
  • Distribution Since PWAs are not distributed through the app store, you may miss out on users who mainly browse the app store.

You should consider using/building Progressive Web Apps if you meet the following criteria:

  • You don’t have the budget to build a full-fledged app.
  • You need to push to your target audience faster.
  • Having cross-platform compatibility is essential to your business.

We’ll be building a “Todo List” mobile app using HTML, CSS, and Javascript. We will first build out a web app while using IndexedDB for our database, workbox to make it work offline, and web manifest to make it installable across devices. The final result will be as follows:

Создайте приложение из сайта

Онлайн сервис, который конвертирует сайт в мобильное приложение для Android и iOS за 5 минут. Без рекламы и с PUSH рассылкой.

Более 12000 пользователей с 2019 года выбрали технологии Tadapp Native
  • React
  • Swift
  • OneSignal
  • Google Firebase
  • Java
  • Kotlin

Лучшая цена

Лучшая цена

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

Полностью онлайн

Полностью онлайн

Все приложения создаются самостоятельно в Личном кабинете без нашего участия. Вам не потребуются знания программирования

Сборка 24/7

Сборка 24/7

На сборку приложения требуется обычно не более 5 минут. Просто запустите процесс сборки приложения и мы отправим email, когда все будет готово

Все платформы

Все платформы

Один сайт — 2 приложения. Мы подготовим файлы для Android и Apple iOS. Подписанные приложения готовы для публикации во всех маркетах

Бесплатные PUSH

Бесплатные PUSH

Отправляйте своим пользователям PUSH рассылки прямо из Личного кабинета. Мгновенная доставка и бесплатно для любых объёмов

Брендирование

Брендирование

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

Своя подпись

Своя подпись

Подписывайте приложения собственным сертификатом разработчика или воспользуйтесь нашим (подпись Tadapp доступна для приложений Android)

Realtime обновление

Realtime обновление

Не нужно постоянно обновлять приложение — весь контент в приложении обновляется синхронно с контентом на вашем сайте

Поддержка

Поддержка

Не знаете с чего начать или есть проблемы с приложением? Мы всегда поможем — просто дайте нам знать через чат в Личном кабинете

Шаблоны приложений для Вашего сайта

Drawer

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

Navbar

Поверх вашего сайта на всех страницах располагается фиксированный блок с названием приложения, кнопкой «Поделиться», навигация (кнопки «Вперед и назад»). Подходит для большинства проектов

Blank

Ничего лишнего — только Ваш сайт.
Идеально подходит для HTML5 игр и для сайтов, у которых есть хорошая мобильная версия и 100% отзывчивость на мобильных устройствах

Простой и понятный интерфейс

Управление Все приложения в 1 аккаунте

Все приложения хранятся в одном аккаунте — легко изменить и начать рассылку

Создание Поэтапный процесс создания

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

Сборки Создавайте и обновляйте

Хотите добавить новую иконку? Создайте новую сборку и обновите приложение

Зачем конвертировать сайт в приложение?

Продвижение в поисковых сетях

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

Снижение расходов на рекламу сайта

Привлекайте мобильный трафик из маркетов — очень часто он в разы дешевле, чем обычный трафик.

Новый канал связи

Используйте PUSH рассылки вместо SMS рассылок. Это дешевле и привлекательнее для пользователя.

Легко протестировать перед сборкой

На сайте

Запустим Ваше приложение на реальном устройстве (Google Nexus или iPhone 7) и покажем результат онлайн прямо в Личном кабинете.

В приложении Expo Go

Скачайте приложение Expo Go, отсканируйте QR код вашего приложение и проверьте работу перед сборкой на своем устройстве.

Создайте сборку

Вы можете создавать неограниченное количество сборок приложения в поиске идеального дизайна — выбор за Вами!

Как превратить веб-сайт в мобильное приложение с помощью 7 строк JSON

В материале, перевод которого мы публикуем сегодня, речь пойдёт о создании мобильных приложений на базе существующих веб-проектов. Автор этой статьи демонстрирует инструменты, которые позволяют с минимальными усилиями разрабатывать приложения, пользующиеся нативными возможностями платформ iOS и Android и включающие в себя материалы работающих сайтов или локальные ресурсы. Его рассказ начинается с тех самых семи строк JSON-кода, которые позволяют превращать сайты в мобильные приложения.

image
Превращение веб-сайта в мобильное приложение

Обзор

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

Что, если я скажу вам, что для того, чтобы воспользоваться этим подходом, не нужно переделывать сайт, пользуясь неким фреймворком, приближающим внешний вид ресурса к виду мобильного приложения? Более того, что если весь процесс разработки заключается в подключении сайта к мобильному приложению, подобному показанному выше, с помощью обычного URL?

Кроме того, вот ещё один вопрос: «Можно ли, просто редактируя JSON, работать с нативными API, с компонентами пользовательского интерфейса, пользоваться системными переходами между страницами?».

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

Минимальное приложение

Обратите внимание на то, как я встроил в это приложение страницу с github.com, однако всё остальное — это нативные компоненты, вроде верхней навигационной панели и нижней панели управления. При этом переходы между страницами приложения используют системные возможности. Делается это автоматически и не требует вмешательства в код сайта.

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

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

Взглянем на пример, иллюстрирующий вышесказанное.

Приложение для создания QR-кодов

Вот основные составные части этого приложения:

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

И, наконец, обратите внимание на то, что тут показано и взаимодействие компонентов приложения. А именно, QR-код меняется после ввода новых данных. Делается это благодаря возможности вызова JavaScript-функции, расположенной внутри веб-приложения, которая отвечает за создание QR-кодов на основе переданных ей данных.

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

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

В этом материале я собираюсь рассказать о следующих вещах:

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

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

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

▍1. Использование технологий, созданных для веб

Для реализации некоторых частей приложений может иметь смысл использование веб-технологий. Например, WebSocket — это технология, изначально ориентированная на веб. Для её использования можно применить встроенный в мобильную платформу веб-движок ( WKWebView для iOS и WebView для Android) вместо установки сторонней библиотеки, которая попросту «эмулирует» WebSocket.

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

▍2. Уменьшение размеров пакета приложения

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

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

▍3. Решение проблемы отсутствия надёжных мобильных библиотек

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

▍4. Разработка проектов, использующих и возможности мобильных платформ, и веб-приложений

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

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

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

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

▍A. Jasonette

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

Фреймворк Jasonette похож на веб-браузер, но, вместо того, чтобы превращать HTML-код в веб-страницы, он преобразует JSON-разметку в нативные приложения для iOS и Android. Сходство с браузером заключается и в том, что любое приложение, основанное на Jasonette, имеет одинаковый базовый код, который занимается интерпретацией различных наборов JSON-данных в процессе формирования итогового приложения. Разработчику не нужно работать с кодом библиотеки. Процесс создания приложения заключается в подготовке его JSON-описания, которое позволяет Jasonette, в реальном времени, преобразовывать веб-страницы в нативные приложения.

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

▍B. Jasonette Web Container

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

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

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

▍C. Jasonette Web Container 2.0: взаимодействие приложения и контейнера

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

Реализация: интерактивный Web Container

▍1. Загрузка по URL

Задача

Ранее, в первой версии, для того, чтобы использовать веб-контейнер в виде компонента для просмотра данных, сначала нужно было записать «html» в атрибут $jason.body.background.type , а затем, в атрибут $jason.body.background.text , ввести HTML-код.

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

Решение

В Web Container 2.0 появился атрибут url . Он поддерживает, в частности, локальные файлы. Благодаря использованию конструкции file://. в контейнере можно вывести файл, который поставляется вместе с приложением.

Аналогично осуществляется и вывод веб-страниц из интернета (с помощью конструкции вида http[s]://… ).

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

Задача

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

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

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

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

До использования JSON-RPC Jasonette и веб-контейнер взаимодействовать не могли. После внедрения JSON-RPC стала возможна двусторонняя коммуникация основного приложения и контейнера

Для того чтобы получить возможность вызывать JS-функции, находящиеся в веб-контейнере, мы объявляем действие $agent.request .

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

Объект options — это и есть JSON-RPC-запрос, который будет отправлен веб-контейнеру.

Рассмотрим его атрибуты.

  • id : веб-контейнер построен поверх низкоуровневой архитектуры агентов (agent). Обычно с одним элементом view может быть ассоциировано несколько агентов, у каждого из них может быть уникальный идентификатор (ID). Однако веб-контейнер представляет собой особый тип агента, у которого может быть лишь идентификатор $webcontainer , именно поэтому мы используем в запросе данный идентификатор.
  • method : имя JavaScript-функции, которую нужно вызвать.
  • params : массив параметров, которые нужно передать вызываемой JS-функции.

Рассмотрим смысл приведённого здесь кода.

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

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

В ходе обращения к контейнеру будет осуществлён поиск функции login , которой, при вызове, благодаря params , будет передано два аргумента — «alice» и «1234» . Выглядеть это будет так:

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

Пример

Обсудим пример приложения для создания QR-кодов, которое вы уже видели выше.

Приложение для создания QR-кодов

    для ввода текста в нижней части окна на 100% нативен.
  1. QR-код генерируется веб-приложением, размещённым в веб-контейнере.
  2. Когда пользователь вводит некий текст в поле и нажимает кнопку Generate , осуществляется вызов действия $agent.request агента веб-контейнера, что приводит к вызову JS-функции qr .

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

Задача

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

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

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

Решение

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

Внедрение JS-кода в страницу, загруженную в веб-контейнер

▍4. Обработка переходов по URL

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

  1. В режиме «только чтение» веб-контейнер рассматривается как элемент только для чтения, при этом все события, такие, как касание или прокрутка, игнорируются. Все веб-контейнеры находятся в состоянии только для чтения до тех пор, пока их не переключат в режим обычного браузера, так, как описано ниже.
  2. В режиме «обычный браузер» веб-контейнер может взаимодействовать со страницей так, как будто мы работаем с обычным браузером. Включить этот режим можно, записав в атрибут action значение «type»: «$default» .
Задача

Проблема тут заключается в том, что оба рассмотренных выше варианта — это решения представляющие собой концепцию «всё или ничего».

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

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

Решение

Благодаря возможностям нового веб-контейнера можно задать в $jason.body.background атрибут action , который содержит описание механизма обработки щелчков по ссылкам.

Действие для обработки взаимодействий со ссылками

Тут мы прикрепили к веб-контейнеру действие «trigger»: «displayBanner» . Это означает, что когда пользователь щёлкает по любой ссылке, выводимой на странице, отображаемой в веб-контейнере, будет вызвано действие displayBanner . При этом сам веб-контейнер не будет обрабатывать щелчок по ссылке.

Кроме того, если проанализировать событие displayBanner , можно заметить переменную $jason . В данном случае ссылка, по которой был сделан щелчок, будет передана действию через эту переменную. Например, если щёлкнуть по ссылке, в которой содержится адрес «https://google.com» , в $jason попадёт следующее:

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

Рассмотрим ещё один пример, представляющий собой реализацию веб-браузера.

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

  1. Если URL содержит signin , открывается нативное окно для входа в систему.
  2. Если URL этой строки не содержит, выполняется действие, задаваемое параметром «type»: «$default» , в результате наша программа ведёт себя как обычный браузер.

Примеры

▍Разработка веб-браузера

Теперь мы можем воспользоваться возможностями нового элемента Web Container для разработки приложений. А именно, речь идёт о следующем:

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

Стандартное поведение браузера

Здесь веб-контейнер ведёт себя как обычный браузер ( «type»: «$default» ).

Поведение, основанное на анализе параметра $jason.url

Здесь при щелчке по ссылке применяется нативный переход между страницами.

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

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

Второй шаг заключается в выполнении в действии visit соответствующей операции, основанной на анализе $jason.url .

Ниже показано, как мы проверяем, содержатся ли в $jason.url строки newest , show , ask , и так далее (они представляют собой ссылки в верхнем меню). Если нечто подобное удаётся найти — мы позволяем веб-контейнеру вести себя как обычный браузер, задавая значение «type»: «$default» .

Если соответствия вышеописанному шаблону найти не удалось, мы производим нативный переход $href к новому окну, передавая URL, по которому щёлкнул пользователь, в виде параметра.

Здесь можно посмотреть полный JSON-код этого примера, который, кстати, занимает всего 48 строк.

▍Быстрая разработка «гибридного» приложения

Под «гибридными» приложениями обычно подразумевают обычные веб-приложения, «завёрнутые» в нативные мобильные приложения.

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

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

Гибридное приложение

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

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

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

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

Код этого примера можно найти здесь.

Итоги

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

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

  • Встраивание веб-контейнера в нативный макет.
  • Создание JavaScript-моста, позволяющего приложению вызывать функции из контейнера.
  • Создание системы обработки событий, благодаря которой контейнер может обращаться к основному приложению, вызывая нативные API.
  1. Декларативный язык разметки, который служит для описания того, как именно веб-контейнер должен быть встроен в нативное приложение.
  2. Коммуникационный протокол (JSON-RPC), который, крайне просто, позволяет организовать взаимодействие между родительским приложением и веб-контейнером.

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

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

Теперь мне хотелось бы сделать одно важное, на мой взгляд, замечание: «Большая сила — это большая ответственность». Возможности, которые обрёл проект Jasonette, огромны, поэтому, полагаю, разработчикам, пользующимся этим фреймворком, нужно помнить о балансе возможностей мобильных платформ и HTML, позволяющем создавать приложения, с которыми будет удобно и приятно работать.

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

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

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

Уважаемые читатели! Планируете ли вы использовать Jasonette для разработки кросс-платформенных мобильных приложений?

Convert your website into a native app

Enter your website URL to build a native iOS and Android mobile app and preview immediately in your browser.

Enter your website URL to build a native iOS and Android mobile app and preview immediately in your browser

GoNative has been used to build thousands of published apps.
Maintain one web codebase and save on development costs.
‍See more examples.

GoNative has been used to build thousands of published apps. Maintain one web codebase and save on mobile development costs.
‍See more examples.

Guaranteed Acceptance by the Apple App Store and Google Play Store

Powering thousands of apps

Clients of all sizes use the GoNative platform to build native iOS and Android apps using their existing web content

How to convert your website into a native app with GoNative

Build & Preview

Enter a URL and within seconds the GoNative online app builder will create a native app that displays your web content.

Preview your app instantly in our browser-based simulators or download to test on a physical device.

Develop & Customize

Add your own app icon and branding, then configure push notifications and other features to optimize your app.

Need help developing your app?
Our experienced team can develop your app on our platform based on your specific requirements.

Publish & Launch

Publish your app on the Apple App Store and/or the Google Play Store so users can find and download your app.

Need help publishing your app?
Our publishing team can manage the publishing process from end-to-end to get your app live.

Native plugin library

GoNative’s expansive library of plugins supercharge your app with access to native device hardware, functionality, and third-party services

All plugins interface with your website through the GoNative JavaScript Bridge

Extensive plug-in library

GoNative’s expansive library of plugins supercharge your app with access to native device hardware, functionality, and third-party services.

All plugins interface with your website through the GoNative Javascript Bridge.

Easily add powerful native features without writing native code

Access your app and the underlying mobile device directly from your website using the GoNative JavaScript Bridge, a powerful API embedded in your app.

//Invoke native “Share” menu
gonative . share . sharePage ()
//Keep device screen on without going to sleep
gonative . screen . keepScreenOn ()
//Hide the status bar
gonative . screen . fullScreen ()

//Set the top status bar
gonative . statusbar . set ( < 'color ' : ' #007aff ')
//Select a bottom tab bar item, if enabled
gonative . tabs . select ( 1 )
//Prompt ATT consent on iOS 14.5 and later
gonative . ios . attconsent . request ()

//Get user’s contacts from address
gonative . contacts . getAll ()
//Start a native Twilio video call
gonative . twilio . video . join ()
//Log an event to Google Analytics
gonative . firebaseAnalytics . event . logEvent ()

//Invoke native “Share” menu
gonative . share . sharePage ( 'https://www.apple.com' )
//Keep device screen on without going to sleep
gonative . screen . keepScreenOn ()
//Hide the status bar
gonative . screen . fullScreen ()

//Set the top status bar
gonative . statusbar . set (< 'color ' : ' #007aff ', ' overlay ' : true >)
//Select a bottom tab bar item, if enabled
gonative . tabs . select ( 1 )
//Launch the ATT consent prompt on iOS 14.5 and later
gonative . ios . attconsent . request ()

//Get user’s contacts from address book
gonative . contacts . getAll ()
//Start a Twilio video call using the native SDK
gonative . twilio . video . join ()
//Log an event to Google Analytics
gonative . firebaseAnalytics . event . logEvent ()

Demo Apps

Explore our demo apps to experience the power and flexibility of GoNative
These apps run on real simulator devices in the cloud and stream to your browser

iOS apps can be configured with native navigation menus that follow Apple Design Guidelines

Android

Android apps can be configured with native navigation menus built using Google Material Design Components

Resources

Explore the GoNative platform and learn how to leverage your existing website to build powerful full-featured native iOS and Android mobile apps

Push Notifications

Native Plugin Library

Plugin Library

GoNative Documentation

GoNative makes it easy to add to add enterprise-class push notifications to your native app with full support for many leading providers including OneSignal.

Native plugins provide your website complete access to device hardware and functionality through the GoNative JavaScript Bridge.

Our documentation includes information and examples to help you build all types of apps, from basic web-to-app conversions to the most advanced.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *