Учим PWA¶
Курс, в котором рассматриваются все аспекты разработки современных прогрессивных веб-приложений.
Добро пожаловать на сайт "Изучение прогрессивных веб-приложений"!¶
Добро пожаловать на курс "Изучение прогрессивных веб-приложений"!
В этом курсе рассматриваются основы разработки прогрессивных веб-приложений в виде простых и понятных фрагментов. В следующих модулях вы узнаете, что такое прогрессивное веб-приложение, как его создать или обновить существующий веб-контент, а также как добавить все компоненты для автономного, устанавливаемого приложения. Для навигации по модулям используйте панель меню.
Вы узнаете об основах PWA, таких как манифест веб-приложения, рабочие службы, о том, как проектировать с учетом особенностей приложения, как использовать другие инструменты для тестирования и отладки PWA. После этих основ вы узнаете об интеграции с платформой и операционной системой, о том, как повысить удобство установки и использования PWA, а также о возможности работы в автономном режиме.
Каждый модуль включает интерактивные демонстрации и задания для самопроверки знаний. Вы сможете протестировать и опробовать демо-версии на своем мобильном телефоне, планшете или ноутбуке, играя с кодом, чтобы понять основы того, что представляет собой Progressive Web App.
Этот курс создан как для начинающих, так и для опытных веб-разработчиков. Вы можете пройти весь курс от начала до конца, чтобы получить общее представление о PWA сверху донизу, или использовать его в качестве справочника по конкретным темам. Для тех, кто только начинает заниматься веб-разработкой, потребуются знания HTML, CSS и JavaScript. Посмотрите учим CSS, учим HTML и JavaScript.
Вот что вы узнаете:
-
Прогрессивные веб-приложения
Прогрессивные веб-приложения (PWA) — это веб-приложения, созданные и усовершенствованные с помощью современных API-интерфейсов, обеспечивающие расширенные возможности, надежность и удобство установки, позволяющие работать с любым человеком, в любом месте, на любом устройстве, и все это на единой кодовой базе.
-
Начало работы
Если вы хотите создать прогрессивное веб-приложение, то, возможно, задаетесь вопросом, с чего начать, можно ли модернизировать сайт до PWA, не начиная с нуля, или как перейти от приложения для конкретной платформы к PWA. Данная статья поможет вам ответить на эти вопросы.
-
Основы
Все прогрессивные веб-приложения по своей сути являются современными веб-сайтами, поэтому важно, чтобы ваш сайт имел прочную основу в области отзывчивого дизайна, мобильных устройств и всего остального, внутреннего дизайна и веб-производительности.
-
Дизайн приложений
Одним из ключевых отличий Progressive Web Apps от классических веб-сайтов и веб-приложений является возможность установки. Это позволяет создать автономный опыт, более интегрированный в платформу и операционную систему. Установка обеспечивает новую гибкость и новую ответственность, поскольку вокруг нашего контента не будет пользовательского интерфейса браузера.
-
Ресурсы и данные
Прогрессивное веб-приложение — это веб-сайт, все ресурсы которого такие же, как и в Интернете, но с новыми инструментами, позволяющими быстро загружать эти ресурсы в режиме онлайн и делать их доступными в режиме офлайн.
-
Сервис-воркеры
Сервис-воркеры являются фундаментальной частью PWA. Они обеспечивают быструю загрузку (независимо от сети), автономный доступ, push-уведомления и другие возможности.
-
Кэширование
Вы можете использовать API Cache Storage для загрузки, хранения, удаления или обновления ресурсов на устройстве. Затем эти ресурсы могут обслуживаться на устройстве без необходимости сетевого запроса.
-
Обслуживание
Используя событие fetch сервис-воркера, можно перехватывать сетевые запросы и обслуживать ответ, используя различные техники.
-
Workbox
Workbox представляет собой набор модулей, упрощающих такие распространенные виды взаимодействия сервис-воркеров, как маршрутизация и кэширование. Каждый модуль посвящен определенному аспекту разработки сервис-воркеров. Цель Workbox — максимально упростить использование сервис-воркеров, обеспечив при этом гибкость, позволяющую при необходимости учитывать сложные требования приложений.
-
Оффлайн данные
Для создания надежной автономной работы необходимо реализовать управление хранением данных. В этом могут помочь такие инструменты, как IndexedDB, Cache, Storage Manager, Persistent Storage и Content Indexing.
-
Установка
Установленные приложения легко доступны и могут использовать преимущества некоторых более глубоких интеграций с ОС. Узнайте, как сделать PWA устанавливаемым и получить эти преимущества.
-
Манифест Web-приложения
Манифест веб-приложения — это JSON-файл, определяющий, как PWA должен восприниматься в качестве установленного приложения, включая внешний вид и базовое поведение в операционной системе.
-
Запрос на установку
Для сайтов, удовлетворяющих критериям установки PWA, браузер запускает событие, побуждающее пользователя к установке. Хорошая новость заключается в том, что вы можете использовать это событие для настройки подсказки и приглашения пользователей установить ваше приложение.
-
Обновление
Скорее всего, ваш PWA нуждается в обновлении. В этой главе представлены инструменты для обновления различных частей PWA, от ресурсов до метаданных.
-
Улучшения
Пользователь ожидает хорошего опыта. В этой главе мы рассмотрим, как улучшить PWA с помощью заставки, ярлыков приложений, а также как работают сессии.
-
Обнаружение
Определение того, как пользователи взаимодействуют с вашим приложением, полезно для настройки и улучшения пользовательского опыта. Например, вы можете проверить, установлено ли уже ваше приложение на устройстве пользователя, и реализовать такие функции, как перенос навигации в отдельное приложение из браузера.
-
Интеграция с ОС
Теперь ваше PWA работает вне браузера. В этой главе рассматривается дальнейшая интеграция с операционной системой после того, как пользователи установят ваше приложение.
-
Управление окнами
PWA вне браузера управляет собственным окном. В этой главе мы рассмотрим API-интерфейсы и возможности управления окном в операционной системе.
-
Экспериментальные возможности
Существуют возможности PWA, которые еще находятся в стадии разработки, и вы можете принять участие в их развитии. В этой главе вы узнаете о проекте Fugu, о том, как подписаться на пробную версию и как использовать экспериментальные API.
-
Инструменты и отладка
Мы рассмотрим доступные инструменты для разработки, отладки и тестирования прогрессивных веб-приложений.
-
Архитектура
При разработке PWA необходимо принять ряд решений, например, создать одностраничное или многостраничное приложение, разместить его в корне домена или в папке.
-
Управление сложностью
Простота веб-приложения может быть удивительно сложной. В этом модуле вы узнаете, как веб-интерфейсы работают с потоками и как это можно использовать для таких распространенных паттернов PWA, как управление состоянием.
-
Возможности
PWA привязаны не только к экрану. В этой главе речь пойдет о возможностях, которыми PWA обладают сегодня с точки зрения аппаратного обеспечения, сенсоров и использования платформы.
Авторы
Этот курс был написан Максимилиано Фиртманом при участии Рэйчел Эндрю, Адриана Джара, Пит ЛеПейдж, Сэм Ричард, и Джо Медли.
Перевод
Перевод этого учебника сделан благодаря подписчикам на Бусти.
Источник — Learn PWA