Веб-разработка

Учебник PWA для начинающих

20 уроков · 6 разделов · бесплатно, без регистрации

Начать с первого урока

Прогрессивное веб-приложение (PWA) — это сайт, который ведёт себя как нативное приложение: устанавливается на домашний экран, работает офлайн, шлёт push-уведомления и быстро грузится. В этом курсе вы разберётесь, из чего состоит PWA: веб-манифест, Service Worker как прокси между приложением и сетью, Cache API и стратегии кеширования, офлайн-страница, установка через beforeinstallprompt, push-уведомления, фоновая синхронизация и хранилища. Мы разберём жизненный цикл Service Worker, архитектуру App Shell, аудит через Lighthouse, инструмент Workbox, ограничения PWA (особенно на iOS) и типичные ошибки вроде «кеш не обновляется». Курс для тех, кто знает базовый HTML/CSS/JavaScript и хочет превратить обычный сайт в устанавливаемое приложение.

Курс «PWA: прогрессивные веб-приложения» состоит из 6 разделов и 20 уроков: Что такое PWA и зачем, Веб-манифест, Service Worker: основы, Кеширование и офлайн, Установка и нативные возможности и Продвинутое, пределы и итоги. Уроки идут по порядку — от основ к более сложным темам, в каждом есть объяснение с примерами, а в конце — вопросы для самопроверки. К урокам привязаны задачи с автоматической проверкой: прочитали тему — сразу закрепили её кодом.

Программа курса

  1. 1 Что такое PWA и зачем

    1. Что такое прогрессивное веб-приложение

      PWA — это веб-сайт, который ведёт себя как нативное приложение: устанавливается, работает офлайн, шлёт уведомления. Разбираем суть.

    2. Примеры PWA и бизнес-эффект

      Реальные примеры PWA: Twitter Lite, Starbucks, Pinterest. Почему компании выбирают PWA и какой эффект на метрики это даёт.

    3. Критерии PWA и роль HTTPS

      Какие критерии делают сайт устанавливаемым PWA: HTTPS, манифест, Service Worker, отзывчивость. Почему HTTPS обязателен.

  2. 2 Веб-манифест

    1. Структура manifest.json

      Из чего состоит веб-манифест PWA: поля name, short_name, icons, start_url, display, theme_color, background_color. Разбор по полям.

    2. Подключение манифеста и иконки

      Как подключить manifest.json к странице через link rel manifest, какие иконки и теги нужны, как настроить тему и иконку для iOS.

  3. 3 Service Worker: основы

    1. Что такое Service Worker

      Service Worker — фоновый скрипт-прокси между приложением и сетью. Работает в отдельном потоке, перехватывает запросы, без доступа к DOM.

    2. Регистрация Service Worker

      Как зарегистрировать Service Worker: navigator.serviceWorker.register, scope, расположение файла и проверка поддержки.

    3. Жизненный цикл: install, activate, fetch

      Жизненный цикл Service Worker: события install, activate, fetch. Что делать на каждом этапе, waitUntil, skipWaiting и clients.claim.

  4. 4 Кеширование и офлайн

    1. Cache API: основы

      Cache API в Service Worker: объект caches, открытие кеша, cache.put, cache.match, cache.addAll. Как хранятся пары запрос-ответ.

    2. Стратегии кеширования

      Стратегии кеширования PWA: cache-first, network-first, stale-while-revalidate, cache-only, network-only. Когда какую применять.

    3. Офлайн-режим и офлайн-страница

      Как реализовать офлайн-режим в PWA: кеш ассетов App Shell, запасная офлайн-страница и обработка отсутствия сети в Service Worker.

  5. 5 Установка и нативные возможности

    1. Установка на домашний экран (A2HS)

      Установка PWA: событие beforeinstallprompt, кастомная кнопка установки, метод prompt и Add to Home Screen на разных платформах.

    2. Push-уведомления

      Push-уведомления в PWA: Push API и Notification API, подписка через PushManager, разрешение пользователя и показ уведомлений.

    3. Фоновая синхронизация

      Background Sync в PWA: отложенная отправка данных при восстановлении сети, событие sync, регистрация задачи и обзор Periodic Sync.

  6. 6 Продвинутое, пределы и итоги

    1. Хранилища: IndexedDB и localStorage

      Хранилища данных в PWA: localStorage для мелочей, IndexedDB для структурированных данных, Cache API для ответов. Когда что использовать.

    2. Обновление SW и устаревший кеш

      Обновление Service Worker и проблема устаревшего кеша в PWA: версионирование кеша, очистка старого, skipWaiting и уведомление пользователя.

    3. App Shell, Lighthouse и Workbox

      Архитектура App Shell, аудит PWA через Lighthouse и библиотека Workbox для упрощения Service Worker и стратегий кеширования.

    4. Ограничения PWA и iOS

      Ограничения PWA: доступ к железу, фоновые задачи, push на iOS, отсутствие Background Sync. Что Safari поддерживает, а что нет.

    5. PWA vs нативное приложение

      Сравнение PWA и нативного приложения: установка, размер, офлайн, доступ к железу, магазины приложений, стоимость разработки.

    6. Типичные ошибки и чек-лист

      Типичные ошибки PWA: кеш не обновляется, неверный scope Service Worker, забыли HTTPS, нет офлайн-страницы. Итоговый чек-лист.