Хотите добавить на свой сайт дополнительные функции? В Wix App Market есть сотни приложений на выбор, включая приложения, созданные Wix, и сторонние приложения. Будь то основные компоненты сайта, такие как магазин Wix Stores или небольшие полезные приложения, такие как приложение123Form Builder https://support.wix.com/ru/article/%D0%B4%D0%BE%D0%B1%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5-%D0%BF%D1%80%D0%B8%D0%BB%D0%BE%D0%B6%D0%B5%D0%BD%D0%B8%D1%8F-%D0%BD%D0%B0-%D1%81%D0%B0%D0%B9%D1%82″ target=»_blank»]support.wix.com[/mask_link]
Как запустить мобильное приложение за две недели с помощью PWA
Frontend-разработчик AFFINAGE Никита Воробьев рассказывает, какие задачи решают PWA-приложения, есть ли у них ограничения и почему Frontend-разработчики справляются с PWA-разработкой лучше других. В конце материала — инструкция по интеграции прогрессивного веб-приложения в сайт.
Результат Как добавить программу на сайт
Никита Воробьёв
Frontend-разработчик AFFINAGE
PWA — промежуточная технология между сайтами и нативными мобильными приложениями. По сути, это «прокачанная» копия веб-сайта, размещенная на устройстве пользователя и не требующая отдельной разработки для iOS или Android.
«Прогрессивное web-приложение (англ. progressive web app, PWA) — технология в web-разработке, которая визуально и функционально трансформирует сайт в приложение (мобильное приложение в браузере)»
Так описывается технология в Wikipedia, но нам этого мало, так что давайте подробнее разберем, что это такое.
PWA-приложение не нужно отдельно разрабатывать для iOS и Android: оно устанавливается на главный экран смартфона, — для этого нужно заложить технологическую базу на этапе Frontend-разработки. Можно сказать, что PWA — это сайты с расширенной функциональностью, которая позволяет им быть похожими на нативные мобильные приложения.
Работают эти приложения так же, как и обычные мобильные приложения: показывают Push-уведомления, работают в автономном офлайн-режиме, сохраняют данные локально. По внешнему виду они ничем не отличаются от нативных приложений и могут размещать иконку на рабочем столе (домашнем экране) для быстрого запуска.
PWA, как обычные сайты, размещаются на доменах с https-шифрованием. Таким образом поддерживается уникальность приложений, поскольку не бывает двух одинаковых доменов.
Задачи, которые решает PWA:
- Стимулировать повторные продажи.
- Возвращать клиентов компании в одно нажатие на экране телефона.
- Повышать узнаваемость бренда. Иконка с логотипом компании всегда на виду на рабочем столе у пользователя.
- Повышать средний чек сделки, допродавая продукты при помощи Push-уведомлений.
- Оставаться на связи с клиентом: показывать Push-уведомления о том, что товар прибыл в пункт самовывоза или будет доставлен сегодня.
- Экономить на рекламе. Не нужно настраивать догоняющую рекламу с новой акцией, достаточно отправить уведомление для текущих клиентов.
- Избавиться от конкуренции в поисковой выдаче. Пользователи возвращаются через приложение, в котором нет конкурентов, в отличии от поисковой выдачи.
Однако любую из этих задач может решить и нативное мобильное приложение, так что в случае с PWA-разработкой можно поставить знак равенства между PWA Frontend developer и Mobile developer, поскольку они решают одни и те же задачи.
Создание PHP веб сайта за 1 час! + Выгрузка на сервер
История PWA
Технология была создана компанией Microsoft еще в 2000 году. В 2007 сотрудники Apple разработали свой вариант HTML-приложений.
Frontend-разработчик АО «Гринатом» , Москва, можно удалённо , По итогам собеседования
Изначально приложения для оригинального iPhone разрабатывались именно на платформе web. Однако успеха технология не сыскала по причине скудного UX, и в скором времени появился App Store, который по факту отложил развитие PWA.
Ожила и приобрела широкую известность технология только в 2015 году благодаря расширению возможностей браузера Google Chrome и продвижению Service Worker и Web App Manifest. Тогда же дизайнер Фрэнсис Берримэн и инженер Google Chrome Алекс Рассел придумали термин PWA.
Затем поддержку прогрессивного веб-приложения начали добавлять во все браузеры и операционные системы. К примеру, в Windows, начиная с 10 версии, появилась возможность распространения PWA через Microsoft Store.
Но все же основная причина развития данной технологии — привлечение и удержание мобильного трафика: так, в России мобильный трафик по итогам 2021 года составил рекордные 83%.
Примеры PWA
Существует огромное множество прогрессивных веб-приложений — Telegram, Pinterest, Tinder, Starbucks.
Появились и отдельные сайты-каталоги PWA, например appsco.pe и findpwa.com. Другие ресурсы для тех, кто интересуется разработкой прогрессивных веб-приложений — pwastats.com и web.dev, раздел Case Study.
На этих сайтах можно прочитать про множество успешных кейсов применения PWA с цифрами и с результатами. Один из примеров — как Starbucks смогли в два раза увеличить количество ежедневных пользователей.
Структура PWA
Чаще всего PWA состоит из Service Workers, Application Manifest, Офлайн-кэширования, различных PWA-технологий, адаптивного дизайна, фоновой синхронизации, Push-уведомлений, Media API и Geolocation API.
Пример структуры PWA
Модификаций структуры множество, однако минимальные требования для работы PWA — это:
- Валидное и защищенное HTTPS-подключение (у домена должен быть установлен SSL-сертификат).
- Успешно установленный файл Service Worker`а.
- Правильно установленный и валидный JSON-файл манифеста.
Любой сайт можно дополнить данными составляющими и тем самым получить прогрессивное веб-приложение.
Service Worker
«Сердце» PWA — Service Worker. Это проксирующий слой между фронтэндом и бэкэндом, находящийся в браузере. Все запросы браузера идут через него.
Из хранилищ у Service Worker’a есть доступ к Cache-хранилищу для web-ресурсов, и IndexDB для данных. Но, самое главное, — полная свобода для реализации бизнес-логики.
С точки зрения написания кода, Service Worker представляет собой Javascript-файл. В нем разработчик определяет логику работы с приходящими из фронтэнда запросами и другую функциональность.
Web App manifest
Web App manifest — JSON-файл, декларативно определяющий для браузера название приложения, иконку, как будет выглядеть PWA (fullscreen, standalone и другие варианты отображения) и некоторые другие параметры. Позволяет «установить» PWA как отдельное приложение на домашний экран смартфона.
Технические особенности PWA
Способы установки PWA
Существует три способа установки PWA: при помощи автоматического уведомления, через «…» (три точки) в меню браузера, при клике на кнопку установки на странице.
Так выглядит установка с помощью автоматического уведомления
Пример установки через «…» (три точки) в меню браузера
Пример установки при клике на кнопку установки на странице
Отображение PWA
PWA работают на базе WebView, который предоставляют браузеры. WebView очень популярный способ для отображения интерфейсов.
Браузер, который будет открывать PWA после установки приложения, определяется операционной системой iOS или Android.
Для Android используется Google Chrome, а для iOS — Safari.
Очень упрощенно можно сказать, что PWA открывается во вкладке браузера, но без интерфейса самого браузера. Однако мы можем отображать интерфейс браузера, если нам это необходимо.
Варианты отображения PWA
Поддержка PWA
По данным caniuse.com, 94% устройств пользователей поддерживают service workers, возможность установки на домашний экран есть у 87% пользователей.
Функциональность PWA
PWA поддерживает множество способов взаимодействия с аппаратной частью телефона.
Такие функции как доступ к контактам пользователя, NFC, считывание QR, поддержка AR/VR пока недоступны, но в ближайшее время их должны добавить.
Подробнее обо всех функциях с примерами кода можно узнать на сайте whatpwacando.today.
Фреймворки и библиотеки
Для PWA необходимо только два файла — Service Worker и Web App manifest, — поэтому для разработки подойдут все актуальные реактивные фреймворки. Для каждого из них есть плагин, который добавляет предустановленный файл манифеста, предустановленный файл service worker’a и дополнительную функциональность.
Также есть фреймворки конкретно для работы с PWA:
- React PWA Library
- Angular PWA Framework
- Vue PWA Framework
- Ionic PWA Framework
- Svelte PWA Framework
PWA Builder
С его помощью можно легко разработать прогрессивное веб-приложение и сгенерировать пакеты из PWA для размещения приложения в различных сторах. При этом нужно учесть, что размещение в AppStore на данный момент считается экспериментальной фичей и работает не всегда корректно.
Отличительные качества PWA
Ограниченный доступ к аппаратной части
К недостаткам PWA можно отнести ограниченный доступ к аппаратной части мобильного устройства.
Поскольку прогрессивные веб-приложения запускаются в браузере, они не имеют прямого доступа ко всем возможностям платформы (операционной системы и аппаратным возможностям), к которым имело бы доступ нативное приложение, созданное с использованием SDK-платформы.
Но поддержка и возможности постоянно развиваются и имеющейся на данный момент функциональности достаточно для реализация большинства задач.
Установка в обход магазинов приложений
PWA, хоть и можно добавить в сторы, но их дефолтный способ установки — через браузер, т.е. они устанавливаются в обход сторов.
Это огромный плюс, т.к. в таком случае не приходится связываться с политикой проверки магазинов перед публикацией приложения. Но это относительно натянутый факт, так как и на андроид можно апк-файл скачать в обход стора.
Фоновая установка обновлений
Больше не нужно заставлять пользователей устанавливать обновления. Когда вы выпускаете новую версию своего приложения, все ваши пользователи автоматически получают новую версию.
Вы также можете предупреждать пользователей об изменениях. Достигается это с помощью системы кэширования файлов приложения. Разработчики могут отследить изменения между файлами на устройстве пользователя и файлами на домене.
Меньший размер приложения
Размер PWA-приложения, как правило, не превышает 1-3 мегабайт. Это меньше, чем мобильное приложение. Средний размер мобильного приложений, по данным 2017 года, 38 Мб для iOS и 15 Мб для Android.
Меньшие затраты на разработчиков
Для компаний, бизнеса разработка и поддержка PWA финансово выгоднее.
rabota.ru Q1 2022
В общем, PWA имеет свои отличительные особенности и недостатки.
Таблица особенностей PWA и нативных приложений
В связи с ограничениями аппаратной части, PWA не может полностью заменить нативные приложения, но четыре ключевые функции PWA-приложений закрывают потребности 90% мобильных пользователей:
- Отправка Push-уведомлений, чтобы вернуть пользователей.
- Установка иконки на домашний экран, чтобы дать пользователям быстрый доступ к приложению.
- Доступ к некоторым нативным аппаратным функциям, например, камеры, микрофона.
- Возможность работы офлайн.
Как добавить приложение на главный экран в виде ссылки на сайт
Браузер Google Chrom позволяет установить на своем сайте всплывающее уведомление «Добавить приложение на главный экран» смартфона, в виде ссылки на любую страницу сайта. Сделать это очень просто, достаточно проделать несколько шагов.
Шаг один. Создайте файл manifest.json
< «name»: «Only Manifest», «short_name:» only_manifest «, «description»: «фиктивное приложение к демонстрационному манифесту без SW», «start_url»: «/index.html», «scope:». «, «background_color»: «#EEE», «theme_color»: «# 4A148C», «дисплей»: «автономный», «ориентация»: «портретно-начальная», «dir:» ltr «, «lang»: «en-US», «related_applications: [ < «платформа»: «игра», «url»: «https://play.google.com/. /app_name», «id»: «com.example.app» >], «иконки»: [ < «src»: «src / images / icons / app-icon-144×144.png», «type»: «image / png», «размеры»: «144х144» >, , , -> Другие похожие объекты изображения , ] >
Вот краткое объяснение каждого свойства.
short_name — отображается на главном экране под значком приложения в качестве имени приложения.
description — общее описание того, что делает веб-приложение.
start_url — URL-адрес, который загружается первым при запуске приложения, нажав значок приложения на главном экране. область действия — страницы, которые вы хотите включить в свой опыт работы с PWA, «.» означает все, где находится I (файл манифеста веб-приложения). Поэтому лучше поместить в корневой каталог вместе с index.html, если вы хотите включить полноценное веб-приложение.
background_color — цвет заставки.
theme_color — цвет строки состояния. display — указывает режим отображения. «Автономный» означает приложение, например, без адресной строки браузера. Другие опции: «полноэкранный», «автономный», «minimal-ui», «браузер». ориентация — указывает ориентацию экрана. «портретная первичная» означает строгий портретный режим и запрещает альбомный режим. Другие варианты: пейзаж, любой, портрет и т. Д.
dir — основное направление текста. «ltr» (по умолчанию) означает слева направо.
lang — основной язык приложения. ‘EN-US’ (по умолчанию).
related_applications — ссылка на родное приложение (приложение для Android). Пропустить, если родного приложения нет.
icons — массив объектов изображения, который содержит иконки разных размеров, которые вы хотите показать на главном экране. Рекомендуемые размеры: 48, 96, 144, 192, 256, 384, 512. Ваше устройство автоматически выберет лучший значок.
Шаг два. Подключите файл manifest.json в header сайта
Тут все просто. Положите данный файл в корне сайта и подключите его перед закрывающим тегом header с помощью конструкции
Шаг три. Создание файла service-worker.js
Создайте в корне сайта файл service-worker.js со следующим содержимым
self.addEventListener (‘fetch’, function (event) < >);
Шаг четыре. Необходимо создать иконки под разное разрешение браузера Google Chrom
Создайте в корне сайта файл service-worker.js со следующим содержимым
Шаг пять. Создание рабочего скрипта
Перед закрывающим тегом body необходимо разместить следующий скрипт
if (‘serviceWorker’ in navigator) < console.log(«Will the service worker register?»); navigator.serviceWorker.register(‘service-worker.js’) .then(function(reg)< console.log(«Yes, it did.»); >).catch(function(err) < console.log(«No it didn’t. This happened:», err) >); >
Проверка. Теперь
Ограничения.
1) Данное уведомление работает только в браузере Goofle Chrom на смартфонах под управлением Android 2) Сайт должен работать под защищенным протоколом https 3) Выводится уведомление когда сайт посещается по крайней мере дважды, и с интервалом пять минут между посещениями.
Тестирование
Чтобы проверить правильность установки, вы можете попробовать выполнить следующие действия:
Откройте Chrome DevTools,
Перейдите на панель APlication
Перейдите на вкладку Manifest
Источник: pashkof.pro