Веб-приложения: привнесение преимуществ нативных приложений в веб-браузер

  1. Корпоративные приложения
  2. Последствия для адаптивной сети v адаптивная сеть v отдельные URL

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

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

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

Это стимулирует компании к разработке веб-приложений, иногда в качестве альтернативы, иногда в дополнение к нативным приложениям, в том числе к критически важным приложениям, таким как новое мультиплатформенное торговое приложение Saxo Bank (подробности см. Ниже).

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

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

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

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

Типичными примерами веб-приложений являются Gmail, Paypal, Basecamp, Quartz и Financial Times. Две вещи позволили достичь совершеннолетия мобильного веб-приложения:

  1. Комбинируя HTML5 (последнюю версию вездесущего языка веб-программирования), CSS3 (каскадные таблицы стилей, управляющие форматом веб-сайта) и интерактивность JavaScript, веб-разработчики могут копировать дружественные для мобильных устройств сенсорные оптимизированный интерфейс и навигация и погружение, интерактивный Пользовательский опыт Впервые разработчики родных приложений.
  2. Постепенное внедрение API браузеров (интерфейсов прикладных программ) - они позволяют веб-сайтам взаимодействовать с функциями устройства или датчиками, включая GPS, акселерометр, детектор внешней освещенности, микрофон, камеру, термометр и т. Д. Это также предоставляет множество возможностей, которые разработчики люблю родные приложения, такие как доступ к местоположению устройства, работа в автономном режиме и (потенциально) отправка push-уведомлений. W3C (орган по веб-стандартам) отвечает за создание этих стандартов, которые затем внедряются компаниями-браузерами - например, Firefox, Opera, Chrome (Google), Safari (Apple) - мы используем на наших различных устройствах для доступа в Интернет Скорость, с которой происходит этот процесс, варьируется от возможностей к возможностям и от браузера к браузеру. Текущее состояние игры изложено в этом Дорожная карта W3C (Внимание: это довольно технично).

Даниэль Аппельквист Сопредседатель Группы технической архитектуры W3C объясняет:

Многие из этих [функций] можно использовать уже в Chrome для Android и настольных ПК, Android Browser, Opera, Firefox, и большинство из них появятся в Edge [новый браузер Microsoft], согласно опубликованной дорожной карте.

Apple Safari - отстающий, побуждающий людей такие как Нолан Лоусон «Safari - это новый IE. Поскольку Safari не опубликовал дорожную карту для принятия этих новых функций и поскольку это единственный браузер, который вы можете использовать на устройствах IOS, это ограничивает универсальное принятие. Я надеюсь, что мы скоро увидим реализацию Service Worker в Safari, особенно с учетом того, что поверх Service Worker построено больше новых веб-функций.

По словам Аппельквиста, некоторые из наиболее заметных нововведений в области веб-приложений и статус по состоянию на декабрь 2015 года:

  • Место нахождения. GeoLocation информирует веб-сайт о текущем местоположении пользователя и доступен в любом браузере - фактически Safari был первым, кто отправил этот браузер. Даже у IE есть геолокация.
  • Работаю в автономном режиме. Сервисный работник включает новое поколение автономных веб-приложений (что позволяет им продолжать работать при сбое сетевого подключения) в текущих версиях Chrome, Opera, Android Browser и Chrome для Android; и находится в Firefox, но еще не выпущен.
  • Камера. GetUserMedia разрешает доступ к камере, например, для потокового видео или вызова WebRTC ( Связь в реальном времени ). Вы можете использовать его на Edge, Firefox, Chrome, Opera, Android Browser и Chrome для Android.
  • Push-уведомления - The Спецификации push-уведомлений W3C завершены, и функция доступна в Firefox, Chrome и Opera и «в стадии рассмотрения» в Edge , Это позволяет издателю отправлять на устройство пользователя веб-приложения уведомление о том, используется ли веб-приложение. W3C Push требует Service Worker, поэтому любой браузер, в котором не реализован сервисный работник, не сможет его реализовать.
  • Аудио. API веб-аудио Еще одна новая функция, которая позволяет веб-разработчикам делать сложные вещи со звуком, что особенно важно для игр. Это широко распространено.
  • Полноэкранный. полный API позволяет браузеру захватить весь экран устройства. Принятие немного более спорадично, так как IOS Safari и Android Browser отстают от других браузеров.

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

Корпоративные приложения

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

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

Гораздо важнее мобильные приложения, которые используются в деловом мире для предоставления работникам, клиентам, поставщикам, дистрибьюторам и т. Д. Мобильного доступа в реальном времени к «реальным» приложениям, которые запускают предприятия - часто называемые корпоративными (мобильными) приложениями. Это где готовность веб-приложений действительно проверяется.

Примеры компаний, которые используют корпоративные мобильные приложения, включают Citibank, MasterCard и Fidelity Investments, по словам Гаутама Агравала, старшего директора по управлению продуктами в Sencha (инструмент разработки веб-приложений).

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

У Saxo Bank есть клиенты в 180 странах, которые совершают 170 000 сделок в день, совершая 1400 сделок в секунду в часы пиковой нагрузки.

Среднее количество одновременных пользователей торговых систем составляет 15 000. Целиком SaxoTraderGO Торговая платформа, запущенная в мае 2015 года, является веб-ориентированной, написана на HTML5 с использованием стандартизированных Открытые API что позволяет корпоративным клиентам легко интегрировать его в свои собственные приложения для настольных и мобильных приложений, а розничные клиенты могут получить доступ к системе с помощью приложения на основе браузера на настольном компьютере, планшете или смартфоне.

Бенни Бой Йохансен Старший директор и корпоративный архитектор Saxo Bank сказал ClickZ:

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

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

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

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

Важно помнить, что это приложение: HTML5, CSS и JavaScript изначально загружаются на мобильное устройство, и с этого момента этот код подключается к нашим API точно так же, как это делает нативное мобильное приложение.

Мы также широко используем потоковую передачу данных. Когда приложение связывается с нашими серверами, скажем, для получения списка позиций клиентов, мы сначала отправляем снимок всех данных, связанных с этими позициями; с тех пор мы открываем соединение WebSocket и просто передаем любые значения дельты [изменения цены].

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

Saxo Bank не совсем обошелся без загрузки приложений. Для клиентов, которые предпочитают загружать приложение, а не использовать браузер, существует приложение для iOS или Android. Но это то же самое браузерное приложение с «очень тонкой» нативной оболочкой.

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

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

Последствия для адаптивной сети v адаптивная сеть v отдельные URL

В мобильной разработке есть только один аргумент, который более политический, чем native v web, и какой тип веб-разработки лучше.

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

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

Таким образом, смартфон Android с более продвинутым браузером, например Chrome, Android или Firefox, может получить более сложный Пользовательский опыт (UE), используя описанные выше функции приложения, в то время как пользователь iPhone получает меньшее UE, которое предоставляет Safari. Все смартфоны получат немного другое UE от настольного компьютера, планшета или обычного телефона.

Даниэль Аппельквист:

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

Например, веб-приложение, которое хочет обеспечить автономную поддержку через Service Worker [см. Выше] для смартфонов Android, будет работать только на iPhone в Интернете или может использовать более старую версию. AppCache технология в HTML5 (поддерживается в Safari для IOS) для обеспечения менее сложного уровня автономной поддержки.

Есть три ключевых методологии , Это:

  • Адаптивный дизайн.
  • Адаптивный дизайн (или динамическая подача).
  • Отдельные (или выделенные) сайты.

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

Основные различия заключаются в следующем:

  • Адаптивный веб-дизайн (RWD ) создает единый веб-сайт, который переформатирует контент в соответствии с устройством, используя предопределенные каскадные таблицы стилей (CSS). Весь сайт отправляется на принимающее устройство, но отображается только соответствующий материал - это может привести к задержке по сравнению с более медленными мобильными соединениями. Дизайн должен быть «мобильным в первую очередь», сенсорным, без Flash-контента, но реагирующий предполагает, что пользователи хотят широко похожий контент.
  • Адаптивный веб-дизайн (AWD) создает несколько различных веб-сайтов - или шаблонов - для каждого типа устройства; все размещены на одном URL. Когда пользователь щелкает / нажимает, сайт обнаруживает устройство и отправляет соответствующую страницу. Разные сайты, будь то по одному или нескольким URL-адресам, дают больше возможностей для адаптации сайта к другому пользовательскому контексту, то есть пользователям настольных компьютеров, что разные вещи для мобильных пользователей, например полезность, непосредственность, местоположение, нажмите, чтобы позвонить и т. д.
  • Отдельные URL-адреса - это разные веб-сайты, размещенные на разных доменах , чаще всего это поддомен, например, m.domain.com. Обнаружение устройств используется для перенаправления устройств на наиболее подходящий сайт. Это может быть вариантом по умолчанию для многих предприятий, поскольку это означает, что мобильное присутствие может быть введено без необходимости капитального ремонта сайта ПК. Например, посетите веб-сайт Financial Times: FT.com и веб-приложение: app.FT.com.

com

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

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

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

Йохансен объясняет:

Мы решили немного пойти на компромисс в отношении адаптивного дизайна. В SaxoTrader мы используем начальное обнаружение устройства на стороне сервера, чтобы направить пользователя к одному из трех URL. Эти три URL-адреса обслуживают три разных макета (HTML / CSS), но основная логика приложения - JavaScript - одинакова.

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

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

Это четвертая часть серии мобильных веб-сайтов о ДНК ClickZ. Вот другие:

  1. Шесть мобильных стратегий вопрос s
  2. Как определить свою мобильную аудиторию
  3. Приоритет для мобильных веб-сайтов

Похожие

Чтение локальных файлов с помощью File API
... v-s-pomosu-file-api-1.svg" alt="Узнайте, как использовать локальную файловую систему для создания приложений, которые лучше работают в автономном режиме Джон Аллсоп будет обсуждать будущее Интернета и как вы можете подготовиться к нему в своем выступлении, Предскажи будущее этим странным старым трюком , в Генерировать Сидней 5 сентября"> Узнайте, как использовать локальную файловую систему для создания приложений, которые лучше работают в автономном режиме Джон
Руководство по настройке виртуального коммутатора Hyper-V
Физический (и умственный!) Процесс перехода от унаследованного к виртуальному иногда может быть трудной работой для администратора, поскольку термины и функции виртуальной сферы иногда отличаются от того, что было изучено ранее. Для тех из вас, кто узнает о многих аспектах виртуализации и Hyper-V, , мы продолжим публиковать полезные посты, в которых объясняются различные функции Hyper-V. Сегодня я хочу рассказать
Новости, советы и рекомендации для технических специалистов
Форма Google - отличный способ собрать информацию, касающуюся встреч или конференций. Энди Вольбер объясняет, как заставить это работать на вас. Формы Google предоставляют быстрый способ создания онлайн-опроса, ответы на который собираются в электронной таблице.
Лучшие 12 приложений для взлома пароля WiFi на Android
... для взлома пароля WiFi! Ссылка для скачивания Google Play: https://play.google.com/store/apps/details?id=com.prankapps.wifipasswordhacker Описание: Это один из лучших хакеров паролей WiFi, свободно доступных для скачивания в Google Play. Это в основном забавное приложение, которое со стороны пользователя может гордо отображать пароль сети Wi-Fi для друзей и семьи. На платформе
4 лучших приложения для правильной защиты вашего iPhone в 2018 году
... сети и поставщики аналитики. ExpressVPN предоставил 1Blocker верхнюю позицию благодаря большому количеству опций настройки, которые позволяют вам выбрать конкретный контент, который вы можете запретить с вашей стороны. Второе место: усовершенствовать
Изображения с высоким разрешением для переменной плотности пикселей
... vysokim-razreseniem-dla-peremennoj-plotnosti-pikselej-1.png"> Вступление Одной из особенностей современного сложного устройства является то, что очень широкий диапазон плотностей пикселей экрана имеется в наличии. Некоторые устройства оснащены дисплеями с очень высоким разрешением, а другие отстают. Разработчики приложений должны поддерживать диапазон плотности пикселей, который может быть довольно
Тестирование SmartWatch, советы по покупке, сравнение SmartWatch
Последние умные часы в тесте * обновлено 27.05.2009 в 19:14 * обновлено 27.05.2009 в 19:59 * обновлено 27.05.2009 в 20:19 * обновлено 27.05.2009 в 18:03 * обновлено 27.05.2009 в 18:03 * обновлено 27.05.2009 в 18:12 * обновлено 27.05.2009 в 18:43 * обновлено 27.05.2009 в 18:45 Smartwatches 2017 Какие умные часы будут выпущены в этом году? Что мы знаем о моделях до сих пор? Мы даем
Com/store/apps/details?
В 18:45 Smartwatches 2017 Какие умные часы будут выпущены в этом году?
Что мы знаем о моделях до сих пор?