APP [Shop-Script] Создание мобильного и десктоп приложения для сайта | pwa v1.1.0

Приложение «PWA» автоматически генерирует на основе вашего сайта мобильное и десктоп приложение по технологии progressive web app (PWA).

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

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

PWA очень схожи с нативными приложениями (APK), но имеют перед ними, как преимущества, так и недостатки.

3 способа использования приложение:​

1. Генератор мобильного приложение для вашего сайта.
2. Отправка push-уведомлений. С помощью приложения можно отправлять push-уведомления не только в мобильные приложения, но и в браузер пользователя.
3. Ускорения сайта. Приложение использует технологию Service Worker, которая позволяет кешировать: страницы, изображения, видео, аудио, шрифты, js, css. Создавать статико-динамическую архитектуру сайта (часть сайта загружается мгновенно, другая часть подгружается с сервера).

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

Преимущества PWA перед нативным приложением (APK):​

1. Цена. Разработка APK стоит существенно дороже, чем PWA.
2. Поддержка. PWA работает на всех платформах и создается на основе уже имеющегося сайта, то есть вам нужно только заниматься поддержкой вашего сайта. APK создаются отдельного для каждой платформы (Android, iOS, Windows) и также требуют отдельной поддержки.
3. Управление. PWA не требует отдельной панели управления. Обновление приложения происходит автоматически..
4. Вариативность установки. Помимо загрузки из магазинов приложений. PWA может устанавливаться в один клик напрямую из браузера. Это позволяет избежать ограничений и комиссии магазинов приложений.
5. Продвижение. PWA не требует дополнительного продвижения, индексируются также, как и обычные сайты.
6. Занимаемое место на устройстве. PWA в среднем занимает около 1мб, APK 300мб.

Недостатки PWA перед APK:​

1. Ограниченный доступ к устройству пользователя. PWA не имеет доступа к контактам, календарю, Bluetooth, NFC, Siri, Face и Touch ID.
2. Производительность. Производительность нативных приложений выше, чем у PWA.

Возможности и преимущества PWA:​

• Установка иконки на устройство пользователя. Это дополнительная реклама вашего бизнеса, повышение узнаваемости бренда и имиджа.
• Коммуникация с аудиторией. С помощью web push notifications вы можете общаться с вашими клиентами, уведомлять о статусе заказа, новостях, акциях и т.д.
• Повышение скорости загрузки. PWA кеширует html, CSS стили, JS файлы, изображения, шрифты, видео, аудио. Это улучшает загрузку страниц примерно до 1 секунды.
• Работа оффлайн. PWA может работать без сети. Вы также можете настроить страницу резервного ответа, в которой можете рассказать пользователю, как с вами связаться, когда сайт не доступен.
• UI\UX. В PWA вы можете реализовать элементы пользовательской интерфейса, такие же, как и в нативном приложении. Это повысить юзабилити в сравнении с мобильной версией сайта.

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

Истории успеха при внедрении PWA:​

• Tinder сократил время загрузки с 11,91 до 4,69 секунд благодаря PWA. Приложение на 90 % меньше, чем скомпилированное приложение Android. Вовлеченность пользователей в PWA выросло по всем показателям (
  Для просмотра ссылки Вы должны войти или зарегистрироваться.
  ).
• Petlove внедрение PWA привело к увеличению конверсии в 2,8 раза и увеличению времени, проведенного на сайте в 2,8 раза. (
  Для просмотра ссылки Вы должны войти или зарегистрироваться.
  ).
• Trivago увеличил на 150% людей, которые добавляют PWA на начальный экран. Увеличение вовлеченности привело к 97% - увеличению часов ожидания для предложений отелей (
  Для просмотра ссылки Вы должны войти или зарегистрироваться.
  ).
• AliExpress повысил коэффициент конверсии для новых пользователей на 104%, в 2 раза больше посещенных страниц и на 74% больше времени, потраченного на сеанс (
  Для просмотра ссылки Вы должны войти или зарегистрироваться.
  ).
• Alibaba увеличила число конверсий в мобильном трафике на 76% (
  Для просмотра ссылки Вы должны войти или зарегистрироваться.
  ).

Особенности приложения «PWA»:​

• 5 стратегий кеширования, которые можно отдельно настроить под каждый объект кеширования.
• Наличие предварительного кеширования, с помощью которого вы можете создать полноценное офлайн приложение и создать статико-динамическую (островная архитектура) архитектуру сайта, это может значительно ускорить сайт и приложение в том числе показатели PageSpeed Insights. В этом
  Для просмотра ссылки Вы должны войти или зарегистрироваться.
  можно посмотреть, левая часть сайта «Сайдбар» загружается мгновенно с помощью предварительного кеширования, а основной контент чуть позже.
• Мультивитринность. Создание отдельного PWA приложения для каждой витрины.

На операционной системе IOS не поддерживаются на данный момент браузерные подсказки для установки приложения, установка на IOS возможно через кнопку в меню «Поделиться» → «Добавить на главные экран» или через App Store.

Доступные функции и возможности PWA:​

1. Push-уведомления.
2. Кеширование.
3. Предварительное кеширование.
4. Работа в офлайн-режиме.
5. Публикация магазинах приложений: Microsoft Store, Google Play, iOS и Meta.
   Для просмотра ссылки Вы должны войти или зарегистрироваться.
6. Установка из браузера.
7. Фоновое обновление приложения.
8. Google Analytics в автономном режиме. (в разработке)

Push-уведомления:​

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

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

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

*Для отправки push-уведомлений требуется библиотека

Для просмотра ссылки Вы должны войти или зарегистрироваться.

, на большинстве серверов она установлена, но может быть закомментирована в файле php.ini, поэтому может потребоваться доступ к php.ini чтобы расскоментировать библиотеку. Случаю ее отсутствия на сервере потребуется установка.

Требования для работы:​

• Адаптивный дизайн.
• Протокол HTTPS.
• PWA не работает в старых браузерах (IE) и с браузерами у которых выключена поддержка Service Worker.
• Отсутствие сторонних Service Worker. В теме дизайна или плагинах должны быть отключены Service Worker.