Как пользоваться: Генератор PWA-манифеста
- Введите название приложения, короткое название для главного экрана (не более 12 символов), описание и стартовый URL.
- Выберите режим отображения: standalone для окна, похожего на приложение, а также цвета темы и фона для заголовка и экрана загрузки.
- Укажите, где лежат иконки (192 и 512 px, а также maskable-иконку), оставьте офлайн Service Worker включённым и выберите стратегию кэширования, подходящую вашему сайту.
- Скачайте ZIP, разместите файлы в корне сайта, добавьте теги
<head>и проверьте Chrome DevTools → Application → Manifest.
Что делает сайт устанавливаемым
- Сайт работает по HTTPS.
- Есть манифест веб-приложения с
nameилиshort_name,start_url, режимомdisplayотличным отbrowser, а также иконками размером не менее 192 px и 512 px. - Манифест подключён в
<head>страницы. Chrome больше не требует Service Worker для установки, но для работы офлайн он нужен.
Стратегии кэширования Service Worker
| Стратегия | Как отвечает | Подходит для |
|---|---|---|
| Network first | Сначала запрашивает сеть, а при отсутствии соединения берёт данные из кэша | Страниц (здесь всегда используется для HTML) |
| Stale-while-revalidate | Мгновенно отвечает из кэша и обновляет его в фоне | CSS, JS и изображений, которые время от времени меняются |
| Cache first | Использует кэш и обращается к сети, только если файла в нём нет | Файлов с хешем или версией в имени |
Меняйте версию кэша при каждом деплое, чтобы новый Service Worker при активации удалил старые кэши. Если в кэше ничего нет и сеть недоступна, посетители увидят offline.html.
Также ищут как: генератор web app manifest, генератор manifest.json, генератор service worker, сделать сайт устанавливаемым, офлайн service worker, генератор webmanifest.
Инструменты, которые хорошо сочетаются с Генератор PWA-манифеста
- Генератор иконок приложений — Перетащите один квадратный образ и получите все размеры иконок, которые нужны вашему приложению: готовый к Xcode AppIcon.appiconset, папки mipmap для Android с адаптивными иконками, иконку для Play Store и иконки для веба и PWA — всё в одном ZIP-архиве.
- Генератор фавикона — Создайте полный набор фавикона из логотипа, буквы или эмодзи: favicon.ico с несколькими размерами, Apple touch icon, иконки Android/PWA, webclip для Webflow, веб-манифест и HTML-теги для вставки.
- Генератор мета-тегов — Заполните одну форму и получите полноценный, валидный <head> — title, description, canonical, robots, Open Graph, карточки X/Twitter, цвет темы и иконки — с живым предпросмотром и выводом, адаптированным под Webflow.
- Генератор Deep Link файлов — Создайте два файла, благодаря которым ссылки на ваш сайт будут открывать приложение: apple-app-site-association для Universal Links на iOS и assetlinks.json для App Links на Android.
Часто задаваемые вопросы
Что использовать: manifest.json или manifest.webmanifest?
Подходят оба варианта. Рекомендуемое в спецификации расширение — .webmanifest (отдаётся с типом application/manifest+json), но и .json работает, если указывает на него.
Что такое maskable-иконка?
Это иконка с дополнительными полями (безопасная зона в центральных 80%), которую Android может обрезать в круг, сквиркл или другую форму, не обрезая ваш логотип.
Почему у моего PWA не появляется кнопка установки?
Проверьте Chrome DevTools → Application → Manifest на наличие ошибок. Обычно причина в отсутствующей иконке 192 или 512 px, неверном start_url или scope, режиме display: browser либо в том, что страница открыта не по HTTPS.
Как обновить PWA после деплоя?
Измените версию кэша в sw.js. Браузер установит новый Service Worker, который удалит старые кэши и возьмёт управление на себя (skipWaiting и clients.claim), поэтому при следующем визите пользователи получат новые файлы.
Можно ли установить Генератор PWA-манифеста как веб-приложение и пользоваться им офлайн?
Да. Генератор PWA-манифеста — это веб-приложение (PWA), которое можно установить из браузера, без скачивания из магазина приложений. В Chrome или Edge (Windows, macOS, Linux, ChromeOS) или на Android нажмите вверху этой страницы «Установить приложение»; на iPhone и iPad используйте «Поделиться → На экран «Домой»», а в Safari 17+ на Mac — «Файл → Добавить в Dock». После этого приложение откроется в отдельном окне со своим значком, и так как оно полностью работает в браузере, оно продолжит работать офлайн. Firefox на компьютере не умеет устанавливать веб-приложения. Как работает установка.