Что такое прогрессивное веб-приложение (PWA)?

PWA — это общий термин, который используется для обозначения нескольких технологий. PWA обычно включает в себя манифест веб-приложения и Service Worker. Манифест веб-приложения предоставляет данные, используемые для регистрации сайта в списке приложений операционной системы. Service Worker можно использовать для добавления функций, которые остаются активными после закрытия вкладок браузера сайта.

Не каждый сайт будет использовать все возможные возможности. Некоторые будут включать манифест веб-приложения, но не Service Worker; у других будет Service Worker, но не будет поддержки установки приложений. Не существует определенного стандарта, определяющего, как должно вести себя PWA. PWA — это любой сайт, который использует некоторые из этих технологий, чтобы предложить некоторый уровень функциональности с собственными приложениями.

Понимание «прогрессивного» улучшения

«Прогрессивная» часть прогрессивных веб-приложений проистекает из ожидаемого использования прогрессивного улучшения. Функции PWA все еще довольно новые и могут поддерживаться не во всех браузерах. PWA должен продолжать предоставлять свои основные веб-интерфейсы, даже если API-интерфейсы браузера, такие как сервис-воркеры, недоступны.

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

Доступность функций

Функции PWA обеспечивают более глубокую интеграцию между вашим сайтом и устройством пользователя. Следовательно, API-интерфейсы, используемые для их создания, ограничены соединениями HTTPS. Это помогает гарантировать, что контент не был подделан для постоянной установки гнусных приложений на ваше устройство.

Отдельные функции защищены веб-разрешениями, доступными пользователю. Возможности, такие как push-уведомления, могут быть использованы для бомбардировки пользователя нежелательным контентом. Пользователи должны подтвердить запрос разрешения, который дает вашему сайту возможность использовать потенциально навязчивые функции.

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

Черты PWA

Хотя стандарта для PWA не существует, большинство сайтов, предлагающих интерфейс, похожий на приложение, имеют следующие черты:

• Устанавливаемый. На поддерживаемых платформах веб-сайт можно «установить» как мобильное приложение. Эффекты зависят от операционной системы и браузера.
• Работает в автономном режиме. Service Workers — это скрипты, которые продолжают работать, даже когда ваш сайт не открыт. Они также могут перехватывать сетевые запросы, позволяя вам обслуживать важные активы из кэша. Это позволит вашему сайту продолжать работать, когда пользователь не в сети.
• Пользовательский интерфейс, похожий на приложение. Хотя это и не является обязательным требованием, PWA, скорее всего, будут уделять больше внимания использованию современных элементов управления пользовательского интерфейса, которые хорошо интегрируются с собственными стилями приложений. PWA должны адаптироваться к разным размерам экрана.

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

Манифест веб-приложения

Манифесты веб-приложений — это файлы JSON, определяющие ключевую информацию о вашем сайте. Это включает в себя такие детали, как название сайта, цвет акцента и расположение файлов значков.

Браузеры и операционные системы используют эту информацию для создания записей приложений системного уровня, когда вы «устанавливаете» свой сайт. Вот как ваш сайт получает значок ящика приложения на Android или ссылку в меню «Пуск» на Windows.

Вот пример манифеста:

{"name": "Example App",
    "display": "standalone",
    "background_color": "#fff",
    "description": "My App",
    "start_url": "/",
    "icons": [
        {
            "src": "/icon.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ]
}

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

if ("serviceWorker" in navigator) {
    navigator.serviceWorker.register("/service-worker.js");
}

self.addEventListener("install", e => {
    e.waitUntil(async () => {
        const cache = await caches.open("my-app-cache");
        await cache.addAll([
            "/index.html",
            "/my-css.css",
            "/my-js.js",
            "/assets/icon.png",
            "/assets/my-header-image.png"
        ]);
    });
});
 
self.addEventListener("fetch", e => {
    e.respondWith(async () => {
 
        const cached = await catches.match(e.request);
        if (cached) return cached;
 
        const response = await fetch(e.request);
        return response;
 
    })
});