Прогрессивное веб-приложение (PWA) — это приложение, созданное с использованием технологий веб-платформы, но обеспечивающее взаимодействие с пользователем, аналогичное приложению для конкретной платформы.
Как и веб-сайт, PWA может работать на нескольких платформах и устройствах из одной кодовой базы. Как и приложение для конкретной платформы, его можно установить на устройство, работать в автономном режиме и в фоновом режиме, а также интегрировать с устройством и с другими установленными приложениями.
Гиды Эти руководства дают концептуальные объяснения различных аспектов PWA. Они предназначены для того, чтобы помочь вам понять, какие вещи возможны с PWA, и предоставить достаточно указателей, которые помогут вам понять, как их достичь.
Что такое прогрессивное веб-приложение? Введение в PWA, сравнение их с традиционными веб-сайтами и приложениями для конкретных платформ и описание их основных функций.
Возможность установки PWA Одним из определяющих аспектов PWA является то, что его можно установить на устройство, а затем представить пользователям как приложение для конкретной платформы, постоянную функцию их устройства, которую они могут запускать непосредственно из операционной системы, как и любое другое приложение. В этом руководстве мы рассмотрим, что означает «устанавливаемый», что должен предоставить PWA, чтобы его можно было установить, и как вы можете настроить процесс установки.
Установка и удаление веб-приложений В этом руководстве рассказывается, как пользователи могут устанавливать и удалять PWA на своих устройствах.
Офлайн и фоновая работа В этом руководстве мы представим набор технологий, которые позволяют PWA обеспечивать удобство работы пользователя, даже если устройство имеет прерывистое подключение к сети, и выполнять операции в фоновом режиме, даже когда основное приложение не запущено.
Кэширование Обзор API-интерфейсов, позволяющих PWA кэшировать ресурсы локально, и некоторых распространенных стратегий, используемых PWA для реализации автономных функций.
Лучшие практики для PWA PWA должны адаптироваться к различным браузерам и устройствам, быть доступными, иметь хорошую производительность и хорошо интегрироваться с операционной системой. В этом руководстве представлен список рекомендаций, которые помогут вам убедиться, что ваше PWA настолько хорошо, насколько это возможно.
Как Эти руководства содержат конкретные подробные инструкции о том, как реализовать определенные функции PWA.
Создать отдельное приложение Описывает, как указать, что PWA должен запускаться в отдельном выделенном окне при запуске, а не на вкладке браузера.
Определите значки вашего приложения Описывает, как определить собственный набор значков, которые будут использоваться при установке PWA на устройстве.
Настройте цвета вашего приложения Описывает, как установить цвета фона и темы для PWA.
Показать значки Описывает, как отобразить значок на значке PWA: например, чтобы пользователь знал, что он получил новые сообщения.
Предоставьте общие действия приложения в виде ярлыков Описывает, как предоставить общие действия для PWA, которые можно запустить из контекстного меню приложения операционной системы.
Делитесь данными между приложениями Описывает, как PWA могут обмениваться данными друг с другом с помощью механизма совместного использования приложений операционной системы.
Инициировать установку из PWA Описывает, как разработчики могут предоставить собственный пользовательский интерфейс, чтобы пригласить пользователей установить их PWA.
Свяжите файлы с вашим PWA Описывает, как вы можете создать связь между типами файлов и вашим PWA, чтобы, когда пользователь щелкает файл, запускалось ваше PWA для его обработки.
Учебники В этих руководствах вы создадите PWA с нуля. Учебники проходят этапы создания приложения от начала до конца, объясняя, как реализованы различные функции приложения.
Создание вашего первого PWA В этом учебном пособии для начинающих рассказывается о создании PWA для отслеживания менструальных циклов. Уроки включают в себя знакомство с HTML, CSS и JavaScript, необходимыми для создания полнофункционального веб-приложения, настройку среды тестирования и полные объяснения, помогающие учащемуся обновить веб-приложение до PWA; включая разработку и проверку манифеста, добавление работника службы и использование работника службы для удаления устаревших кешей.
Глубокое погружение в PWA В этом учебном пособии среднего уровня рассматривается создание PWA, в котором содержится информация об играх, представленных в категории A-Frame на конкурсе js13kGames 2017 . Это руководство включает в себя все основы создания PWA с дополнительными функциями, включая уведомления, push-уведомления и производительность приложения.
Ссылка Справочная документация по веб-технологиям, которые вы будете использовать для создания PWA.
Манифест веб-приложения Члены манифеста веб-приложения Разработчики могут использовать элементы манифеста веб-приложения для описания PWA, настройки его внешнего вида и более глубокой интеграции в операционную систему.
API сервис-воркеров Связь с приложением Следующие API-интерфейсы могут использоваться сервис-воркером для связи со связанным с ним клиентским PWA:
Client.postMessage() Позволяет сервисному работнику отправлять сообщение своему клиентскому PWA.
API широковещательного канала Позволяет сервисному работнику и его клиентскому PWA установить базовый двусторонний канал связи.
Автономная работа Сервисный работник может использовать следующие API, чтобы ваше приложение работало в автономном режиме:
Cache Механизм постоянного хранения для ответов HTTP, используемый для хранения ресурсов, которые можно повторно использовать, когда приложение находится в автономном режиме.
Clients Интерфейс, используемый для предоставления доступа к документам, которые контролируются сервис-воркером.
FetchEvent Событие, отправляемое в сервис-воркере с каждым HTTP-запросом, сделанным клиентским PWA. Событие можно использовать либо для отправки запроса на сервер в обычном режиме и сохранения ответа для использования в будущем, либо для перехвата запроса и немедленного ответа ранее кэшированным ответом.
Фоновая операция Следующие API-интерфейсы могут использоваться сервис-воркером для выполнения задач в фоновом режиме, даже если ваше приложение не запущено:
API фоновой синхронизации Способ отложить выполнение задач в сервис-воркере при стабильном сетевом соединении.
API периодической веб-синхронизации в фоновом режиме Способ регистрации задач, которые будут запускаться в сервис-воркере через определенные промежутки времени с сетевым подключением.
API фоновой выборки Метод, с помощью которого работник службы может управлять загрузками, которые могут занимать значительное время, например видео- или аудиофайлы.
Другие веб-API ИндекседБД API-интерфейс хранилища на стороне клиента для значительных объемов структурированных данных, включая файлы.
API бейджей Метод установки значка на значке приложения, обеспечивающий уведомление с низким уровнем отвлечения внимания.
API уведомлений Способ отправки уведомлений, которые отображаются на уровне операционной системы.
API веб-ресурсов Механизм обмена текстом, ссылками, файлами и другим содержимым с другими приложениями, выбранными пользователем на своем устройстве.
API наложения оконных элементов управления API для PWA, установленных в настольных операционных системах, который позволяет скрывать строку заголовка окна по умолчанию, позволяя отображать приложение по всей поверхности окна приложения.