Прогрессивные веб-приложения в React с create-react-app - Видеоуроки

Progressive Web Apps in React with create-react-app
Duration 00:46:03
Открыть все курсы от egghead

Progressive Web Apps in React with create-react-app - Полный список уроков

Развернуть / Свернуть
  • Урок 1. Course Introduction: Progressive Web Apps in React with create-react-app 00:01:44
  • Урок 2. Create a Progressive Web App with React and Register a Service Worker 00:03:49
  • Урок 3. View the Service Worker and the Cache, and Debug a PWA with Chrome’s Dev Tools 00:03:41
  • Урок 4. Use a Custom Service Worker in a create-react-app PWA without Ejecting 00:04:04
  • Урок 5. Pre-cache Static Resources with Workbox and View a React PWA Offline 00:01:22
  • Урок 6. Listen for `install` and `activate` PWA Events in a Service Worker 00:02:02
  • Урок 7. Cache Third Party Resources from a CDN in a React PWA 00:02:42
  • Урок 8. Cache JSON Data in a React PWA with Workbox, and Display it while Offline 00:01:07
  • Урок 9. Add an Offline Status Indicator to a PWA with React 00:01:43
  • Урок 10. Show an Error when a POST or DELETE Fails in an Offline PWA 00:02:34
  • Урок 11. Add a Custom App Icon to a PWA built with create-react-app 00:01:34
  • Урок 12. Change the Name and Short Name of a PWA built with create-react-app 00:01:32
  • Урок 13. Add a PWA to the Home Screen of an iOS or Android Device, and the Chrome App Home Screen 00:01:50
  • Урок 14. Add Navigation Elements in React to a PWA in Standalone Mode 00:01:31
  • Урок 15. Access the Camera in a PWA built with React 00:04:03
  • Урок 16. Add Push Notifications to a PWA with React in Chrome and on Android 00:04:05
  • Урок 17. Disable Text Selection and Touch Callouts in a PWA on iOS 00:01:06
  • Урок 18. Change the Status Bar Color on iOS and Android in a PWA 00:02:12
  • Урок 19. Customize the Splash Screen of a PWA built with create-react-app 00:01:39
  • Урок 20. Do a PWA Audit with Lighthouse using Chrome Dev Tools 00:01:43

Прогрессивные веб-приложения (PWA) позволяют пользователю использовать ваше веб-приложение в Интернете или в автономном режиме и позволяют ему устанавливать приложение на свое устройство iOS или Android, как собственное приложение. Звучит отлично, правда? Но может быть сложно правильно настроить PWA, и не каждая функция работает на каждом браузере или устройстве.

В этом курсе мы создадим онлайн / офлайн приложение для создания заметок. Мы будем использовать create-react-app для создания внешнего интерфейса и node.js для создания простого внутреннего интерфейса. Мы начнем с того, что убедимся, что приложение может отображаться в автономном режиме с использованием кэшированных ресурсов, и узнаем, как сохранить данные, пока приложение находится в автономном режиме. Мы также будем взаимодействовать с собственными функциями, такими как камера, и узнаем, как разрешить пользователям устанавливать приложение на домашнем экране телефона. Затем мы настроим внешний вид приложения, включая значок приложения, заставку и строку состояния телефона.

Наконец, мы развернем производственное приложение на heroku. К концу этого курса у вас будет все необходимое для создания Progressive Web App с React.

https://github.com/nanohop/todo-pwa/

Название ветки соответствует названию урока.

Твоя оценка

5 0
Следи за последними обновлениями и новостями в нашем coursehunter-club.net (Ex coursehunters.club), или вступай в наш канал telegram.

Комментарии

Похожие курсы

12-06-2018 en 179 уроков
udemy Progressive Web Apps (PWA) - From Beginner to Expert
Узнайте, как обеспечить лучший пользовательский опыт с использованием лучших веб-технологий. Прогрессивные веб-приложения - это просто веб-сайты, которые постепенно становятся приложениями. Но как это происходит? Требуются опытные разработчики, которые понимают новый способ создания быстрых, надежных и привлекательных веб-сайтов. В этом курсе вы узнаете, что такое прогрессивные веб-приложения, зачем их нужно осваивать и почему ваши...
Duration 19:46:59
3 0
21-11-2018 en 180 уроков
udemy Progressive Web Apps (PWA) - The Complete Guide
Создайте прогрессивное веб-приложение (PWA), которое будет выглядеть как приложение для iOS и Android, используя DeviceCamera, Push Notifications и многое другое. Прогрессивные веб-приложения (PWA) - еще одна важная вещь в веб-разработке, поскольку они позволяют мобильным пользователям не устанавливать приложение из магазина appstore или playmarket.
Duration 13:41:14
27 2
30-11--0001 en 13 уроков
frontendmasters Progressive Web Applications and Offline
Прогрессивные веб-приложения (Progressive Web Applications) становятся супергероями, когда они могут, при этом обеспечивая отличный базовый опыт в менее современных браузерах. Они надежные, быстрые, привлекательные, и хотя они могут делать многие вещи, которые пользователи ожидают от родных приложений, они не занимают много места или требуют длительного процесса установки.


В этом семинаре мы начнем с «классического»...
Duration 13:03:51
13 0
14-05-2018 en 77 уроков
udemy Progressive Web App Development: A Complete Guide: 2-in-1
Упростите разработку и развертывание приложений, создав приложения с улучшенными возможностями.Технология веб-разработки продвигается очень быстрыми темпами с выпуском новых инструментов и технологий.Благодаря этому всестороннему учебному курсу «2 в 1» вы узнаете все, что вам нужно, о необходимых инструментах, необходимых для того, чтобы стать лучшим веб-разработчиком. Кроме того, вы можете создавать открытые и привлекательные...
Duration 09:29:35
2 2

Последнее добавленное

Введение в Python разработку

Введение в Python разработку

en
Этот курс предназначен для обучения программированию с использованием Python. Мы рассмотрим строительные блоки языка, основы программирования, как использовать стандартную библиотеку, сторонние пакеты и как создавать проекты Python. В конце концов, вы должны понимать, как программировать.
Профессиональный облачный разработчик Google Cloud Certified

Профессиональный облачный разработчик Google Cloud Certified

en
Этот курс подготовит вас к сертификации Google Professional Cloud Developer, и все разделы основаны на общих целях, которые Google опубликовал для подготовки к экзамену. Мы также включили подробные пошаговые руководства и практические занятия, которые помогут закрепить концепции, которые мы...
Профессиональный облачный архитектор Google Cloud Certified (Ранний доступ)

Профессиональный облачный архитектор Google Cloud Certified (Ранний доступ)

en
Цель этого курса - подготовить вас к сдаче сертификации Google Cloud Certified Professional Cloud Architect certification. Мы достигнем этого с помощью широкого спектра уроков, практических демонстраций, лабораторных условий и практических вопросов в качестве многогранного подхода к подготовке.
AWS Advanced Networking Specialty

AWS Advanced Networking Specialty

en
Добро пожаловать на курс сертификации специалистов по продвинутым сетям AWS. Этот курс предназначен для того, чтобы дать вам концепции, практические занятия, практические экзамены и учебные пособия, необходимые для подготовки к экзамену. Хотя AWS больше не требует сертификации уровня Associate...
Автоматизация AWS с помощью Lambda, Python и Boto3

Автоматизация AWS с помощью Lambda, Python и Boto3

en
В этом курсе будет изучаться автоматизация AWS с использованием Lambda и Python. Мы будем использовать AWS SDK для Python, более известный как Boto3. Вы узнаете, как интегрировать Lambda со многими популярными сервисами AWS, такими как EC2, S3, SQS, DynamoDB и другими.
Постройте приложение Laravel с TDD

Постройте приложение Laravel с TDD

en
Пришло время взять методы, которые мы изучили в Laravel From Scratch, и эффективно использовать их при создании вашего первого реального приложения. Вместе мы будем использовать TDD для создания Birdboard - минимального, похожего на Basecamp, приложения для управления проектами.
Web Start

Web Start

ru
Хорошие новости - Codename 47 вернулся. Плохие новости - ничего нового он с собой не захватил. В этой части все те же уровни, для все то й же аудитории. Все надежды прошлой части развеялись в пух и прах. Если вы следили за приключениями лысого раньше, то эта часть врятли вас чем то...
Стилизация (стайлинг) NativeScript Core приложений

Стилизация (стайлинг) NativeScript Core приложений

en
Все о CSS в NativeScript Core. В этом курсе мы подробно изучим методы моделирования с помощью NativeScript Core. Мы узнаем, как использовать глобальные конструкции стилей NativeScript, а также как лучше подходить к разделению стилей на составные правила. Мы также рассмотрим использование стилей...
chat
logo