Web Manifest проверка

Web Manifest — это JSON-файл, содержащий метаданные веб-приложения: имя, иконки, цветовую схему, поведение при запуске и другие параметры. Проверка его корректности является важной частью тестирования PWA (Progressive Web App), так как ошибки в манифесте могут привести к некорректному отображению приложения на устройствах и нарушению UX.

Получение и проверка Web Manifest

WebdriverIO предоставляет возможность работы с любыми HTTP-запросами через встроенные или сторонние библиотеки, такие как axios или got. Для проверки манифеста основной подход заключается в следующих шагах:

  1. Получение ссылки на манифест Обычно в HTML-файле манифест подключается через тег <link rel="manifest" href="manifest.json">. Его можно найти через WebdriverIO команды:
const manifestLink = await $('link[rel="manifest"]');
const manifestUrl = await manifestLink.getAttribute('href');
  1. Загрузка и парсинг манифеста После получения URL манифеста его нужно загрузить и разобрать как JSON:
import axios from 'axios';

const response = await axios.get(manifestUrl);
const manifest = response.data;
  1. Проверка обязательных полей Web Manifest должен содержать как минимум несколько ключевых полей:
import assert from 'assert';

assert(manifest.name, 'Отсутствует поле name');
assert(manifest.short_name, 'Отсутствует поле short_name');
assert(manifest.start_url, 'Отсутствует поле start_url');
assert(manifest.icons && manifest.icons.length > 0, 'Иконки не заданы');

Валидация иконок

Иконки являются критичной частью манифеста, так как они отображаются на домашнем экране и в списках приложений. Проверка включает:

  • наличие всех размеров (sizes) для различных устройств
  • доступность файлов (HTTP 200)
  • корректный формат (PNG, SVG, WebP)

Пример проверки доступности и размера иконок:

for (const icon of manifest.icons) {
    const iconResponse = await axios.get(icon.src, { responseType: 'arraybuffer' });
    assert.strictEqual(iconResponse.status, 200, `Иконка ${icon.src} недоступна`);

    const sizePattern = /^(\d+)x(\d+)$/;
    const match = sizePattern.exec(icon.sizes);
    assert(match, `Неверный формат размера иконки: ${icon.sizes}`);

    const [width, height] = match.slice(1).map(Number);
    assert(width === height, 'Иконка не квадратная');
}

Проверка цветовой схемы и ориентации

Манифест может задавать цветовую тему приложения и ориентацию экрана при запуске:

if (manifest.theme_color) {
    const themeColorPattern = /^#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$/;
    assert(themeColorPattern.test(manifest.theme_color), 'Некорректный theme_color');
}

if (manifest.orientation) {
    const validOrientations = ['any', 'natural', 'portrait', 'landscape'];
    assert(validOrientations.includes(manifest.orientation), 'Некорректная ориентация');
}

Проверка display и поведения PWA

Поле display определяет, как приложение будет запускаться на устройствах. Основные значения: standalone, fullscreen, minimal-ui, browser. Проверка:

const validDisplays = ['standalone', 'fullscreen', 'minimal-ui', 'browser'];
assert(validDisplays.includes(manifest.display), `Некорректное значение display: ${manifest.display}`);

Автоматизация через тесты WebdriverIO

В WebdriverIO можно объединить все проверки в один интеграционный тест:

describe('Web Manifest', () => {
    it('должен быть корректным', async () => {
        const manifestLink = await $('link[rel="manifest"]');
        const manifestUrl = await manifestLink.getAttribute('href');

        const response = await axios.get(manifestUrl);
        const manifest = response.data;

        assert(manifest.name);
        assert(manifest.short_name);
        assert(manifest.start_url);
        assert(manifest.icons && manifest.icons.length > 0);

        for (const icon of manifest.icons) {
            const iconResponse = await axios.get(icon.src, { responseType: 'arraybuffer' });
            assert.strictEqual(iconResponse.status, 200);
        }
    });
});

Такой тест можно запускать как часть CI/CD, чтобы гарантировать, что любые изменения в PWA не нарушают корректность манифеста.

Особенности и рекомендации

  • Проверка URL start_url важна для корректного открытия приложения. Он должен быть абсолютным или корректным относительным путем.
  • Проверка всех иконок на доступность позволяет избежать «битых» изображений на устройствах пользователей.
  • Поддержка разных размеров и форматов иконок обеспечивает совместимость с различными платформами (iOS, Android, Windows).
  • Проверка theme_color и background_color улучшает визуальное соответствие приложения при запуске на разных устройствах.

Эффективная проверка Web Manifest позволяет убедиться, что PWA полностью готово к установке и использованию, а также соответствует современным стандартам веб-разработки.

Оглавление