Manifest и установка учебника

Manifest сообщает браузеру, как представить веб-приложение: какое имя показать, с какого адреса начать, какие иконки использовать и как открыть окно. Это описание не сохраняет статьи само по себе. В offline-lab мы сначала подготовим представление учебника, а в следующих уроках добавим автономную загрузку.

Наши страницы остаются обычными HTML-документами. Установка доступна по правилам выбранного браузера и платформы; она не является обязательной для чтения. Сведения этого урока сверены с документацией MDN на 10 октября 2026 года. Мы не изображаем уже установленное приложение ProfessorWeb и не обещаем одинаковый пункт меню на каждом устройстве.

Описание приложения

Сохраните в корне проекта manifest.webmanifest. Ниже полный учебный файл. У проекта свой origin, поэтому пути / относятся к нему, а не к действующему ProfessorWeb. Иконки должны существовать как файлы указанного формата и размера; в исходниках приводится простой учебный знак, который можно заменить собственным оформлением.

{
  "id": "/offline-lab",
  "name": "Офлайн-учебник",
  "short_name": "Учебник",
  "start_url": "/",
  "scope": "/",
  "display": "standalone",
  "lang": "ru",
  "theme_color": "#7134b5",
  "background_color": "#f7f5fb",
  "icons": [
    {"src":"/assets/icon-192.svg","sizes":"192x192","type":"image/svg+xml"},
    {"src":"/assets/icon-512.svg","sizes":"512x512","type":"image/svg+xml"}
  ]
}

Имя предназначено человеку, short_name — для мест с меньшим пространством. id помогает определить личность приложения, а start_url задаёт запуск. Их нельзя выбирать только по красивому виду строки. Если каждую кампанию превращать в новый идентификатор, браузер может воспринимать описание иначе, чем редактор, который считает это одним учебником.

В нашем start_url нет UTM. Метки внешнего входа не должны случайно определять постоянный запуск учебного приложения. Если проект отдельно измеряет способ запуска, он задаёт понятное правило, но не смешивает его с идентичностью. Обычные постоянные URL xml и markdown сохраняются и после добавления manifest.

Область навигации

Поле scope определяет область приложения для соответствующего поведения навигации. Это не область регистрации service worker: похожие названия принадлежат разным сущностям. Manifest не даёт worker права перехватывать запросы, а worker не превращает каждый URL в часть установленного интерфейса по одному имени приложения.

На отдельном учебном origin удобно начать с /. Так сохранённый XML-путь и обычная Markdown-страница входят в область. Для проекта внутри /reader/ потребуется согласовать старт, scope и действительные маршруты. Не переносите корневые значения в чужой большой сайт без анализа, какие страницы попадут в область приложения.

Scope также не является механизмом авторизации. Он не защищает материал от запроса и не ограничивает права пользователя. В нашей статической библиотеке нет приватного кабинета; если он появится, контроль доступа решается серверной моделью. Manifest не должен создавать ложное впечатление, что путь внутри приложения автоматически безопасен.

Подключите описание в head каждой учебной страницы общим шаблоном. Это полный необходимый элемент подключения, а не полный HTML-документ:

<link rel="manifest" href="/manifest.webmanifest">

Если ссылка есть только на главной, отдельный прямой вход в XML может не получить то же описание. Общая оболочка помогает поддерживать согласованность. После генерации проверяется HTML обеих страниц; исправление готового файла вручную снова исчезло бы при следующей сборке.

Иконки и цвета

Иконка должна иметь понятный силуэт при маленьком размере. Учебный знак не обязан быть сложным логотипом. В manifest указаны два размера; проверяемая документация описывает требования поддерживающих браузеров, включая размеры 192 и 512 пикселей у Chromium. Формат и фактическое отображение проверяйте на целевых устройствах, а при необходимости подготовьте подходящие растровые варианты. Условия установки.

SVG масштабируется, но строка sizes не создаёт отсутствующий файл и не гарантирует одинаковую поддержку во всех сценариях установки. Нужны действительные ресурсы с согласованными путями. Если иконка не загружается, сначала проверяется ответ и формат, затем требования браузера. Изменение названия приложения не исправит отсутствующую картинку.

theme_color и background_color описывают части представления, но не заменяют CSS статьи. Читабельность кода и таблиц остаётся задачей оформления. Можно сохранить знакомый акцент ProfessorWeb в учебном примере, однако это не означает, что браузер применит его одинаково ко всем элементам системного интерфейса.

Установка и обычное чтение

Для установки нужны подходящие условия доставки, включая HTTPS либо поддерживаемое локальное окружение. Двойной щелчок по файлу не воспроизводит эту практику. При этом установка и service worker не тождественны: документация отдельно отмечает, что worker часто обеспечивает автономность, но его присутствие не является универсальным определением устанавливаемости каждого сайта.

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

Не показывайте постоянную кнопку «Установить», если приложение не знает, может ли выполнить обещанное действие. Некоторые браузеры предоставляют beforeinstallprompt, но событие не универсально. Для начального проекта достаточно встроенного способа браузера и понятного объяснения. Отсутствие события не означает, что пользователь не может читать сайт или что автономная логика обязательно неисправна.

После запуска установленного представления ожидается стартовая страница учебного origin. Если сеть выключена, пока нет оснований обещать её открытие: мы ещё не сохранили ответы. Такая проверка может закончиться сетевой ошибкой даже при правильном manifest. Она показывает недостающую автономную часть, а не обязательную ошибку описания приложения.

Проверка описания

В будущей практике сверяются загрузка manifest, разрешение путей, наличие иконок и выбранный старт. Диагностическое представление браузера помогает увидеть разобранные поля, но не заменяет проверку пользовательского запуска. Если файл имеет неверный JSON или ответ сервера содержит HTML ошибки, сначала исправляется источник данных.

Сохраните отдельные результаты: описание прочитано, установка доступна в выбранных условиях, запуск ведёт на правильную страницу. Они не объединяются в утверждение «офлайн уже работает». Теперь учебник имеет понятную личность и область представления. Следующий урок введёт service worker и объяснит, почему зарегистрированный, активный и управляющий текущей страницей worker — разные состояния.