progressive-web-app · davila7 — скилл для Claude Code
Инструктирует Claude Code по созданию Progressive Web Apps: настройке манифеста, сервисного воркера, офлайн-экрана и диалога установки на экран устройства.
npx claude-code-templates@latest --skill web-development/progressive-web-appЧто делает progressive-web-app
Скилл задаёт правила для сборки PWA в веб-проектах. Claude Code учится генерировать минимальный стек файлов: корневой index.html, манифест manifest.json, сервисный воркер sw.js, скрипт регистрации app.js и запасную страницу offline.html. Агент настраивает перехват сетевых запросов и кеширование ключевых ресурсов приложения.
В коде app.js перехватывается событие beforeinstallprompt, чтобы показывать отдельную кнопку для ручной установки сайта на домашний экран. Для иконок прописывается назначение maskable, а для iOS задаются отдельные мета-теги apple-mobile-web-app-capable. Если пропустить создание страницы offline.html, установка PWA завершится ошибкой. В продакшене сервисные воркеры строго требуют HTTPS, хотя локальная разработка запускается и на localhost.
Какие задачи решает
- Настроить манифест веб-приложения
manifest.jsonс адаптивными иконками - Реализовать кеширование каркаса страниц через сервисный воркер
sw.js - Перехватить системный диалог добавления сайта на экран смартфона
- Подготовить резервную страницу
offline.htmlдля сетевых сбоев
Примеры запросов агенту
- Сделай наш веб-сайт устанавливаемым как PWA и настрой кеширование статики
- Добавь
manifest.jsonи сервисный воркер с поддержкой офлайн-режима - Настрой кнопку добавления на домашний экран через событие
beforeinstallprompt
Как установить progressive-web-app
1Через claude-code-templates
npx claude-code-templates@latest --skill web-development/progressive-web-app2Через Skills CLI (Vercel)
npx skills add davila7/claude-code-templates --skill progressive-web-app -a claude-code3Вручную: положить файлы
~/.claude/skills/progressive-web-app/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/progressive-web-app/
Вручную: положить файлы
.agents/skills/progressive-web-app/SKILL.mdДля всех проектов — ~/.agents/skills/
Вручную: положить файлы
.cursor/skills/progressive-web-app/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install davila7/claude-code-templates progressive-web-app2Вручную: положить файлы
.github/skills/progressive-web-app/SKILL.mdКомандой платформы
gemini skills install https://github.com/davila7/claude-code-templates --path cli-tool/components/skills/web-development/progressive-web-appВручную: положить файлы
.devin/skills/progressive-web-app/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Claude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о progressive-web-app
Как установить progressive-web-app в Claude Code?
Выполните в терминале команду npx claude-code-templates@latest --skill web-development/progressive-web-app.
Что делает скилл progressive-web-app?
Он обучает ассистента генерировать архитектуру Progressive Web App: конфигурацию manifest.json, логику кеширования в сервисном воркере и страницу офлайн-доступа.
Почему для работы обязательно нужен файл offline.html?
Отсутствие файла offline.html приведёт к ошибке установки PWA, так как этот документ входит в обязательный базовый список кеша сервисного воркера.
Похожие скиллы
Все скиллы по теме «Фронтенд и UI» →Сначала — progressive-web-app от других авторов.
