Web App Manifest

Polymer — это библиотека JavaScript для создания веб-компонентов, ориентированных на повторное использование и модульность. Одним из важных аспектов современных веб-приложений является интеграция с Web App Manifest, который позволяет браузеру распознавать веб-приложение как PWA (Progressive Web App) и управлять его установкой на устройства пользователя.

Структура Web App Manifest

Файл манифеста представляет собой JSON-документ и обычно называется manifest.json. Основные поля:

  • name — полное имя приложения, которое будет отображаться на устройстве.
  • short_name — короткое имя, используемое в местах с ограниченным пространством, например на иконке рабочего стола.
  • icons — массив объектов с изображениями для разных размеров и форматов:
"icons": [
  {
    "src": "images/icon-192.png",
    "sizes": "192x192",
    "type": "image/png"
  },
  {
    "src": "images/icon-512.png",
    "sizes": "512x512",
    "type": "image/png"
  }
]
  • start_url — URL, с которого запускается приложение при установке.
  • display — режим отображения: standalone, fullscreen, minimal-ui, browser.
  • background_color — цвет фона при запуске приложения.
  • theme_color — основной цвет интерфейса браузера, влияет на адресную строку и статусную панель.
  • orientation — ориентация экрана: portrait, landscape.

Эти параметры обеспечивают единый пользовательский опыт при установке веб-приложения на мобильные устройства и рабочие столы.

Подключение манифеста в Polymer

Для интеграции манифеста в проект на Polymer достаточно подключить его в index.html через тег <link>:

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

Важно убедиться, что путь к файлу корректен и файл доступен с сервера, иначе PWA-функциональность работать не будет.

Динамическая генерация манифеста

В приложениях на Polymer часто используются элементы, которые создаются и обновляются динамически. Иногда возникает необходимость генерировать манифест на лету, например, чтобы менять цветовую схему или язык приложения.

Пример генерации манифеста через Polymer элемент:

import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';

class AppManifest extends PolymerElement {
  static get properties() {
    return {
      themeColor: { type: String, value: '#ffffff' }
    };
  }

  connectedCallback() {
    super.connectedCallback();
    this.updateManifest();
  }

  updateManifest() {
    const manifest = {
      name: "My Polymer App",
      short_name: "PolymerApp",
      start_url: "/index.html",
      display: "standalone",
      background_color: "#ffffff",
      theme_color: this.themeColor,
      icons: [
        { src: "/icons/icon-192.png", sizes: "192x192", type: "image/png" },
        { src: "/icons/icon-512.png", sizes: "512x512", type: "image/png" }
      ]
    };

    const blob = new Blob([JSON.stringify(manifest)], { type: 'application/json' });
    const manifestURL = URL.createObjectURL(blob);
    let link = document.querySelector('link[rel="manifest"]');
    if (!link) {
      link = document.createElement('link');
      link.rel = 'manifest';
      document.head.appendChild(link);
    }
    link.href = manifestURL;
  }
}

customElements.define('app-manifest', AppManifest);

Такой подход позволяет менять цветовую схему, иконки и другие параметры без ручного редактирования файла.

Влияние манифеста на PWA-функциональность

  1. Установка приложения: браузеры используют name, short_name и icons для создания иконки на рабочем столе и отображения названия приложения.
  2. Режим отображения: display управляет тем, как приложение отображается: как полноэкранное, минимизированное или в стандартном окне браузера.
  3. Цветовая идентификация: theme_color и background_color создают визуальный бренд при запуске приложения.
  4. Ориентация: orientation гарантирует корректное отображение интерфейса в портретном или ландшафтном режиме.

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

Рекомендации по структуре и поддержке

  • Поддерживать несколько размеров иконок, чтобы приложение выглядело корректно на устройствах с разным разрешением.
  • Обновлять start_url и scope, если приложение имеет маршрутизацию с использованием <app-route> или других роутеров Polymer.
  • Хранить манифест в корне проекта, чтобы он был доступен по стандартному пути /manifest.json.
  • Использовать theme_color согласованно с основной цветовой палитрой интерфейса.

Интеграция с сервис-воркерами

Web App Manifest работает в связке с сервис-воркерами для полноценной PWA-функциональности:

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
    .then(reg => console.log('Service worker registered', reg))
    .catch(err => console.error('Service worker registration failed', err));
}

Сервис-воркер кэширует ресурсы и обеспечивает оффлайн-доступ, а манифест гарантирует правильное отображение и запуск приложения на устройстве пользователя.

Хотите, я могу добавить расширенный пример создания полностью автономного PWA на Polymer, включая маршрутизацию и динамический манифест?

Оглавление