Сайт одна из популярных форм digital-рекламы и продвижения вашего продукта или услуги в интернете. Существуют различные типы сайтов: каталоги, блоги, интернет-магазины, корпоративные сайты(enterprise), realty сайты недвижимости, сайты управления предприятием ERP(это программная система, которая помогает управлять всем бизнесом, поддерживает автоматизацию и процессов).
1) Самостоятельная разработка – самописная CMS
2) Использование для создания существующей CMS по шаблону
3) CMS хостингов: GoDaddy, Wix, Tilda
Самые популярные CMS по % использования.
(Статистика использования CMS по всему интернету):
Создать сайт значит провести целый комплекс программно аппаратных настроек: покупка места на хостинге для хранения данных, или установка собственных серверов хранения и обработки данных, установка программного обеспечения, серверов работы с базами данных – SQL Server, веб-сервер – NGINX, Apache, операционная система – Windows Server, CentOS, Ubuntu и др.
Также необходимо купить домен нужного вам региона – .RU, .DE, .COM, .NET или по принципу принадлежности к виду деятельности – .io, .su, .press, .news, .fun и др.
Кроме этого вам необходимо произвести настройки DNS- серверов, SSL-сертификата. Настройки переадресации. Разместить домен на хостинге.
Сайт становиться инструментом по продажи товаров, оказанию услуг, предоставлением каталогов предприятий или каталогов вещей, гео-информационных систем, управлению бизнесом и процессами предприятия.
И для удобства использования сайты в последние 4-5 лет стали конвертировать в приложения для смартфонов
1) В виде отдельного продукта(приложения с интеграцией с сайтом) с нужными функциями
2) Создание PWA версии сайта – power web application, тоесть веб-сайта в виде приложения которое можно установить себе на телефон и использовать offline без интернета и с интерфейсом пользователя и функциями присущими интерфейсу приложений для смартфонов, а не ПК.
Разработка PWA приложений
это отдельное направление в web-дизайне или разработке приложений. Так как сайт с PWA должен быть одинаково удобен как для пользователей ПК так и для интерфейса пользователей приложений на смартфонах. Кроме этого есть такие неотъемлемые составляющие PWA сайта как:
1) Manifest – JSON-файл, декларативно определяющий для браузера название приложения, иконку, как будет выглядеть PWA (fullscreen, standalone и другие варианты отображения) и некоторые другие параметры. Позволяет «установить» PWA как отдельное приложение на домашний экран смартфона. Манифест веб-приложения / веб-сайта определяет, как ваше прогрессивное веб-приложение (PWA) выглядит и ведет себя при установке на устройство. Логотип, картинки, заголовок, описание, ключевые слова, всплывающие виджеты и оповещения.
Manifest
2) Service Worker – Сервис-воркеры это особый тип веб-воркеров, способный перехватывать, изменять и отвечать на все оффлайн- и онлайн-сетевые запросы с помощью Fetch API. Грубо говоря это КЭШ вашего PWA приложения и как он обновляется во время онлайн режима при сетевом взаимодействии с основой БД сайта.
Service Worker
3) Secure HTTPS – Наличие безопасной конечной точки HTTPS и других пользовательских мер безопасности, обеспечивающих полную безопасность работы пользователя. Работа с SSL сертификатом безопасности.
Функциональность PWA
PWA поддерживает множество способов взаимодействия с аппаратной частью телефона.
Такие функции как доступ к контактам пользователя, NFC, считывание QR, поддержка AR/VR пока недоступны но скоро их должны добавить.
Подробнее обо всех функциях с примерами кода можно узнать на сайте whatpwacando.today.
Самыми известными PWA приложениями являются:
Trivago – приложение для туристов и бронирования отелей
Приложение для продажи и покупки товаров по всему миру
Контентное приложение
Приложение для знакомств
Процесс создания PWA приложения
PWA — это технология, которая позволяет сайту получить функциональность мобильного приложения. Можно, в частности, реализовать работу приложения в офлайне, отправлять push-уведомления пользователям, взаимодействовать с внутренними службами и сервисами смартфона (геолокация, камера, панель уведомлений).
При установке из браузера на Android-смартфон или на компьютер с Windows PWA получает свой значок, ничем не отличающийся от других приложений.
В iOS нет возможности напрямую установить приложение, это можно сделать только добавив сайт на главный экран. Но мы уверены, что ребята из Купертино обязательно всё наверстают в самое ближайшее время. PWA можно добавить в Windows Store и Google Play (с небольшими усилиями).
В англоязычном интернете есть статьи о том, как добавить PWA-приложение в App Store, но мы это ещё не практиковали.
Шаг первый — создание PWA
Для реализации PWA нам потребуются сайт, Manifest и Service Worker.
Единственное требование к сайту — SSL-сертификат (реализация https). Если у вас нет такой функции, рекомендуем обратиться к вашему хостинг-провайдеру, скорее всего, сертификат можно добавить бесплатно с помощью сервиса Let’s Encrypt.
Нам нужен только доступ к файлам проекта, никакие серверные изменения или сложные механики не требуются.
Manifest
Нужно дать браузеру подробную информацию о нашем ресурсе: как он называется, как отображать его на конечном устройстве, какие иконки использовать. Это всё мы описываем в файле manifest.json. Мы не будем делать это вручную, а используем онлайн-генератор.
Предварительно нужно создать иконку для своего приложения размером 512 на 512 пикселей. Изображения остальных размеров сервис создаст самостоятельно. Заполняем все поля (название, короткое название, цветовая тема), выбираем режим отображения standalone, добавляем иконку и генерируем архив.
На выходе мы получим архив, в котором будут находиться сам файл manifest.json, а также иконки нашего приложения. Переносим эти файлы в корневую папку вашего сайта.
Service Worker
Service Worker позволяет выполнять фоновые процессы вроде кэширования страниц, веб-запросов, отправки уведомлений. В этой статье мы не будем углубляться в эту обширную тему, оставляйте комментарии, если хотите, чтобы мы разобрали создание и оптимизацию индивидуальных решений.
Для большинства задач хватит сгенерированного кода. Для этого
Во втором файле хранится JavaScript-код для запуска service-worker. Этот код необходимо перенести в JS-файл вашего сайта. Чтобы определить, куда и в какой файл записать код, откройте сайт в браузере и зайдите в режим просмотра кода страницы (в Google Chrome это комбинация клавиш Ctrl+U).
Файлы JavaScript подключаются к сайту с помощью тега script. Ищем такой тег в начале (в секции head) или в конце сайта (перед закрывающимся тегом body).
Если тегов несколько (как правило присутствуют JS-файлы подключаемых библиотек), ищем самый последний из них. В теле тега содержится информация о том, где находится нужный нам файл (в нашем случае это файл app.js в папке js). В конец этого файла мы вставляем код из файла pwabuilder-sw-register.js.
На данном этапе у нас есть работающее PWA-приложение. При заходе на сайт с Android-смартфона внизу должна появится ссылка на установку приложения на главный экран.
Шаг второй — создание мобильного приложения
Для создания приложения нам потребуется бесплатная среда разработки Android Studio.
Начнём создание нашего проекта. На начальном экране Android Studio нажимаем Start a new Android Studio project. На следующем шаге нам предлагают выбрать заготовку для нашего приложения. Выбираем вариант Add No Activity и двигаемся дальше.
Полностью процесс создания описывать не будем. Вот ссылка по функционалу PWA для разработки –
Установка в обход магазинов приложений
Также одним из главных преимуществ PWA приложений является то что установить можно минуя магазин приложений App Strore или Google play
PWA, хоть и можно добавить в сторы, но их дефолтный способ установки — через браузер, т.е. они устанавливаются в обход сторов.
Это огромный плюс, т.к. в таком случае не приходится связываться с политикой проверки магазинов перед публикацией приложения.
Фоновая установка обновлений
Больше не нужно заставлять пользователей устанавливать обновления. Когда вы выпускаете новую версию своего приложения, все ваши пользователи автоматически получают новую версию.
Вы также можете предупреждать пользователей об изменениях. Достигается это с помощью системы кэширования файлов приложения. Разработчики могут отследить изменения между файлами на устройстве пользователя и файлами на домене.
Меньший размер приложения
Размер PWA-приложения, как правило, не превышает 1-3 мегабайт. Это меньше, чем мобильное приложение.
Заключение
PWA обладает схожей функциональностью и спектром задач с нативными приложениями, но разработка прогрессивного веб-приложения куда быстрее и дешевле. А еще PWA легко интегрировать в уже существующие веб-приложения. Поэтому это еще один из продуктов web-разработки, который может кратно повысить качество и эффективность для пользователей вашего сайта!
