#006 — React ViewTransition + PWA у WEB

Stream #006

Дата: 19 червня 2026 | 19:00 London / 21:00 Kyiv
Формат: Дві доповіді · ~60 хвилин
Гість: Олександр Блажейко
YouTube: https://youtube.com/live/RJ9xqAfUl6M

Учасники

Олег Левченко — Senior Full Stack JavaScript Developer (React / Node.js / AWS)
The AA · Cardiff, UK
YouTube @zloyleva · itfriday.community

Олександр Блажейко — Software Development Engineer · Fullstack, 7+ років досвіду
Україна
LinkedIn · itvibe.party

Будує itvibe.party — платформу що поєднує чат, синхронний AI-перекладач і персонального AI-вчителя. Третій стрім поспіль — цього разу розбирає можливості PWA у сучасному вебі.

Ключові тези

Доповідь 1 — React ViewTransition · Олег Левченко

Браузерний document.startViewTransition() існує з 2022 (Chrome 111) — React <ViewTransition> бере всю складність на себе: сам встановлює view-transition-name, сам викликає API, батчить кілька паралельних setState в одну анімацію
Pitfall #1 — порядок у дереві: <ViewTransition> має бути найзовнішнішнім елементом; додавання <div> перед ним вимикає Enter/Exit анімацію — React бачить що зʼявився div, а не ViewTransition
Shared Element: однаковий name у двох різних місцях дерева → React розпізнає «той самий» елемент і анімує «переліт» між позиціями; унікальність name обовʼязкова — dev-режим попередить про колізію
List Reorder: key, а не name — name для shared element між різними деревами; key для елементів що переміщуються в межах одного списку
useEffect викликається тільки після завершення анімації — гарантія відсутності побічних ефектів під час переходу
CSS: enter="slide-in" → ::view-transition-new(.slide-in) — повний контроль над анімацією; JS: onEnter callback через Web Animations API з обовʼязковим cleanup (return () => anim.cancel())
Suspense + ViewTransition: перехід fallback → контент отримує cross-fade автоматично без жодного додаткового коду
React Router: prop viewTransition на <Link> — анімація переходів між сторінками без зайвого коду
Canary only (react@canary), тільки DOM; prefers-reduced-motion — не опція, це гігієна

Доповідь 2 — PWA у WEB · Олександр Блажейко

PWA = HTML/CSS/JS що поводиться як нативний додаток: встановлюється на пристрій, працює офлайн, отримує push-сповіщення — без магазину застосунків
Три обовʼязкові опори: Service Worker (перехоплює мережеві запити, кешує, офлайн), Web App Manifest (JSON з метаданими для встановлення), HTTPS (без нього SW і більшість API не активуються)
Service Worker lifecycle: install (pre-cache ресурсів) → activate (чистка застарілих кешів) → fetch (cache-first стратегія: спершу кеш, інакше мережа)
manifest.json: display: standalone прибирає адресний рядок; start_url — стартова сторінка; icons з purpose: "any maskable" для adaptive icons на всіх платформах
Бізнес-переваги: одна кодова база замість iOS + Android + Web; ~70% менше відмов завдяки швидкому старту; оновлення без ревʼю у store
PWA vs Нативний: є встановлення і офлайн, доступ до апаратури частковий — зате вартість розробки і час оновлення несумісно менші
whatpwacando.today — інтерактивний showcase, сам є PWA; показує наживо які API підтримує ваш браузер: камера, геолокація, Bluetooth, NFC, контакти, WebAuthn, push
Project Fugu — ініціатива Google/Microsoft/Intel щоб закрити розрив між вебом і нативом: File System Access, Web Bluetooth, WebUSB, Web Serial, Web HID, Web NFC, Badging API та десятки інших
itvibe.party — власний проєкт Олександра з PWA можливостями: чат + синхронний AI-перекладач + персональний AI-вчитель

Таймкоди

Будуть додані після стріму.

#006 — React ViewTransition + PWA у WEB ​

Учасники ​

Ключові тези ​

Доповідь 1 — React ViewTransition · Олег Левченко ​

Доповідь 2 — PWA у WEB · Олександр Блажейко ​

Таймкоди ​