egghead
Проект egghead.io представляет огромный выбор курсов и скринкастов для разработчиков любого уровня и профессии.
Прогрессивные веб-приложения в React с create-react-app
Progressive Web Apps in React with create-react-app
★5 (всего оценок - 22)
Продолжительность
0 ч 46 мин
Категория
Progressive Web App (PWA)Количество уроков
20 Видео
Дата добавления
5 февр. 2019 г., 10:49
Язык
Английский
Дата обновления
29 апр. 2026 г., 02:18
Прогрессивные веб‑приложения (PWA) в сочетании с React и create-react-app позволяют создавать быстрые, надежные и удобные приложения, которые могут работать офлайн, устанавливаться на устройство и использовать возможности нативных API. Этот курс поможет вам шаг за шагом освоить создание PWA и применить современные подходы на практике.
Что вы изучите в этом курсе
Материал построен так, чтобы вы не просто узнали теорию Progressive Web Apps, но и создали полноценное приложение — от разработки до деплоя.
Основы Progressive Web Apps
- Как работают PWA и почему они важны для современного веба
- Ограничения PWA на разных устройствах и браузерах
- Ключевые элементы: Service Worker, манифест, кеширование
Создание фронтенда с помощью create-react-app
- Подготовка проекта и настройка структуры
- Активация и настройка Service Worker
- Кеширование ресурсов и обеспечение офлайн‑режима
Работа с бэкендом на Node.js
Вы создадите простой backend для хранения данных и научитесь объединять frontend и backend в удобный рабочий процесс разработки.
Сохранение данных в офлайн‑режиме
На практическом примере приложения для заметок вы узнаете:
- как сохранять записи вне сети
- как синхронизировать данные при восстановлении соединения
- как работать с локальными хранилищами браузера
Интеграция нативных функций устройства
- Доступ к камере через браузерные API
- Обработка фото в вашем приложении заметок
- Пользовательский опыт при установке приложения на главный экран
Настройка внешнего вида PWA
Вы узнаете, как настроить элементы интерфейса, которые превращают веб‑приложение в полноценное «приложение» на телефоне:
- создание иконок приложения
- добавление splash‑screen
- управление строкой состояния и цветовыми темами
Деплой приложения на Heroku
Финальным шагом станет подготовка продакшн‑версии и развертывание готового PWA на Heroku. После этого ваше приложение будет доступно пользователям как онлайн, так и в офлайн‑режиме.
Полезные материалы и репозиторий
Все исходники проекта доступны по ссылке:
https://github.com/nanohop/todo-pwa/
Название каждой ветки соответствует этапу или уроку курса, что облегчает навигацию и повторение пройденного материала.
- Урок 1.00:01:44Course Introduction: Progressive Web Apps in React with create-react-app
- Урок 2.00:03:49Create a Progressive Web App with React and Register a Service Worker
- Урок 3.00:03:41View the Service Worker and the Cache, and Debug a PWA with Chrome’s Dev Tools
- Урок 4.00:04:04Use a Custom Service Worker in a create-react-app PWA without Ejecting
- Урок 5.00:01:22Pre-cache Static Resources with Workbox and View a React PWA Offline
- Урок 6.00:02:02Listen for `install` and `activate` PWA Events in a Service Worker
- Урок 7.00:02:42Cache Third Party Resources from a CDN in a React PWA
- Урок 8.00:01:07Cache JSON Data in a React PWA with Workbox, and Display it while Offline
- Урок 9.00:01:43Add an Offline Status Indicator to a PWA with React
- Урок 10.00:02:34Show an Error when a POST or DELETE Fails in an Offline PWA
- Урок 11.00:01:34Add a Custom App Icon to a PWA built with create-react-app
- Урок 12.00:01:32Change the Name and Short Name of a PWA built with create-react-app
- Урок 13.00:01:50Add a PWA to the Home Screen of an iOS or Android Device, and the Chrome App Home Screen
- Урок 14.00:01:31Add Navigation Elements in React to a PWA in Standalone Mode
- Урок 15.00:04:03Access the Camera in a PWA built with React
- Урок 16.00:04:05Add Push Notifications to a PWA with React in Chrome and on Android
- Урок 17.00:01:06Disable Text Selection and Touch Callouts in a PWA on iOS
- Урок 18.00:02:12Change the Status Bar Color on iOS and Android in a PWA
- Урок 19.00:01:39Customize the Splash Screen of a PWA built with create-react-app
- Урок 20.00:01:43Do a PWA Audit with Lighthouse using Chrome Dev Tools
Автор - egghead
Комментарии