Новичок в концепции прогрессивных веб-приложений (PWA)? Давайте начнем с основ.
PWA - это современные высококачественные приложения, созданные с использованием веб-технологий. Они предлагают аналогичные возможности приложений для iOS / Android / настольных ПК, они надежны даже в нестабильных условиях сети и их можно установить, что упрощает их поиск и использование пользователями.
Прогрессивные веб-приложения сочетают в себе лучшее из Интернета и лучших мобильных приложений. Они полезны для пользователей с самого первого посещения вкладки браузера, установка не требуется.
По мере того, как пользователь выстраивает отношения с этими приложениями посредством повторного использования, они создают PWA - очень быструю загрузку при медленных сетевых подключениях (благодаря сервисному работнику), отправку соответствующих Push-уведомлений и наличие первоклассного значка на главном экране пользователя, который может загрузить их как полноэкранные приложения. Они также могут воспользоваться преимуществами умных баннеров для установки веб-приложений.
Итак, как создать PWA? Что ж, есть некоторые требования к тому, чтобы веб-приложение было PWA.
1. Манифест веб-приложения
Файл JSON предоставляет метаинформацию о веб-приложении. Он содержит такую информацию, как значок приложения (который пользователь обычно видит после его установки в своем ящике приложений), цвет фона, имя и краткое имя приложения.
2. Сервисные работники
Сервисные воркеры - это исполнители, управляемые событиями, которые работают в фоновом режиме приложения. Он действует как прокси между сетью и приложением. Они могут перехватывать сетевые запросы и кэшировать информацию в фоновом режиме. Его также можно использовать для загрузки данных для автономного использования.
3. Значок
Он содержит значок приложения «Добавить на главный экран», с помощью которого пользователь может установить PWA на рабочий стол своего смартфона. Этот инструмент помогает создавать значки для различных форматов и очень полезен.
4. Обслуживается через HTTP
Чтобы быть PWA, веб-приложение должно обслуживаться в защищенной сети. С такими сервисами, как Cloudflare и LetsEncrypt, легко получить сертификат SSL. Поскольку веб-сайт является безопасным, это не только лучшая практика, но и делает ваше веб-приложение надежным сайтом для пользователей, демонстрирующих доверие и надежность и избегающих атак посредников.
5. Офлайн-поддержка:
Начиная с chrome v93 +, PWA обязательно предоставляет страницу, которую обслуживают работники службы, когда у пользователей нет сетевого подключения.
Учитесь на примерах использования DotPe
В случае использования DotPe нам нужен другой тип PWA, потому что наше веб-приложение работает на субдоменах, поэтому нам нужен отдельный PWA для каждого субдомена. Например, для McDonalds наш домен - https://mcdonalds.dotpe.in, а для taco bell - https://tacobell.dotpe.in.
Итак, для McDonalds и Taco Bell мы хотим создать отдельный PWA. Но есть некоторые проблемы, с которыми мы столкнулись во время разработки. Но вот как мы их обошли.
- Service Workers и кеши нельзя использовать совместно с субдоменами:
Следовательно, пользователи, перемещающиеся между субдоменами, должны будут нести затраты на установку нового сервис-воркера для каждого посещаемого источника и не смогут использовать ресурсы, кэшированные ранее установленным сервис-воркером.
Чтобы инициировать нового сервис-воркера для каждого домена, мы используем библиотеку workbox. Кроме того, всякий раз, когда пользователи переходят между субдоменами, установка сервис-воркеров очень легка, что означает, что мы предварительно кэшируем только те ресурсы, которые необходимы.
2. Манифест start_url должен быть относительно origin:
Из-за этого ограничения каждый поддомен должен иметь свой собственный файл манифеста с start_url относительно источника, значок и название бренда должны быть в файле манифеста.
Чтобы решить эту проблему, мы создаем файлы динамического манифеста для каждого бренда, для этого мы использовали рендеринг на стороне сервера. Каждый раз, когда пользователь попадает на определенную страницу, браузер загружает этот файл манифеста.
3. Индивидуальная установка в приложении:
Progressive Web App соответствует необходимым критериям установки, браузер запускает событие beforeinstallprompt. Мы сохраняем ссылку на событие в редукторе и обновляем пользовательский интерфейс, чтобы указать, что пользователь может установить ваш PWA.
После сохранения этого события в reducer мы показываем опцию «Добавить на рабочий стол» на нашей странице благодарности, когда пользователь нажимает кнопку «Добавить на рабочий стол», открывается запрос «Установить». После принятия запроса на установку PWA будет добавлен на рабочий стол.
Вот что дальше
Для нас это только начало. В следующие несколько месяцев мы будем делать намного больше оптимизаций и улучшений, внедряя push-уведомления для повторного вовлечения пользователей, и, конечно же, мы можем создать готовые приложения для игрового магазина / магазина Apple Store для различных брендов за несколько минут.
