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

Большинство разработчиков, по крайней мере, слышали шум вокруг Progressive Web Apps. Они широко поддерживаются техническими компаниями, такими как Google, и быстро становятся нормой для веб-приложений для нескольких устройств.

Но в чем разница между типичным и прогрессирующий веб-приложение?

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

Читайте также: Прогрессивные веб-приложения – будущее современной сети?

В этом руководстве я расскажу об основах Progressive Web Apps, некоторых основных функциях и о том, как начать создавать свои собственные.
Что такое прогрессивные веб-приложения?
Прогрессивные веб-приложения (или PWA) используют API-интерфейсы веб-браузера для создания собственных приложений прямо в браузере на любом устройстве.

В конечном итоге, прогрессивные веб-приложения включают в себя несколько технологий, которые разработчики могут использовать для создания мощных нативных приложений. Многие приходят из веб-API, таких как API сервисных работников или Push API,

Есть довольно много требований к называть что-то PWA но это самые важные из них:

• Полностью мобильный, отзывчивый.
• Придерживается прогрессивного улучшения.
• Возможность установки локально на смартфонах и планшетах.
• Работает в автономном режиме без интернета, используя сервис работников.
• Отделяет контент от функциональности с помощью оболочка приложения,
• Построен на HTTPS для большей безопасности.
• Обнаруживается в поиске Google.
• Имеет динамические страницы, похожие на приложения, но каждая из них имеет свой собственный URL.

Если вы думаете о создании небольшого веб-приложения, вы можете вместо этого попробовать создать Progressive Web App. Это идет с небольшой кривой обучения, но в результате вы получаете гораздо больший контроль над пользовательским интерфейсом.

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

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

С использованием Service Worker API является существенный запустить автономно поддерживаемый PWA. Это способ передачи данных между представлениями и способ запроса данных из локальной базы данных. Но это в основном сложные вещи, которые вы изучаете, работая над проектом PWA.

Взгляните на Сервис работников поваренная книга для базовых фрагментов и живых демонстраций. Это фантастический способ учиться, изучая то, что сделали другие, и клонируя это в своих собственных приложениях.
Если вы надеетесь создать Progressive Web App, начните с Service Worker API. Просто возьмите с собой и создайте простую демо-версию локально. Это создаст основу для дальнейшего создания пользовательских функций приложения и страниц, которые будут работать через сервисных работников.

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

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

Как правило, оболочка приложения имеет следующие основные элементы:

• Лучшие ссылки на панели навигации.
• Кнопка Обновить (необязательно).
• Контейнер фоновой страницы.

Вы можете найти хороший пример Вот об архитектуре оболочки прогрессивного веб-приложения Google I / O. Они также предлагают несколько советов по созданию собственной архитектуры оболочки, ее кэшированию и автоматическому извлечению для каждой страницы.

Думайте об архитектуре оболочки как о всех статических элементах пользовательского интерфейса, которые вы будете использовать на каждой странице. Они должны быть отделены от остальной части вашего кода и кэшированы для легкого повторного использования. Также проверьте Введение Google к теме с большим количеством фрагментов кода, чтобы помочь вам начать.
Онлайн и оффлайн поддержка
Большинство нативных приложений нормально работают без интернета. Прогрессивные веб-приложения предназначены для того же поведения.

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

Если вы используете Service Worker API, взгляните на Cache API которая является частью той же структуры. Как правило, это лучший способ локального хранения данных и последующего доступа к ним от обслуживающего персонала.

Вы также можете протестировать любое веб-приложение, используя Маякбесплатный инструмент для проверки соответствия функций и поддержки технологий PWA.
Для PWA всегда требуется поддержка в автономном режиме через Service Worker API, поэтому они могут работать в состояниях с низким уровнем соединения. Lighthouse – лучший способ проверить автономную поддержку, а также множество других функций.
Живые примеры
Изучение живых PWA и просмотр их работы – отличный способ учиться. Однако рынок Progressive Web App все еще находится на стадии становления, поэтому многие из лучших рассеяны по разным уголкам Интернета.

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

Это лишь некоторые из функций, которые вы ожидаете в любом типичном Progressive Web App. Это приложение также может быть сохранено локально на вашем телефоне для работы в автономном режиме, хотя оно подключается к Файл JSON проверить текущие курсы валют.
2. Английские Акценты
Я просто обожаю это веб-приложение, потому что оно уникально и невероятно хорошо разработано. Карта английского акцента онлайн-видео с кураторами, где люди несут акценты из определенных регионов США и Великобритании.
Нажав в любом месте на карте, вы можете слушать, как люди произносят определенные слова в разных частях света. Приложение работает молниеносно и с открытым исходным кодом на GitHub для любого, чтобы проверить.

Внутренние компоненты работают на React / Redux с Firebase и соединение API с Google Maps. Определенно отличный пример чего-то достаточно простого для начинающих учиться и учиться.
3. Флипкарт
И наконец, самое удивительное, давайте посмотрим Сайт флипкарта, Этот полноценный интернет-магазин, по сути, является прогрессивным веб-приложением.
Он полностью отзывчив и загружает страницы динамически. URL-адреса страниц добавляются в браузер, поэтому вы можете копировать / вставлять их и делиться ими, как на обычном веб-сайте.

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

И, хотя я не смог найти репозиторий для всего исходного кода Flipkart, есть Страница флипкарта на GitHub с меньшими фрагментами кода от их команды разработчиков.
Учиться больше
Прогрессивные веб-приложения невероятно популярны и, несомненно, наберут силу, поскольку все больше разработчиков переходят на собственные / гибридные приложения.

Существует ежегодный саммит под названием Progressive Web App Summit, и они публикуют видео на ютубе Вы можете смотреть бесплатно. Это отличный способ получить некоторые профессиональные знания, не платя за билет.

Но, если вы ищете более подробные руководства по кодированию PWA, обязательно ознакомьтесь со следующими руководствами:

Читайте также: Лучшие практики для веб-дизайнеров: адаптивные макеты или собственные приложения? [Op-Ed]