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

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

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

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

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

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

Прогрессивные веб-приложения (или PWA) воспользоваться API-интерфейсами веб-браузера создавать собственные приложения прямо в браузере на любом устройстве.

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

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

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

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

Давайте углубимся в основы прогрессивных веб-приложений и узнаем, что их заставляет.

Сервисные работники

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

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

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

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

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

За руководства для начинающих а также подробные фрагменты кода, Я специально рекомендую эти ресурсы:

• Начало работы с сервисными работниками
• Начало работы с сервисными работниками
• Образец сервисного работника: образец пользовательской автономной страницы

Оболочка приложения

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

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

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

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

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

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

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

Онлайн и оффлайн поддержка

Большинство родных приложений работать нормально без интернета. Прогрессивные веб-приложения предназначены для того же поведения.

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

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

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

PWA всегда требуется поддержка в автономном режиме через Service Worker API, чтобы они могли работать в состояниях низкого соединения. Lighthouse - лучший способ проверить автономную поддержку, а также множество других функций..

Живые примеры

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

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

1. Конвертер валют

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

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

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

2. Английские Акценты

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

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

Внутренние органы работают на Реагировать / Redux с Firebase и API-соединение с Google Maps. Определенно отличный пример чего-то достаточно простого для начинающих учиться и учиться.

3. Pokedex.org

Еще один довольно простой PWA это Приложение Pokedex созданный Ноланом Лоусоном. Он также опубликовал этот код свободно на GitHub, так что это нам еще один проект, который стоит присматривать и изучать.

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

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

4. Флипкарт

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

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

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

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

Учиться больше

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

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

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

• Руководство для начинающих по прогрессивным веб-приложениям
• Создайте свое первое прогрессивное веб-приложение с React
• Создание прогрессивного веб-приложения с помощью Polymer