Часть 1. web-сайт или web-приложение?

Ограничения по сравнению с нативными приложениями iOS

• Приложение может хранить локальные данные и файлы только до 50 Мб
• Если пользователь не использует приложение в течение нескольких недель, iOS очистит все данные. Значок будет по-прежнему находиться на главном экране, и при новом запуске приложение будет загружено снова
• Нет доступа к некоторым функциям, таким как Bluetooth, последовательный порт, маяки, сенсорный идентификатор, идентификатор лица, ARKit, датчик высотомера, информация о батарее
• Нет доступа к исполнению кода в фоновом режиме
• Отсутствие доступа к частной информации (контакты, background location), а также отсутствие доступа к нативным социальным приложениям
• Нет доступа к In App Payments (встроенные платежи) и многим другим сервисам Apple
• На iPad нет доступа к работе с Side или Split Views, PWA всегда будут использовать полный экран
• Нет Push-уведомлений, нет бейджа или интеграция Siri

Даже если у вас установлена ​​PWA с иконкой и названием Tinder, Siri не сможет ее найти

Перемешиваем информацию и взаимодействия

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

С другой стороны, большинство информационных сайтов в определенный момент должны позволить пользователю что-то нажать или поискать. Представьте, если бы вся информация Википедии хранилась на одной странице! И даже в этом случае, пользователь должен прокручивать страницу; а это тоже является взаимодействием. Все сайты являются гибридами. На большинстве сайтов нет подавляющего перевеса одной из этих сторон, например, 90% информации и только 10% интерактивности (или наоборот). На большинстве сайтов это соотношение составляет примерно 75/25. Вам нужно будет принять решение о количестве информации на вашем интерактивном сайте, либо о количестве взаимодействий на вашем информационном сайте. Конечно же, это должны быть хорошие решения.

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

Создавать гибриды гораздо сложнее

Суть проблемы в следующем: как бы хорошо вы ни создавали интерактивные взаимодействия, вам также нужно хорошо проектировать информацию. Если вы лучше всех проектируете информацию, вам все равно нужно научиться создавать интерактивные взаимодействия. Нелегко одновременно делать хорошо и то, и другое. Большинство людей хорошо разбираются в чем-то одном, вследствие чего их сайты выделяются тем, в чем они сильны. Странность и ирония здесь в том, что если сайт действительно хорош в чем-то одном (интерактивности
или информации), то, как правило, другая сторона в нем проработана плохо. Конечно же, целью является делать и то и другое хорошо, чтобы получить очень сильный сайт или приложение.

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

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

И, наконец, нужно упражняться и укреплять свои слабые места. Если вы проводите дни, работая над сайтами, заполненными информацией, поищите, где на сайте вы могли бы добавить немного интерактивности. Создайте с помощью JavaScript или jQuery сворачиваемые области. Расширьте свой информационный сайт, чтобы на нем соотношение между информацией и интерактивностью составляло 60/40. Также верно и обратное. Ищите способы увеличить количество информации на своем интерактивном сайте. Создайте боковые панели с информацией, появляющиеся в нужное время, на которых будет выведено больше информации, чем вы обычно предоставляете. Укрепляйте свои слабые места.

Как написать приложение?

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

Глобальное приложение — просто скрипт который получает DOM Node и вставляет в него приложение
Приложение-веб компонент — приложение загружается как скипт и создает Custom Element, в который завернуто все остальное, позволяет добиться более хорошей изоляции от хоста благодаря Shadow DOM и Shadow CSS
Приложения IFrame Apps — для дополнительной изоляции и безопасности, когда хост не может полностью доверять приложению и показывать его в той же среде, что и он сам

Глобальные приложения

Допустим мы хотим внедрить приложение на React. С поддержкой Module Federation, точка входа будет выглядеть как просто функции, принимающей DOM Node и рисующей в ней приложение:

И все.

Мы плотно работали с авторами Module Federation (спасибо Zack Jackson) чтобы интеграция была максимально легкой.

Можно добавить , тогда можно пробросить изменения динамически в Реакт приложение в качестве props.

Если на хосте нет поддержки Module Federation, не беда, есть выход через простой JSONP-вызов:

Приложения на Web Component

Другой способ внедрить приложение — завернуть его в Web Component для лучшей изоляции CSS стилей посредством Shadow DOM и Shadow CSS:

Поскольку на изменения attributes можно подписаться, их можно пробросить в Реакт приложение.

Приложения IFrame

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

А что насчет общих библиотек?

Очевидно, как только у каждого приложения появляется свой билд-процесс, то все общие зависимости вроде react or react-dom начинают дублироваться. Иногда на это можно закрыть глаза, но иногда это проблема. Можно, конечно, обойтись externals, и другими трюками, но, к счастью, есть и более хорошее решение: Webpack 5 Module Federation.

Фреймворк Web Apps поддерживает Module Federation из коробки, и позволяет иметь общие зависимости между хостом и приложеиями, равно как и между приложениями (чего невозможно добиться стандартными костылями). Фреймворк и так довольно минималистичен, а федерация позволяет оптимизировать все еще больше. Module Federation также умеет автоматически догружать зависимости если хост не может их предоставить, грузить нужные версии. Настраивается все абсолютно стандартно:

Вот и все, теперь хост и приложение могут иметь общие зависимости, чисто и прозрачно.

Что нужно иметь в виду

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

Проблема с тем же белым экраном возникает и на iPad

• PWA в истории не имеют скриншотов, поэтому все они выглядят как белые экраны, к сожалению
• Есть ошибки, когда приложение работает в автономном режиме. Не полагайтесь на Safari для тестирования.

Попытка Nasa использовать область надреза для PWA дает некоторые сбои UX

• Если вы хотите использовать область поиска iPhone X для своего приложения, вам нужно внести некоторые изменения в HTML и CSS. Если вы не сделаете это правильно, могут возникнуть странные вещи
• Иногда вы добавляете на главный экран, но манифест не используется, поэтому устанавливается только ярлык ️.

Карты Google, рекламируют Starbucks? Нет, это просто iOS после того, как вы используете открытые PWA в строке; это создает странное поведение, одно приложение загружает неправильный URL

• Safari и ярлык на главном экране используют одну и ту же регистрацию Service Worker (но не экземпляр) и кешированные файлы. Safari View Controller (например, браузер In-App в Twitter) поддерживает Service Workers и кеш, но кажется, что он удаляет все данные после закрытия сеанса.
• Каждый псевдо-браузер, такой как Chrome или Firefox и каждое приложение, использующее WebView, например браузер Facebook In-App, не поддерживает Service Workers (он работал во время бета-тестирования), поэтому файлы не будут установлены. Я предполагаю, что для WKWebView может понадобиться API, чтобы позволить владельцу приложения решить, что делать с Service Workers, но … кто знает.

Используя Safari TP, вы можете отлаживать клиент и сервер (только догадываясь, какой из них), как в Safari, так и в «Web» (PWA на главном экране).

Чтобы отладить Service Worker в iOS, вам необходимо установить Safari Technology Preview или Safari 11.1, доступную с обновлениями macOS 10.11.5, 10.12.6 и 10.13.4.

Инспектор Service Workers по-прежнему является экспериментальным; например, нет поддержки для просмотра содержимого кэш-памяти

Service Workers могут быть отключены в «Настройках» в разделе «Экспериментальные технологии» (по умолчанию она включена)

Что это за пустое приложение?

Иногда, когда вы открываете много PWA одновременно, панель задач iOS сходит с ума, демонстрируя приложения «призраки» без значка или названия в истории

Запускаем приложение

Для запуска приложения нужно проделать следующие шаги:

1. Для начала нам понадобится Git (убедитесь, что скачиваете подходящую версию), Maven и контейнер сервлета (например, Apache Tomcat, Jetty, или JBoss Wildfly). Если что-то из этого уже включено в вашу IDE, то вы можете использовать встроенный вариант.
2. Используйте Git, чтобы клонировать репозиторий приложения, и импортируйте его в вашу IDE, желательно как проект Maven.
3. Разверните проект в контейнере сервлета и запустите его. Развёртывание подразумевает создание WAR-файла или exploded WAR и его помещение в папку развёртывания контейнера по умолчанию. Зачастую IDE способна сделать развёртывание за вас, поэтому не перегружайте себя лишней работой и посмотрите документацию вашей IDE (документация для IntelliJ IDEA). Когда вы развернёте проект и запустите его, должен запуститься бразуер по умолчанию с окном регистрации.
4. Попробуйте заполнить не все поля в форме или вовсе не заполнить их и вы увидите, как поверх соответствующих полей отобразятся ошибки. Введите всё как положено, и вас перенаправит на страницу приветствия.

Облачные IDE

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

Cloud9

После нескольких минут работы в Cloud9 создаётся впечатление, что попал в рай для программистов. Интерфейс написан на JavaScript, а серверная часть — на NodeJS. Хотя Cloud9 облюбовали разработчики и дизайнеры интерфейсов, поддерживается подсветка синтаксиса C#, C++, Python, Perl, Ruby, Scala и некоторых других языков.

Встроенный режим Vim — приятный штрих, как и поддержка популярных систем контроля версий вроде Git, Mercurial и SVN. Благодаря наличию CSSLint и JSBeautify это одна из красивейших сред разработки.

Система платная, но есть бесплатный тарифный план.

Codeanywhere

Ещё один инструмент для создания приложений, который часто возглавляет списки лучших — Codeanywhere. Эта дружественная облачная IDE поддерживает подсветку кода HTML, CSS, JavaScript, PHP, MySQL и других языков. Благодаря наличию приложений для iOS, Android и BlackBerry, с помощью Codeanywhere программисты работают где угодно.

Кроме того, Codeanywhere поддерживает Dropbox и SFTP, которые помогают легко создавать резервные копии файлов проекта и обмениваться ими с коллегами. Это не самая полнофункциональная среда, но свою работу выполняет на отлично.

Система платная, но есть бесплатный тарифный план.

Eclipse Che

Eclipse Che — облачное рабочее пространство разработчика и встроенная IDE. Che предоставляет удалённую платформу с открытым исходным кодом для многопользовательского создания приложений.

Основные возможности:

• рабочие пространства, включающие среды выполнения и IDE,
• сервер рабочих мест с RESTful веб-сервисами,
• облачная IDE,
• плагины для языков, платформы и инструменты,
• SDK для создания плагинов и сборок.

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

Многопользовательская предоставляет мультиарендность. Учётные записи пользователей и рабочие места изолированы, а для регистрации, управления и аутентификации используется механизм KeyCloak. Permissions API регламентируют доступ к объектам вроде пространств, стеков и организаций. Сведения о пользователях хранятся в базе данных, поддерживающей миграцию (PostgreSQL).

Neutron Drive

Создание универсальной облачной среды IDE с нуля — серьёзная задача, поэтому разработчики предпочитают создавать проекты на базе готовых решений с открытым исходным кодом. Neutron IDE основан на редакторе Ace code editor и объединяет функции SFTP-клиентов и браузерных редакторов, позволяя программистам редактировать на лету файлы на своих серверах из любой точки мира.

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

Orion

Популярная среда Eclipse Java IDE — надёжная опора в мире разработки уже много лет. Orion — следующий шаг, в котором опыт Eclipse перенесли в облако. Пока больше применяется для front-end, поэтому среда ограничена по большей части HTML и JavaScript, но работа идёт, и функции добавляются. Помимо поддержки Firebug, огромный плюс — интуитивно понятный интерфейс в стиле Eclipse.

Идентифицируемое

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

Web Manifest это привычный JSON файл с руководствами:

manifest.json

{
  "name": "Progressive Web App: PhotoBooth",
  "short_name": "PhotoBooth",
  "description": "Simple Progressive Web App for taking selfies.",
  "icons": [{
      "src": "assets/icons/ic-face.png",
      "type": "image/png",
      "sizes": "72x72"
    }, {
      "src": "assets/icons/ic-face-large.png",
      "type": "image/png",
      "sizes": "144x144 256x256" 
    }],
  "start_url": "index.html",
  "display": "standalone",
  "background_color": "#fff",
  "theme_color": "#fff",
  "orientation": "portrait"
}

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

• Shortname – название нашего приложение, которое будет показано снизу ярлычка.

• Icons – массив иконок с разными размерами

• Display – определяет каким образом будет запускаться приложение. Мы выбрали standalone, чтобы запустить приложение без вспомогательной навигации и всяких меню браузера. Также приложение будет показано как отдельное в свернутой панели задач.

Чтобы зарегистрировать манифест, нам нужно всего лишь сослаться на него из HTML

<!-- Web Manifest -->
<link rel="manifest" href="manifest.json">

Safari все еще не поддерживает web manifest, но мы можем добавить специальный мета тег, чтобы определял поведение приложения.

<!-- Meta tag for app-like behaviour in iOS -->
<meta name=”apple-mobile-web-app-capable” content=”yes”>

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

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

1. Service worker

Работник службы – это код JavaScript, который выполняется в фоновом режиме PWA. Их основное назначение – предварительная кэширование ресурсов, поэтому веб-приложение загружается быстро и может даже иметь автономные функции. После того, как веб-сайт был посещен один раз, работник сервиса сохраняет (или кэширует) важные ресурсы, такие как файлы HTML и изображения, чтобы ему не приходилось совершать API-вызовы в бэкэнде так часто, как при следующем посещении пользователя. Однако сервисные работники могут использоваться для других задач, таких как push-уведомления и фоновые синхронизации данных.

2. Web манифест

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

Веб-манифест имеет важное значение для создания нативных приложений

3. Transport Layer Security (TLS)

PWA должны обмениваться данными через HTTPS, установив SSL-сертификат на своем веб-сервере. Сертификат SSL создает безопасное зашифрованное соединение между внешним приложением и внутренним сервером. Эти требования используют протокол TLS для обеспечения безопасной передачи данных при взаимодействии веб-приложения с внутренними системами электронной коммерции и CMS

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

Примеры использования электронной коммерции в Progressive Web Apps (PWA)

Мы объяснили преимущества PWA для электронной коммерции и несколько недостатков, с которыми вы столкнетесь. Теперь давайте посмотрим, как результаты, перенесенные в PWA, привели к трем отдельным направлениям электронной коммерции: Debenhams, AliExpress и Flipkart.

1. Debenhams: рост доходов от мобильной связи на 40%

Debenhams – давний британский ритейлер с 178 магазинами в Великобритании, Ирландии и Дании. Более 57% онлайн-трафика компании проходило через ее мобильный канал, Debenhams изо всех сил пытался сделать мобильные преобразования. Именно поэтому компания стала первым британским ритейлером, инвестировавшим в PWA, и сократила время от покупки браузера до двух-четырех раз. С тех пор новый PWA Debenhams увеличил доход от мобильной связи на 40% и увеличил общую конверсию для ритейлера на 20%.

2. AliExpress: увеличение конверсии iOS на 84%

AliExpress – это китайский международный рынок с быстро растущей базой мобильных пользователей. Мобильное приложение компании было быстрым, но было сложно заставить пользователей установить приложение и дорого обходиться с ними. AliExpress создал новую PWA, которая предоставляла мобильные функции, делая приложение более доступным для потенциальных пользователей. В результате компания увидела 104% дополнительных новых пользователей и 84% -ное увеличение конверсии iOS.

3. Flipkart: на 40% выше уровень повторного участия

Flipkart является крупнейшим сайтом электронной коммерции в Индии. Первоначально компания сосредоточилась исключительно на мобильном приложении, но ей было сложно обеспечить привлекательный опыт. Вместо этого компания решила выпустить Flipkart Lite, PWA, что позволило на 70% повысить конверсию для пользователей, которые устанавливают приложение, и на 40% увеличить повторное участие.

Голосов 
(5)

Отправляем запрос по News API и рендерим результаты

Теперь, когда у нас есть модель данных для нашего приложения, давайте продолжим и сделаем запросы к News API, а затем отрендерим результаты на странице.

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

Сначала объявите новую переменную под переменной :

Затем используйте её в функции следующим образом:

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

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

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

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

Замените два вызова метода в конце функции следующим кодом:

Сначала мы создаем новый экземпляр структуры и устанавливаем значение поля равным значению параметра URL в HTTP-запросе.

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

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

Затем мы вычисляем общее количество страниц путем деления поля на . Например, если запрос возвращает 100 результатов, а мы одновременно просматриваем только 20, нам нужно будет пролистать пять страниц, чтобы просмотреть все 100 результатов по этому запросу.

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

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

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

Чтобы получить доступ к полю структуры в шаблоне, мы используем оператор точки. Этот оператор ссылается на объект структуры (в данном случае ), а затем внутри шаблона мы просто указываем имя поля (как ).

Блок позволяет нам перебирать слайс в Go и выводить некоторый HTML для каждого элемента в слайсе. Здесь мы перебираем слайс структур , содержащихся в поле , и выводим HTML на каждой итерации.

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

Progressive Web App – что это?

В своей сущности, PWA ничем не отличается от привычных веб сайтов. Прогрессивное веб приложение также создано используя HTML, CSS, JavaScript. Оно легко открывается в браузере. Что отличает PWA от сайта? Мы рассмотрим концепцию из 10 ключевых моментов. Вот эти пункты, взяты из ресурса Google Developers.

1. Безопасность — PWA должен быть создан на основании HTTPS протокола, чтобы избежать утечек данных.

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

3. Резиновый дизайн (responsive) – должно помещаться на дисплей любого устройства: десктоп, мобильный, планшет и все что появится в будущем.

4. Независимое от подключения к интернету — такое приложение оборудуется специальным обработчиком (Service Worker), который способствует работе приложения без подключения к сети или на низкой скорости передачи данных.

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

6. Обновляемое — благодаря вышеупомянутому Service Worker, наше приложение будет обновляться.

7. Идентифицируемое — приложение будет определятся браузерами благодаря стандартизации (W3C манифесту), а также Service Worker. Поисковики смогут видеть и находить ваше приложение.

8. Вовлекаемое — вы сможете создавать push уведомления, которые будут возвращать пользователя в приложение.

9. Устанавливаемое — позволяет пользователю сохранять все полезные для него приложения на главный экран мобильного, без перехода в Play Market и App Store.

10. Имеет URL – вы сможете с легкостью поделиться приложением, просто переслав URL другому человеку.

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