PWA за 30 минут. Будущее веб-разработки
Мобильное приложение на чистом JavaScript? Разбираемся с технологиями #PWA (Progressive Web Application), создаем своё прогрессивное веб-приложение. Подробный урок с рабочим кодом от #BlondieCode.
00:00 - 02:05 - Длинное нудное вступление
02:05 - 03:41 - Стек технологий
03:41 - 04:12 - Почему Push-уведомления - зло
04:12 - 05:07 - Что такое Servise Worker
05:07 - 07:07 - Создаём Manifest.json и иконки
07:07 - 11:16 - HTML-страница с котиками и CSS
11:16 - 13:19 - Проверка в Google Lighthouse и начало превращения в PWA
13:19 - 14:48 - Скрипт для регистрации Servise Worker
14:48 - 17:48 - Обработка событий Servise Worker
17:48 - 25:12 - Логика кэширования ресурсов
25:12 - 27:26 - Заглушки для отображения ресурсов вне кэша оффлайн
27:26 - 27:48 - Финальный результат
27:48 - Выводы
// -------- Ссылки на материалы -------- //
ИСХОДНИКИ ПРОЕКТА - https://github.com/droganaida/kitty-pwa
Генератор манифеста и иконок - https://app-manifest.firebaseapp.com/
Поддержка serviceWorker - https://caniuse.com/#feat=serviceworkers
Инструменты для анализа скорости сайта (видео) - • Инструменты для анализа скорости сайт...
Нативные переменные в CSS (видео) - • Нативные переменные в CSS. Примеры ис...
// ------------------------------------------------------------------------ //
// -------- Присоединиться к комьюнити -------- //
// ------------------------------------------------------------------------ //
➣ Telegram --- https://t.me/joinchat/HOEP30yXRyBQp4e...
➣ GitHub --- https://github.com/droganaida
➣ Facebook --- / blondiecode
➣ Coub --- https://coub.com/aida-drogan
// ------------------------------------------------------------------------ //
//------------ Поблагодарить за видео ----------------- //
// ------------------------------------------------------------------------ //
➣ Кинуть монетку на корм коту --- https://www.paypal.com/cgi-bin/webscr...
➣ Купить прикольную футболку с принтом из видосиков --- https://www.teepublic.com/user/drogan...
//-----------------------------------------------//
Больше видео на тему IT можно найти по тегу #ityoutubersru