Веб приложения

Совсем недавно наткнулся на pwa приложения. На удивление они легко создаются и устанавливаются на ios, android и даже windows. Если говорить просто pwa — это ваш веб сайт, который ведет себя как обычное приложение в телефоне. Но обо всем по порядку.

Преимущества pwa приложений:

  • Легкость создания
  • Кроссплатформенность — достаточно сделать один код, который будет работать сразу на несколько платформах.
  • Лучший рейтинг в Google
  • Кэширование ресурсов (картинки, css, js) — соответственно, быстрая загрузка
  • И самое главное pwa приложения могут работать при отсутствии интернета

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

Как установить pwa приложение в Android?

Если на сайте все правильно настроено, то при открытии сайта, автоматически появится уведомление — Добавить на рабочий стол? Когда юзер нажмет да, появится ярлычек на страницу вашего сайта. Все, на этом приложение установлено!

Как установить pwa приложение в IOS?

К сожалению, у меня нет iphone (или к счастью 🙂 ), поэтому тестировал у знакомых. Вот, что я выяснил — официально pwa на ios работает с версии 11.7. Уведомление, добавить на экран не появляется. Нужно в сафари нажать поделиться и выбрать На экран «Домой» или подобное. В общем-то так можно сделать с любым сайтом на сафари, но при нажатии на иконку от pwa открывается pwa приложение, которое работает без интернета и навигации браузера.

Как установить pwa приложение в Chrome браузере?

Для этого надо открыть сайт с pwa (подождите, чтобы он сначала полностью загрузился), нажать кнопку Настройки (три точки) и выбрать Установка приложения «Название». Оно сразу установится и откроется.

Автоматически оно продублируется в Пуск > Приложения Chrome > «Название». Оттуда его можно запустить, создать ярлык на рабочий стол или удалить. Также вы можете управлять всеми приложениями из браузера Chrome по адресу: chrome://apps/

А теперь самое интересное — во второй части мы начнем создавать собственное pwa приложение, которое будет тестировать и устанавливать.

Основы функционирования веб-приложений

Как работают веб-приложения

Цель лекции: сформировать концептуальное представление о функционировании веб-приложений.

Веб-приложения – это специальный вид приложений, которые работают в глобальной сети Интернет по протоколу HTTP (см. «Введение в платформу .NET Framework и ASP.NET» ). Как правило, веб-приложения не требуют установки дополнительного программного обеспечения на стороне клиента, а вся логика, в основном, выполняется на стороне сервера. Для отображения пользовательского интерфейса используется браузер – программа, способная распозновать язык разметки HTML (и сопутствующие технологии – таблицы стилей CSS, клиентский скриптовой язык программирования JavaScript и т.д.). Браузер обычно принято называть «тонким клиентом», т.е. клиентом, который содержит минимальное количество бизнес-логики.

Давайте разберемся в том, как функционирует любое веб-приложение. Необходимые компоненты для работы пользователя с веб-приложением – браузер (тонкий клиент), веб-сервер (серверная часть), протокол взаимодействия клиента и сервера (HTTP) и язык разметки для создания документов (HTML). Основу функционирования веб-сервера и протокола HTTP мы подробнее рассмотрим в следующих лекциях, а пока остановимся на концептуальном представлении. Для того, чтобы веб-приложение стало доступно, его необходимо разместить в рамках веб-сервера (специальная программа, которая обрабатывает запросы из сети). После этого приложение получит свой уникальный адрес в рамках протокола HTTP (например, http://www.myapplication.com/page1.html). Используя этот адрес пользователь может обратиться к приложению. Для этого он должен запустить браузер (клиентское приложение) и ввести в адресной строке адрес приложения. В этот момент браузер сгенерирует запрос к серверу и отправит его, используя протокол HTTP. В момент, когда сервер примет этот запрос, он сможет распознать, что именно требуется от него на основе полученного запроса. Используя эти данные он сгенерирует ответ и отправит его обратно клиенту также используя протокол HTTP. Обычно ответ содержит гипертекстовую разметку HTML, содержащую структуру документа, который передается пользователю. После того, как браузер получит ответ в виде HTML-документа, он немедленно отобразит его пользователю. Таким образом, было совершено взаимодействие клиента и сервера. Зачастую документ HTML содержит ссылки на изображение, другие медиа-файлы, таблицы стилей или клиентские сценарии. В этом случае браузер генерирует еще несколько аналогичных запросов к веб-серверу. Однако, в этом случае веб-сервер передает клиенту уже не HTML-документ, а соответствующие запрашиваемые ресурсы (изображения, таблицы стилей, клиентские сценарии и т.д.).

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

Как уже говорилось ранее, для взаимодействия клиента и сервера используется протокол HTTP (который более детально будет рассмотрен в последующих лекциях). Сейчас важно понять, что этот протокол работает по схеме «запрос-ответ». В момент, когда клиент хочет обратиться к серверу, он генерирует запрос, который отправляется серверу. Сервер обрабатывает этот запрос и подготавливает ресурсы, которые будут отправлены клиенту. После этого сервер генерирует ответ, в котором содержатся все необходимые данные и отправляет клиенту. Работа веб-приложений заключается в формировании необходимых данных как раз в момент подготовки ресурсов на сервере. Обычно в этот момент запускается некоторый программный код, который содержит определенную бизнес логику. Схему работы типичного веб-приложения схематически можно представить следующим образом (зеленым цветом обозначены действия, которые выполняются на клиентской стороне, а синие – на серверной).

Веб-приложения существенно отличаются от настольных приложений. Последние запускаются на компьютере клиента и выполняют свой код именно там. Поэтому настольные приложения зачастую обладают более богатым и отзывчивым пользовательским интерфейсом и позволяют реализовывать более богатые сценарии. По сравнению с настольными приложениями, веб-приложения обладают более ограниченными возможностями по формированию пользовательского интерфейса и клиентской функциональности. По этой причине за последнее время сложился стереотип о том, что серьезные приложения (например, бизнес-приложения) – это, как правило, настольные приложения. Однако, развитие веб-технологий доказало, что веб-приложения также могут реализовывать богатые сценарии и успешно конкурировать с настольными приложениями. Кроме того, за последние несколько лет очень активно развиваются технологии, позволяющие сделать веб-приложения еще более интерактивными. К ним относятся технология AJAX (будет рассмотрена в рамках курса), которая на основе клиентских сценариев JavaScript может сделать взаимодействие более интерактивным. Также существует ряд технологий, которые добавляют интерактивности приложению за счет внедрения в браузер специальных модулей (плагинов), которые могут отображать специальные типы файлов с более богатыми возможностями. К таким технологиям в первую очередь относятся технологии Silverlight и Flash.

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

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

Оба этих фактора существенно влияют на процесс разработки веб-приложений. Из-за этого при построении любого веб-приложения приходится решать типичные задачи – способы хранения информации о пользователе, организация сеансов работы пользователя, способы переходов от страницы к странице, механизмы оптимизации эффективности (например, кэширование) и др. При реализации каждого веб-приложения разработчику придется столкнуться с этими проблемами и решить их. Поскольку набор этих задач является достаточно стандартным и одинаково решается для большинства веб-приложений, то его реализация вынесена в отдельные технологии, которые называются технологиями для разработки веб-приложений. К таким технологиям относятся технология Microsoft ASP.NET, PHP, Ruby on Rails и др. В них, фактически, содержатся все компоненты, необходимые для реализации веб-приложений и учитывающие их специфику. Далее в рамках данного курса мы будем рассматривать разработку веб-приложений с позиции платформы Microsoft ASP.NET.

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

Краткие итоги

Веб-приложения работают на сервере и исполняются в рамках веб-сервера (специальной программы, обрабатывающей запросы). Взаимодействие клиента и сервера осуществляется про протоколу HTTP в рамках схемы «запрос-ответ». Вся логика веб-приложения размещается на сервере. Из-за этого появляются дополнительные проблемы при разработке веб-приложений. Настольные приложения имеют более богатый пользовательский интерфейс, но веб-приложения легче разворачивать и обновлять (особенно, если имеется большое количество рабочих мест). Пользовательский интерфейс веб-приложений может стать более интерактивным, если использовать дополнительные инструменты – клиентские сценарии JavaScript, а также приложения Silverlight, Flash и др.

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

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