AIKraft/AI/Войти
AIKraft/Skills/Разработка PWA

Разработка PWA

Progressive Web App development guidelines covering service workers, caching strategies, offline functionality, and installability

mindrally official Разработка

Что делает навык

Направляет разработку Progressive Web App с приоритетом на работу офлайн, включая настройку манифеста, сервис-воркеров и стратегий кэширования. Обеспечивает быструю загрузку, плавную производительность и нативный пользовательский опыт. Позволяет приложению работать без подключения к сети и синхронизировать данные при восстановлении связи.

Когда применять

  • Создание веб-приложения, доступного для установки на устройства и работающего без интернета.
  • Реализация кэширования статических ресурсов и динамического контента для ускорения загрузки.
  • Обеспечение фоновой синхронизации данных и отправки push-уведомлений.
  • Настройка обработки ошибок сети и отображения офлайн-индикаторов пользователю.

Как работает

  1. Создать файл web app manifest с указанием имени, иконок, цветов и start_url.
  2. Зарегистрировать service worker в основном скрипте приложения через navigator.serviceWorker.register.
  3. Реализовать события install, activate и fetch в sw.js для кэширования статических активов и управления версиями.
  4. Применить стратегии кэширования (Cache First, Network First, Stale While Revalidate) для разных типов запросов.
  5. Настроить Background Sync для отложенной отправки данных и обработчики событий online/offline.
  6. Реализовать запрос разрешения на push-уведомления и их отображение через service worker.

Примеры запросов агенту

Разработай манифест и сервис-воркер для PWA с офлайн-страницей.
Реализуй стратегию кэширования Stale While Revalidate для динамического контента.
Настрой фоновую синхронизацию данных при восстановлении интернет-соединения.

Что понадобится

  • HTTPS-соединение
  • Поддержка Service Worker в браузере
  • Ключ VAPID для push-уведомлений

Описание составлено по SKILL.md навыка, сверено 05.10.2026.

Как подключить

1Скачать навык
# возьмите папку навыка «pwa-development» из репозитория: # https://github.com/mindrally/skills
2Положить папку с SKILL.md к навыкам ассистента
# положите папку навыка туда, где ассистент ищет skills: cp -r pwa-development/ ~/.claude/skills/pwa-development/

Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.