App Shell, Lighthouse и Workbox

Урок собирает три практических темы: архитектуру App Shell, аудит через Lighthouse и инструмент Workbox.

App Shell — минимальный набор HTML, CSS и JS, который рисует «каркас» интерфейса и кешируется отдельно от контента.

Архитектура App Shell

Идея App Shell: разделить приложение на оболочку (шапка, навигация, базовая разметка, стили) и контент (данные, которые меняются). Оболочку кешируем намертво на install — она отдаётся мгновенно при каждом заходе, включая офлайн. Контент подгружаем из сети или кеша поверх оболочки.

+-----------------------------+
|  Shell: шапка, меню, стили  |  <- кешируется (cache-first)
+-----------------------------+
|                             |
|  Контент: данные из сети    |  <- network-first / SWR
|                             |
+-----------------------------+

За счёт этого пользователь видит интерфейс почти мгновенно (оболочка из кеша), а данные «доезжают» отдельно. Так устроены многие быстрые PWA, включая Twitter Lite из второго урока.

Аудит через Lighthouse

Lighthouse — встроенный в Chrome DevTools инструмент аудита. Он проверяет сайт по нескольким категориям, включая Performance и (раньше отдельную) проверку PWA: есть ли манифест, Service Worker, HTTPS, корректные иконки, отзывчивость, работает ли офлайн.

Запуск: DevTools → вкладка Lighthouse → выбрать категории → Analyze. Отчёт подсветит, чего не хватает до полноценного PWA, и даст конкретные рекомендации. Это первый инструмент, через который стоит прогнать приложение перед релизом.

Workbox — меньше ручного кода

Писать Service Worker вручную (кеши, версии, стратегии, чистка) — кропотливо и легко ошибиться. Workbox — официальная библиотека от Google, которая закрывает рутину: готовые стратегии, прекеширование с версионированием, маршрутизация запросов.

import { precacheAndRoute } from 'workbox-precaching';
import { registerRoute } from 'workbox-routing';
import { CacheFirst, NetworkFirst } from 'workbox-strategies';

precacheAndRoute(self.__WB_MANIFEST);  // оболочка с версиями

registerRoute(({ request }) => request.destination === 'image',
  new CacheFirst());                   // картинки — из кеша

registerRoute(({ url }) => url.pathname.startsWith('/api/'),
  new NetworkFirst());                 // API — сначала сеть

Помечено language-text: это сборочный код Workbox с импортами модулей, он не исполняется в браузерной песочнице. Workbox сам версионирует прекеш и чистит старое — снимая ту самую боль устаревшего кеша из прошлого урока.

Как работает под капотом прекеширование Workbox

На этапе сборки инструмент Workbox сканирует ваши файлы и для каждого считает хеш содержимого, формируя список (self.__WB_MANIFEST). Когда файл меняется — меняется его хеш, и Workbox понимает, что нужно обновить именно его, а не весь кеш. Это аккуратнее ручного версионирования: вам не нужно вручную поднимать app-v1 → app-v2 и помнить, что чистить.

Частые ошибки

• Кешировать весь сайт как оболочку. App Shell — это каркас, а не контент; данные должны обновляться.
• Релизить без Lighthouse. Легко упустить отсутствующую иконку или сломанный офлайн.
• Писать сложный Service Worker вручную. Для нетривиальных проектов Workbox надёжнее и короче.

Итоги

• App Shell разделяет кешируемую оболочку и обновляемый контент — отсюда мгновенный старт.
• Lighthouse аудитит PWA: манифест, Service Worker, офлайн, HTTPS, производительность.
• Workbox даёт готовые стратегии и автоматическое версионирование прекеша.
• Прогоняйте приложение через Lighthouse перед каждым релизом.