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