Манифест веб-приложения
Создайте manifest.json с полями name, icons, start_url, display и theme_color, чтобы браузеры предлагали добавить сайт на главный экран
«Манифест веб-приложения» — бесплатный урок Frontend Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.
Что такое PWA?
Прогрессивное веб-приложение — это веб-сайт с возможностями нативного приложения: его можно установить на главный экран, он работает без подключения к сети и может получать push-уведомления. Три основных компонента: манифест веб-приложения, сервис-воркер и HTTPS.
Файл манифеста
manifest.json (или .webmanifest) — это JSON-файл с метаданными приложения. Браузеры считывают его, чтобы включить функцию «Добавить на главный экран» и запускать приложение подобно нативному.
Базовый манифест
Минимальный манифест содержит название, значки, start_url и режим отображения.
// public/manifest.webmanifest
{
"name": "Coddy Notes",
"short_name": "Notes",
"description": "Lightweight markdown notes",
"start_url": "/?source=pwa",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#2563eb",
"icons": [
{ "src": "/icons/192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icons/512.png", "sizes": "512x512", "type": "image/png" }
]
}Подключение манифеста
Подключите его из HTML <head>.
<link rel="manifest" href="/manifest.webmanifest">
<meta name="theme-color" content="#2563eb">Режимы отображения
"display" управляет элементами окна приложения: "standalone" (без интерфейса браузера, как приложение), "fullscreen" (полноэкранный режим со скрытой строкой состояния), "minimal-ui" (некоторые элементы управления браузера), "browser" (обычная вкладка).
Значки — несколько размеров
Предоставляйте значки нескольких размеров. Современному Android нужны размеры 192 и 512, а Apple требуются дополнительные размеры. Используйте "purpose": "maskable" для адаптивных значков Android.
"icons": [
{ "src": "/icons/192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "/icons/512.png", "sizes": "512x512", "type": "image/png" },
{ "src": "/icons/maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" }
]Специальные теги Apple
iOS поддерживает манифест не полностью. Добавьте специальные метатеги Apple для установки на главный экран в iOS.
<link rel="apple-touch-icon" href="/icons/apple-180.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-title" content="Notes">Запрос на установку
Браузеры вызывают событие beforeinstallprompt, когда выполнены необходимые условия (манифест, сервис-воркер, HTTPS и взаимодействие с пользователем). Вы можете отложить его и вызвать из собственного интерфейса.
let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
e.preventDefault();
deferredPrompt = e;
showInstallButton();
});
async function onInstallClick() {
if (!deferredPrompt) return;
deferredPrompt.prompt();
const { outcome } = await deferredPrompt.userChoice;
console.log('install:', outcome);
deferredPrompt = null;
}Ярлыки приложения
В манифесте можно объявить ярлыки, которые появляются при длительном нажатии на значок установленного приложения.
"shortcuts": [
{
"name": "New Note",
"short_name": "New",
"url": "/notes/new",
"icons": [{ "src": "/icons/new-96.png", "sizes": "96x96" }]
}
]Категории и снимки экрана
Добавьте categories и screenshots, чтобы сделать интерфейс установки в Chrome для Android и Windows более информативным.
"categories": ["productivity", "utilities"],
"screenshots": [
{ "src": "/screens/home.png", "sizes": "1280x720", "type": "image/png", "form_factor": "wide" },
{ "src": "/screens/mobile.png", "sizes": "720x1280", "type": "image/png", "form_factor": "narrow" }
]Проверка манифеста
Откройте DevTools → Application → Manifest. Chrome показывает разобранные поля манифеста, предварительный просмотр значков и предупреждения (отсутствующие значки, низкая контрастность и т. д.).
Фреймворки упрощают эту задачу
Next.js: поместите manifest.webmanifest в public/. Nuxt: установите модуль @vite-pwa/nuxt. Vite: vite-plugin-pwa автоматически создаёт манифест и сервис-воркер.
// vite.config.ts
import { VitePWA } from 'vite-plugin-pwa';
export default {
plugins: [VitePWA({
manifest: {
name: 'Coddy Notes',
icons: [{ src: '/192.png', sizes: '192x192', type: 'image/png' }]
}
})]
};Быстрая проверка
Какое значение display в манифесте веб-приложения заставляет установленное PWA открываться без интерфейса браузера, как нативное приложение?
Повторение: манифест веб-приложения
JSON-файл с метаданными PWA. Включите название, short_name, start_url, display, theme_color и значки (нескольких размеров, включая maskable). Подключите манифест в HTML с помощью rel=manifest. Для iOS нужны специальные метатеги Apple. Событие beforeinstallprompt позволяет создать собственный интерфейс установки. Ярлыки и снимки экрана делают установку более информативной. Фреймворки (Vite PWA, Next, Nuxt PWA) автоматизируют создание.
Часто задаваемые вопросы
Урок «Манифест веб-приложения» бесплатный?
Да — полный текст урока «Манифест веб-приложения» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.
Чему я научусь в уроке «Манифест веб-приложения»?
Создайте manifest.json с полями name, icons, start_url, display и theme_color, чтобы браузеры предлагали добавить сайт на главный экран Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Frontend Academy?
Предыдущий опыт не требуется. Frontend Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «Манифест веб-приложения»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Frontend Academy?
Да. Каждый урок Frontend Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Манифест веб-приложения
- Регистрация и жизненный цикл сервис-воркера
- Стратегии офлайн-кэширования: CacheFirst и NetworkFirst
- Push-уведомления