React + Vite: Создаём PWA за 20 минут | vite-plugin-pwa

В этом видео мы разберёмся, как создать PWA (Progressive Web App) используя Vite, плагин vite-plugin-pwa и React. Вы узнаете, зачем нужен Service Worker, как настроить manifest.json и robots.txt, а также как создать offline-ready приложение с эффективным кэшированием медиафайлов.

Мы также разберём процесс деплоя проекта на хостинг Netlify, чтобы обеспечить безопасное HTTPS-соединение — необходимое условие для работы PWA.

И самое главное — вы узнаете, что такое Progressive Web App и почему эта технология так популярна в современном веб-разработке.

Таймкоды

00:00 Введение
01:06 Создаём приложение с помощью Vite
02:02 Устанавливаем плагин
03:03 Добавляем плагин
03:26 Настраиваем плагин
04:42 Начинаем описывать manifest
08:23 Добавляем скриншоты для пользователя
10:52 Описываем robots.txt
11:26 Добавляем Service Worker
12:30 Обсуждаем деплой приложения
13:21 Делаем сборку проекта
13:53 Загружаем на Netlify
14:51 Тестируем установку нашего приложения
15:23 Проверяем работу на телефоне
16:07 Проверяем работу без интернета
16:57 Делаем новую версию для проверки автообновления
18:17 Смотрим автообновление страницы при новой версии
18:59 Подводим итоги

#programming #gorbatkoff #vite-plugin-pwa