Реклама мешает? Идти Без рекламы Сегодня 

Генератор профиля веб-приложения PWA

ДанныеРазработчик

Реклама · УДАЛИТЬ?

ВХОД

Автоматический процесс

Идентификатор приложения

Имя

Полное имя приложения, отображаемое в окне установки и на экране запуска

Краткое имя

Используется на домашнем экране (рекомендуется: не более 12 символов)

Описание

Язык

Основной язык (метка BCP 47, например, en-US, fr, de-DE)

Направление текста

Навигация

Начальный URL

URL, открывающийся при запуске приложения

Область действия

Граница навигации для приложения (опционально)

Идентификатор приложения

Уникальный идентификатор приложения (опционально, рекомендуется)

Отображение

Режим отображения

Ориентация

Цвет темы

Цветит браузерскую панель и статус-бар при открытии приложения

Цвет фона

Цвет фона на экране запуска при загрузке приложения

Иконки

Путь к базовому каталогу иконок

Папка, где находятся файлы иконок (используется для построения URL src)

Шаблон имени файла иконки

Используйте {size} как заменитель — заменяется на каждый выбранный размер

Тип иконки

Назначение иконки

Включить 72×72

Включить 96×96

Включить 128×128

Включить 144×144

Включить 152×152

Включить 192×192

Включить 384×384

Включить 512×512

ВЫХОД

Клиентская сторона

manifest.json

HTML-тег ссылки

Реклама · УДАЛИТЬ?

Гид

Генератор профиля веб-приложения PWA

Создать действительный manifest.json файл для вашего Progressive Web App за несколько секунд. Заполните идентичность приложения, выберите режим отображения, укажите размеры иконок, которые вы отправляете, и генератор создаст чистый JSON, который можно сразу вставить в ваш проект — вместе с соответствующим <link rel="manifest"> тегом для вашего HTML.

Как использовать

Введите идентичность вашего приложения Имя и Краткое имя. Полное имя отображается в окне установки; краткое имя показывается под иконкой на домашнем экране.
Установите Начальный URL, Область действия, и опционально Идентификатор приложения таким образом, чтобы браузер знал, что запускать и как ограничивать навигацию.
Выберите Режим отображения (standalone, fullscreen, minimal-ui, browser) и определите Ориентация.
Выберите Цвет темы (интерфейс браузера) и определите Цвет фона (экран запуска).
Установите Путь к базовому каталогу иконок и определите Шаблон имени файла используя {size} как заменитель, затем отметьте размеры иконок, которые вы действительно отправляете.
Скопируйте сгенерированный manifest.json или нажмите значок загрузки. Вставьте <link rel="manifest"> тег в ваш <head>.

Возможности

Все стандартные поля манифеста – имя, short_name, описание, язык, направление, идентификатор, начальный URL, область действия, режим отображения, ориентация, цвет темы, цвет фона.
Проверка размеров иконок – 72, 96, 128, 144, 152, 192, 384 и 512 пикселей, с автоматически сгенерированными src URL-адресами из базового пути и шаблона имени файла.
Поддержка назначения иконок – любое, маскируемое, «любое маскируемое» и монохромное.
Живой предварительный просмотр JSON – отформатированный JSON обновляется в реальном времени при вводе, с подсветкой синтаксиса.
Проверка установимости – предупреждает, если отсутствуют имя, начальный URL или рекомендуемая пара иконок 192x192 и 512x512.
Копирование или загрузка – однокликовая копия или загрузка в формате manifest.json с правильным типом MIME.
HTML-тег ссылки – готовый фрагмент для вставки <link rel="manifest"> .
100% клиентская сторона – ничего не покидает ваш браузер. Нет аккаунтов, нет лимитов.

 Часто задаваемые вопросы

Что такое манифест веб-приложения?

Манифест веб-приложения — это JSON-файл, который сообщает браузеру, как должно вести себя ваше Progressive Web App при установке. Он содержит имя приложения, иконки, начальный URL, режим отображения, цвета темы и другие метаданные, используемые в окне установки, на экране запуска и в запускающем приложении на домашнем экране.
Какие поля необходимы для установки PWA?

Наименьшее количество, ожидаемое браузерами — это имя (или short_name), начальный URL, режим отображения установленный на standalone, fullscreen или minimal-ui, и хотя бы одна иконка размером 192x192 и одна иконка размером 512x512. Добавление цвета темы и цвета фона настоятельно рекомендуется для более качественного опыта установки.
Каковы различия между режимами отображения?

standalone скрывает интерфейс браузера и выглядит как приложение на устройстве. fullscreen также скрывает статус-бар, что полезно для игр. minimal-ui сохраняет небольшой набор элементов браузера. browser открывает приложение в обычной вкладке. Большинство PWAs выбирают режим standalone.
Что означает поле назначения иконки?

Назначение указывает, как может быть отображена иконка. «любое» — это значение по умолчанию, и позволяет браузеру скомпоновать иконку так, как ему удобно. «маскируемое» означает, что изображение предназначено для заполнения определённой зоны ОС, поэтому при запуске иконка может быть обрезана в виде круга, квадрата с закруглёнными углами или закруглённого квадрата без потери важного содержимого.
Где следует разместить manifest.json и тег ссылки?

Разместите manifest.json на корневом уровне вашего сайта или в стабильной директории, затем ссылайтесь на него из каждой HTML-страницы с тегом внутри . Убедитесь, что файл подаётся с типом содержимого application/manifest+json.