Ввод в прогрессивные веб-приложения

vvod v progressivnye veb prilozheniya

Хотите изучить JavaScript? Получите мою электронную книгу на jshandbook.com

Прогрессивные веб-приложения (PWA) являются последним трендом в мире разработка мобильных приложений с помощью веб-технологий. На момент написания (начало 2018 года) они были применяется только для устройств Android.

PWA очень скоро появятся в iOS 11.3 и macOS 10.13.4.

WebKit, технология, лежащая в основе Safari и Mobile Safari, недавно (август 2017 г.) объявила, что начала работу над внедрением Service Workers в браузер. Это означает, что вскоре они появятся на устройствах iOS. Итак, концепция прогрессивных веб-приложений, вероятно, будет применена к iPhone и iPad, если Apple решит поощрять этот подход.

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

Что такое прогрессивное веб-приложение

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

Эта техника была впервые представлена ​​Google в 2015 году, и доказано, что она приносит много преимуществ как разработчику, так и пользователям.

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

Разработчики могут извлечь пользу от a пониженное трение установкии в то время, когда наличие программы в магазине фактически не приносит ничего с точки зрения видимости для 99,99% программ, поиск Google может предоставить те же преимущества, если не больше.

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

  • Оффлайн поддержка
  • Загружается быстро
  • Безопасный
  • Способен выдавать push-сообщение
  • Увлекательный полноэкранный режим без строки URL-адреса

Мобильные платформы (Android на момент написания статьи, но технически этим не ограничивается) предлагают все большую поддержку прогрессивных веб-приложений. Они даже просят пользователя добавить приложение на главный экран когда этот пользователь посещает этот сайт.

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

Альтернативы прогрессивных веб-приложений

Как PWA стоит по сравнению с альтернативами, когда дело доходит до создания мобильного опыта?

Давайте сосредоточимся на плюсах и минусах каждого из них и посмотрим где PWA хорошо подходят.

Родные мобильные приложения

Собственные мобильные приложения являются наиболее очевидным способом создания мобильного приложения. Objective-C или Swift на iOS, Java/Kotlin на Android и C# на Windows Phone.

Каждая платформа имеет свои правила интерфейса пользователя и UX, а родные виджеты обеспечивают ожидаемый пользователем опыт. Их можно разворачивать и распространять через платформу App Store.

Основная проблема, связанная с нативными программами, состоит в том, что кроссплатформенная разработка требует изучения, освоения и поддержки многих различных методологий и лучших практик. Если, например, у вас небольшая команда или вы отдельный разработчик, создающий приложение на 3 платформах, вам нужно потратить много времени на изучение технологии и среды. Вы также потратите много времени на управление разными библиотеками и использование различных рабочих процессов (например, iCloud работает только на устройствах iOS – версии для Android нет).

Гибридные программы

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

Одними из самых распространенных платформ являются Phonegap и Ionic Framework среди многих других, и обычно то, что вы видите на странице, является WebView, который фактически загружает локальный веб-сайт.

Я сначала включил Xamarin в список, но Карлос Эдуардо Перес правильно указал, что Xamaring генерирует родной код.

Ключевым аспектом гибридных программ является напиши один раз, беги куда угодно концепции. Код другой платформы генерируется при создании, и вы создаете приложения с помощью JavaScript, HTML и CSS, что удивительно. Возможности устройства (микрофон, камера, сеть, GPS…) доступны через JavaScript API.

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

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

Программы, созданные с помощью React Native

React Native предоставляет собственные элементы управления мобильным устройством через JavaScript API, но вы фактически создаете родную программу, а не встраиваете веб-сайт в WebView.

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

Производительность сравнима с нативными программами, поскольку то, что вы создаете, по сути, является родной программой, которая распространяется через App Store.

Прогрессивные функции веб-приложений

В прошлом разделе вы увидели главное конкурентов прогрессивные веб-приложения. Итак, как PWA стоят по сравнению с ними, и каковы их основные особенности?

Помните — прогрессивные веб-приложения предназначены только для устройств Android.

особенности

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

Это ключевое преимущество. Магазин приложений выгоден, если у вас есть охват и удача, чтобы быть представленным, что может сделать ваше приложение вирусным. Но если вы не попадете в топ-0,001%, вы не получите особых преимуществ от своего небольшого места в App Store.

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

Не быть в App Store означает вам не нужно одобрение Apple или Google быть в карманах пользователей. Вы можете выпускать обновления, если хотите, без необходимости проходить стандартный процесс утверждения, типичный для приложений iOS.

PWA — это в основном HTML5-приложения/адаптивные веб-сайты на стероидах с некоторыми ключевыми технологиями, которые недавно были представлены, чтобы сделать некоторые ключевые функции возможны. Если вы помните, оригинальный iPhone был без возможности разработки нативных программ. Разработчикам было предписано разработать мобильные программы HTML5, которые можно было бы устанавливать на главный экран, но тогда технологии не были готовы к этому.

Прогрессивные веб-приложения работать в автономном режиме.

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

Кроме того, возможность совместного использования делает намного более приятным опыт для пользователей, которые хотят поделиться вашим приложением, поскольку им нужен только URL-адрес.

Преимущества

Почему пользователи и разработчики должны заботиться о прогрессивных веб-приложениях?

  1. PWA легче. Родные приложения могут весить 200 МБ или более, тогда как PWA может быть в диапазоне КБ.
  2. Нет родного кода платформы
  3. Стоимость приобретения ниже (гораздо сложнее убедить пользователя установить приложение, чем посетить веб-сайт, чтобы получить первый опыт).
  4. Для создания и выпуска обновлений требуется гораздо меньше усилий
  5. Они имеют гораздо больше поддержки глубоких ссылок, чем обычные приложения магазина программ

Основные понятия

  • Чуткий: пользовательский интерфейс адаптируется к размеру экрана устройства
  • Ощущение, как в программе: это выглядит не как веб-сайт, а как приложение (насколько это возможно)
  • Оффлайн поддержка: он будет использовать память устройства, чтобы обеспечить работу в автономном режиме.
  • Устанавливается: браузер устройства предлагает пользователю установить ваше приложение.
  • Повторное привлечение: push-уведомления помогают пользователям снова открыть для себя вашу программу после установки
  • Открывается: поисковые системы и SEO-оптимизация могут обеспечить гораздо больше пользователей, чем магазин приложений
  • Свежий: приложение обновляет себя и содержимое, когда появляется в сети
  • Сейф: он использует HTTPS
  • Прогрессивный: он будет работать на любом устройстве, даже старшем, даже если он имеет меньше функций (например, просто как веб-сайт, нельзя установить)
  • Возможность связывания: на него легко указать с помощью URL-адресов.

Обслуживающие работники

Часть определения прогрессивной веб-приложения состоит в том, что она должна работать в автономном режиме.

Поскольку то, что позволяет веб-приложению работать в автономном режиме, это Service Worker, это означает, что Service Workers является обязательной частью прогрессивного веб-приложения.

ПРЕДУПРЕЖДЕНИЕ: Service Workers поддерживаются только в Chrome (Desktop и Android), Firefox и Opera. Просмотрите обновленные данные поддержки.

СОВЕТ. Не путайте Service Workers с Web Worker. Они совсем другое дело.

Service Worker — это JavaScript, который действует как посредник между веб-приложением и сетью. Благодаря этому он может предоставлять услуги кэша, ускорять рендеринг программы и улучшать взаимодействие с пользователем.

По соображениям безопасности только сайты HTTPS могут использовать Service Workers, и это является причиной, почему прогрессивные веб-приложения должны обслуживаться через HTTPS.

Service Workers недоступны на устройстве при первом посещении программы пользователем. При первом посещении сервис-воркер устанавливается, а затем при последующих посещениях отдельных страниц сайта этот сервис-воркер вызывается.

Ознакомьтесь с полным руководством для работников сферы обслуживания

Манифест программы

Манифест приложения – это файл JSON, который можно использовать для предоставления информации об устройстве относительно прогрессивного веб-приложения.

Вы добавляете ссылку на манифест каждый заголовок на каждой странице вашего веб-сайта:

<link rel="manifest" href="https://www.freecodecamp.org/manifest.webmanifest">

Этот файл подскажет устройству, как настроить:

  • Название и короткое название программы
  • Расположение икон, разных размеров
  • Начальный URL-адрес относительно домена
  • Стандартная ориентация
  • Экран-заставка

пример

{   "name": "The Weather App",   "short_name": "Weather",   "description": "Progressive Web App Example",   "icons": [{    "src": "images/icons/icon-128x128.png",    "sizes": "128x128",    "type": "image/png"   }, {     "src": "images/icons/icon-144x144.png",    "sizes": "144x144",     "type": "image/png"   }, {     "src": "images/icons/icon-152x152.png",    "sizes": "152x152",     "type": "image/png"   }, {     "src": "images/icons/icon-192x192.png",    "sizes": "192x192",     "type": "image/png"   }, {     "src": "images/icons/icon-256x256.png",     "sizes": "256x256",     "type": "image/png"   }],   "start_url": "/index.html?utm_source=app_manifest",   "orientation": "portrait",   "display": "standalone",   "background_color": "#3E4EB8",  "theme_color": "#2F3BA2" }

Манифест программы – это рабочий черновик W3C, доступный по адресу https://www.w3.org/TR/appmanifest/

Оболочка программы

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

Возьмем, например, предложение Apple по использованию заставки, напоминающей пользовательский интерфейс. Это дает психологическую подсказку, которая, как оказалось, понижает чувство того, что программа загружалась много времени.

Кэширование

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

Хотите изучить JavaScript? Получите мою электронную книгу на jshandbook.com

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *