Сделать из сайта pwa: Превращаем веб-сайт в PWA. Согласно этой статье из CNBC, к 2025… | by Артур Хайбуллин

Posted:

Май 16, 2023

Comments:

Сделать из сайта pwa: Превращаем веб-сайт в PWA. Согласно этой статье из CNBC, к 2025… | by Артур Хайбуллин | NOP::Nuances of Programming

Содержание

Как сделать PWA устанавливаемым — Прогрессивные веб-приложения

Назад (en-US)
Обзор: Progressive (en-US)
Далее (en-US)

В предыдущей статье мы читали о том, как js13kPWA работает в off-line режиме благодаря service worker, но мы можем пойти дальше и позволить устанавливать веб-приложения на поддерживающие мобильные браузеры, как если бы это было нативное приложение. В этой статье разберём, как этого добиться, используя веб-манифест и функцию под названием «Добавить на главный экран».

Эта технология позволяет запускать приложение прямо с рабочего стола, без запуска браузера и ручного ввода URL-адреса. Ваше веб-приложение может быть установлено рядом с нативным. Поэтому к нему проще получить доступ, а так же вы можете указать, что приложение должно использовать полноэкранный режим браузера, делая его ещё более похожим на нативное

Чтобы сделать сайт доступным для установки, ему необходимы следующие вещи:

Веб-манифест с правильно заполненными полями
Сайт должен использовать защищённый (HTTPS) домен
Иконка для предоставления приложения на устройстве
Зарегистрированный service worker, чтобы приложение работало в off-line режиме (на данный момент требуется только для Chrome на Android)

Файл манифеста

Ключевым элементом является файл манифеста, в котором представлена вся информация о веб-сайте в JSON формате.

Обычно находится в корневой папке веб-приложения. Содержит информацию, такую как название приложения, paths пути к значкам разных размеров, которые можно использовать для представления приложения в мобильных операционных системах (например, в качестве значка домашнего экрана), и цвет фона для использования при загрузке. Эта информация необходима браузеру для правильного отображения приложения при установке и на домашнем экране.

Файл js13kpwa.webmanifest веб-приложения js13kPWA включён в раздел <head> файла index.html с помощью следующей строчки кода:

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

Примечание: Существует несколько расширений, используемых в прошлом: manifest.webapp был популярен в манифестах приложений Firefox OS, также многие используют manifest.json потому что содержание организовано по структуре JSON. Однако, расширение .webmanifest явно упоминается в W3C manifest specification, поэтому давайте придерживаться именно этого стандарта.

Содержимое файла может выглядеть так:

{
    "name": "js13kGames Progressive Web App",
    "short_name": "js13kPWA",
    "description": "Progressive Web App that lists games submitted to the A-Frame category in the js13kGames 2017 competition.",
    "icons": [
        {
            "src": "icons/icon-32.png",
            "sizes": "32x32",
            "type": "image/png"
        },
        // ...
        {
            "src": "icons/icon-512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    "start_url": "/pwa-examples/js13kpwa/index.html",
    "display": "fullscreen",
    "theme_color": "#B12A34",
    "background_color": "#B12A34"
}

Названия большинства полей говорят сами за себя, но давайте разберём документ и объясним всё подробно:

name: Полное название вашего приложения.
short_name: Короткое название для отображения на домашнем экране.
description: Одно-два предложения, описывающих приложение.
icons: Куча информации о значках — URL, размеры, типы. Не забудьте указать хотя бы несколько, чтобы иконка лучше подходила под устройство пользователя
start_url: Загружаемый исходный документ при запуске приложения
display: Как приложение должно отображаться; может быть fullscreen (полноэкранный), standalone (автономный), minimal-ui (минимальный пользовательский интерфейс), browser (браузер)
theme_color: Основной цвет для интерфейса, используемый операционной системой
background_color: Цвет для фона, используемый при установке и на заставке

Минимальные требования к манифесту — name и хотя бы один значок (с src, size и type). Поля description, short_name, и start_url являются рекомендуемыми. Вы можете использовать даже больше полей, чем указано выше — не забудьте проверить ссылку на Web App Manifest reference.

«Добавить на домашний экран» (кратко: a2hs) — это функция, реализованная браузерами, которая берёт информацию, найденную в веб-манифесте, и использует для добавления приложения на домашний экран устройства со значком и именем. Это работает при выполнении требований, описанных выше.

Когда пользователь посещает PWA с помощью браузера, поддерживающего технологию, должен отобразиться значок, указывающий на возможность установки приложения в качестве PWA.

После того, как пользователь кликнет на иконку, отобразится баннер установки. Информация в баннере генерируется на основе файла-манифеста — имя и значок отображаются в приглашении.

Если пользователь нажимает кнопку, появляется окно, на котором изображены ярлык приложения и кнопки для подтверждения действий.

При подтверждении ярлык будет добавлен на рабочий стол.

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

Экран загрузки

В некоторых браузерах, на основе информации из манифеста, создаётся заставка, отображаемая при запуске PWA

Иконка и фоновый цвет использовались для создания заставки.

В статье мы узнали, как сделать PWA устанавливаемыми, используя веб-манифест, и добавить их на главный экран.

Для получения большей информации, можете почитать наш Add to Home screen гайд (en-US). В настоящее время поддержка ограничена браузерами Firefox для Android 58+, Мобильным Chrome и Android Webview 31+, также Opera для Android 32+, но поддержка должна расширяться в ближайшем будущем.

Теперь давайте перейдём к последнему фрагменту PWA-головоломки — повторному запуску с помощью push-уведомлений.

Назад (en-US)
Обзор: Progressive (en-US)
Далее (en-US)

Found a content problem with this page?

Edit the page on GitHub.
Report the content issue.
View the source on GitHub.

Want to get more involved?

Learn how to contribute.

This page was last modified on 6 апр. 2023 г. by MDN contributors.

Превращаем сайт в мобильное приложение при помощи PWA

Frontend-разработчик AFFINAGE Никита Воробьев рассказывает, какие задачи решают PWA-приложения, есть ли у них ограничения и почему Frontend-разработчики справляются с PWA-разработкой лучше других. В конце материала — инструкция по интеграции прогрессивного веб-приложения в сайт.

Никита Воробьёв

Frontend-разработчик AFFINAGE

PWA — промежуточная технология между сайтами и нативными мобильными приложениями. По сути, это «прокачанная» копия веб-сайта, размещенная на устройстве пользователя и не требующая отдельной разработки для iOS или Android.

«Прогрессивное web-приложение (англ. progressive web app, PWA) — технология в web-разработке, которая визуально и функционально трансформирует сайт в приложение (мобильное приложение в браузере)»

Так описывается технология в Wikipedia, но нам этого мало, так что давайте подробнее разберем, что это такое.

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

Работают эти приложения так же, как и обычные мобильные приложения: показывают Push-уведомления, работают в автономном офлайн-режиме, сохраняют данные локально. По внешнему виду они ничем не отличаются от нативных приложений и могут размещать иконку на рабочем столе (домашнем экране) для быстрого запуска.

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

Задачи, которые решает PWA:

Стимулировать повторные продажи.
Возвращать клиентов компании в одно нажатие на экране телефона.
Повышать узнаваемость бренда. Иконка с логотипом компании всегда на виду на рабочем столе у пользователя.
Повышать средний чек сделки, допродавая продукты при помощи Push-уведомлений.
Оставаться на связи с клиентом: показывать Push-уведомления о том, что товар прибыл в пункт самовывоза или будет доставлен сегодня.
Экономить на рекламе. Не нужно настраивать догоняющую рекламу с новой акцией, достаточно отправить уведомление для текущих клиентов.
Избавиться от конкуренции в поисковой выдаче. Пользователи возвращаются через приложение, в котором нет конкурентов, в отличии от поисковой выдачи.

Однако любую из этих задач может решить и нативное мобильное приложение, так что в случае с PWA-разработкой можно поставить знак равенства между PWA Frontend developer и Mobile developer, поскольку они решают одни и те же задачи.

История PWA

Технология была создана компанией Microsoft еще в 2000 году. В 2007 сотрудники Apple разработали свой вариант HTML-приложений.

Изначально приложения для оригинального iPhone разрабатывались именно на платформе web. Однако успеха технология не сыскала по причине скудного UX, и в скором времени появился App Store, который по факту отложил развитие PWA.

Ожила и приобрела широкую известность технология только в 2015 году благодаря расширению возможностей браузера Google Chrome и продвижению Service Worker и Web App Manifest. Тогда же дизайнер Фрэнсис Берримэн и инженер Google Chrome Алекс Рассел придумали термин PWA.

Затем поддержку прогрессивного веб-приложения начали добавлять во все браузеры и операционные системы. К примеру, в Windows, начиная с 10 версии, появилась возможность распространения PWA через Microsoft Store.

Но все же основная причина развития данной технологии — привлечение и удержание мобильного трафика: так, в России мобильный трафик по итогам 2021 года составил рекордные 83%.

Примеры PWA

Существует огромное множество прогрессивных веб-приложений — Telegram, Pinterest, Tinder, Starbucks.

Появились и отдельные сайты-каталоги PWA, например appsco.pe и findpwa.com. Другие ресурсы для тех, кто интересуется разработкой прогрессивных веб-приложений — pwastats.com и web.dev, раздел Case Study.

На этих сайтах можно прочитать про множество успешных кейсов применения PWA с цифрами и с результатами. Один из примеров — как Starbucks смогли в два раза увеличить количество ежедневных пользователей.

Структура PWA

Чаще всего PWA состоит из Service Workers, Application Manifest, Офлайн-кэширования, различных PWA-технологий, адаптивного дизайна, фоновой синхронизации, Push-уведомлений, Media API и Geolocation API.

Пример структуры PWA

Модификаций структуры множество, однако минимальные требования для работы PWA — это:

Валидное и защищенное HTTPS-подключение (у домена должен быть установлен SSL-сертификат).
Успешно установленный файл Service Worker`а.
Правильно установленный и валидный JSON-файл манифеста.

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

Service Worker

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

Из хранилищ у Service Worker’a есть доступ к Cache-хранилищу для web-ресурсов, и IndexDB для данных. Но, самое главное, — полная свобода для реализации бизнес-логики.

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

Web App manifest

Web App manifest — JSON-файл, декларативно определяющий для браузера название приложения, иконку, как будет выглядеть PWA (fullscreen, standalone и другие варианты отображения) и некоторые другие параметры. Позволяет «установить» PWA как отдельное приложение на домашний экран смартфона.

Технические особенности PWA

Способы установки PWA

Существует три способа установки PWA: при помощи автоматического уведомления, через «…» (три точки) в меню браузера, при клике на кнопку установки на странице.

Так выглядит установка с помощью автоматического уведомления

Пример установки через «…» (три точки) в меню браузера

Пример установки при клике на кнопку установки на странице

Отображение PWA

PWA работают на базе WebView, который предоставляют браузеры. WebView очень популярный способ для отображения интерфейсов.

Браузер, который будет открывать PWA после установки приложения, определяется операционной системой iOS или Android.

Для Android используется Google Chrome, а для iOS — Safari.

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

Варианты отображения PWA

Поддержка PWA

По данным caniuse.com, 94% устройств пользователей поддерживают service workers, возможность установки на домашний экран есть у 87% пользователей.

Функциональность PWA

PWA поддерживает множество способов взаимодействия с аппаратной частью телефона.

Такие функции как доступ к контактам пользователя, NFC, считывание QR, поддержка AR/VR пока недоступны, но в ближайшее время их должны добавить.

Подробнее обо всех функциях с примерами кода можно узнать на сайте whatpwacando.today.

Фреймворки и библиотеки

Для PWA необходимо только два файла — Service Worker и Web App manifest, — поэтому для разработки подойдут все актуальные реактивные фреймворки. Для каждого из них есть плагин, который добавляет предустановленный файл манифеста, предустановленный файл service worker’a и дополнительную функциональность.

Также есть фреймворки конкретно для работы с PWA:

React PWA Library
Angular PWA Framework
Vue PWA Framework
Ionic PWA Framework
Svelte PWA Framework

PWA Builder

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

Отличительные качества PWA

Ограниченный доступ к аппаратной части

К недостаткам PWA можно отнести ограниченный доступ к аппаратной части мобильного устройства.

Поскольку прогрессивные веб-приложения запускаются в браузере, они не имеют прямого доступа ко всем возможностям платформы (операционной системы и аппаратным возможностям), к которым имело бы доступ нативное приложение, созданное с использованием SDK-платформы.

Но поддержка и возможности постоянно развиваются и имеющейся на данный момент функциональности достаточно для реализация большинства задач.

Установка в обход магазинов приложений

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

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

Фоновая установка обновлений

Больше не нужно заставлять пользователей устанавливать обновления. Когда вы выпускаете новую версию своего приложения, все ваши пользователи автоматически получают новую версию.

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

Меньший размер приложения

Размер PWA-приложения, как правило, не превышает 1-3 мегабайт. Это меньше, чем мобильное приложение. Средний размер мобильного приложений, по данным 2017 года, 38 Мб для iOS и 15 Мб для Android.

Меньшие затраты на разработчиков

Для компаний, бизнеса разработка и поддержка PWA финансово выгоднее.

rabota.ru Q1 2022

В общем, PWA имеет свои отличительные особенности и недостатки.

Таблица особенностей PWA и нативных приложений

В связи с ограничениями аппаратной части, PWA не может полностью заменить нативные приложения, но четыре ключевые функции PWA-приложений закрывают потребности 90% мобильных пользователей:

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

Мы рекомендуем разрабатывать PWA-приложения когда нужно:

Повысить удовлетворенность и вовлеченность клиентов/пользователей, например, дать пользователям быстрый доступ к повторным заказам.
Протестировать гипотезу с минимальными финансовыми вложениями: прежде чем вкладывать в разработку нативного приложения, можно протестировать на PWA.
Сделать кроссплатформенную совместимость в сжатые сроки
Предложить аудитории новый канал взаимодействия с компанией.

Как интегрировать PWA в сайт: инструкция для начинающих

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

1. Добавить файлы manifest и serviceworker

Инструкция по добавлению файла manifest в проект. Пояснение по полям файла,
Ресурс для генерации файла manifest.
Документация по manifest от разработчиков Mozilla. Примеры файла manifest, пояснение по полям, совместимость с браузерами.
Инструкция по добавлению файла serviceworker, его регистрация, жизненный цикл.
Документация по serviceworker от разработчиков Mozilla. Примеры файла, архитектура, жизненный цикл, кеширование, запросы.

2. Подключить и настроить библиотеки workbox

Документация по всем способам и вариациям подключения workbox.
Все возможные фреймворки и библиотеки, интегрированные с workbox.

3. Добавить кнопки на сайте для установки приложения

Инструкция по добавлению кнопки установки приложения.
Инструкция по добавлению кнопки установки приложения.

4. Запросить разрешения на отправку push-уведомлений

Документация о push-уведомлениях со всеми тонкостями.
Инструкция от разработчиков Mozilla по добавлению push-уведомлений.

Последующие пункты необязательны, но могут пригодиться для дополнительных этапов интеграции.

5. Настроить различные стратегии кэширования для статичных файлов

Инструкция по настройке стратегий кеширования с примерами и пояснением.
Вариации стратегий кеширования, пояснение каждой.

6. Настроить показ уведомлений при обновлении кеша

Документация от разработчиков Mozilla по событию обновления кеша.

7. Запись и чтение данных в IndexedDB

Документация от разработчиков Mozilla по IndexedDB, интерфейсам, спецификацией.
Документация по IndexedDB с примерами использования.

Итог

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

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

Превратите свой веб-сайт в высококачественную PWA — приложения для Windows

Редактировать

Твиттер

Фейсбук

Электронная почта

Статья
16.03.2023

Превратить свой веб-сайт в полнофункциональное высококачественное PWA (прогрессивное веб-приложение) можно за обеденный перерыв! В этой статье мы хорошо проведем вас через сквозной процесс.

Шаг 1. Создайте отчет в PWA Builder

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

Перейти к PWA Builder
Введите URL-адрес веб-сайта, который вы хотите преобразовать в PWA, и нажмите Пуск
Построитель PWA отобразит отчетную карточку PWA, в которой указаны функции, которые есть на вашем веб-сайте, а какие нет.

Шаг 2. Просмотрите свою карточку успеваемости PWA

В вашем отчете PWA содержится оценка вашего веб-сайта из максимального числа 100 баллов. Оценки основаны на трех категориях функций.

Манифест

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

Предупреждение

Изменения, сделанные в онлайн-редакторе манифестов, не будут опубликованы на вашем веб-сайте. Вносимые вами изменения будут использоваться PWA Builder только при создании PWA.

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

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

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

Сервисный работник

Service Worker работает в фоновом режиме, чтобы включить расширенные функции веб-приложений, где в противном случае возникала бы ошибка 404. PWA Builder требует сервисного работника для создания вашего PWA, но если у вас его нет, вы можете использовать один из нескольких готовых сервисных рабочих, предоставляемых PWA Builder. Чтобы использовать готовый сервис-воркер:

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

Безопасность

Все PWA, созданные с помощью PWA Builder, требуют трех протоколов безопасности.

Ваш сайт должен использовать HTTPS.
Ваш сайт должен иметь соответствующий сертификат HTTPS.
Если на вашем веб-сайте нет сертификата HTTPS, вы можете опубликовать его в Azure, чтобы получить встроенную поддержку HTTPS. В качестве альтернативы есть бесплатные сторонние инструменты, такие как Letsencrypt, которые позволят вам бесплатно получить сертификат HTTPS.
Ваш сайт не должен содержать смешанный контент. Смешанный контент — это когда страница, обслуживаемая по HTTPS, содержит ресурсы, загружаемые по HTTP. Смешанный контент ставит под угрозу безопасность HTTPS и вашего PWA.

Для создания PWA вам потребуется несколько фрагментов информации из вашей учетной записи Центра партнеров. Если у вас нет MSA, щелкните здесь, чтобы получить инструкции о том, как начать работу. Вам также необходимо зарегистрироваться в программе Windows Developer Program.

Если вы еще этого не сделали, вам необходимо создать приложение PWA, зарезервировав новое имя. После того, как вы зарезервировали свое имя, нажмите кнопку Начать отправку , чтобы создать новую отправку приложения.

Затем щелкните вкладку Управление продуктами и выберите Идентификация продукта . На странице идентификации продукта будет указан идентификатор пакета вашего продукта, идентификатор вашего издателя и отображаемое имя вашего издателя. Сохраните эти значения и вернитесь в PWA Builder.

Шаг 4. Создайте PWA в PWA Builder

Теперь у вас есть все необходимое для создания PWA в PWA Builder. Вернитесь на сайт PWA Builder и нажмите Generate .

Построитель PWA запросит у вас информацию, которую вы получили из Центра партнеров на шаге 3. Введите значения и нажмите Создать .

Как только PWA Builder создаст PWA, ваш браузер автоматически загрузит его. Ваше PWA упаковано в ZIP-файл, содержащий шесть файлов.

Файл msix — это основной пакет приложения PWA. Этот файл установит ваше PWA на компьютер пользователя.

Файл appx — это классический пакет приложения. Он используется для установки PWA в более старых версиях Windows. Дополнительную информацию см. в разделе Классические пакеты приложений.

Шаг 5. Отправьте пакеты приложений в Microsoft Store

Эти пакеты можно отправить в Microsoft Store так же, как любое другое приложение, упакованное в виде файла MSIX. Дополнительные инструкции по отправке пакетов PWA в магазин см. в разделе Отправка приложений.

Обратная связь

Просмотреть все отзывы о странице

Обеспечение возможности установки PWA — прогрессивные веб-приложения (PWA)

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

Подытожим это следующим образом:

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

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

Чтобы веб-приложение можно было установить, оно должно соответствовать некоторым техническим требованиям. Мы можем считать это минимальными требованиями для веб-приложения, чтобы быть PWA.

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

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

Манифест включается с помощью элемента в HTML-код приложения:

 

  <голова>
    
    
  
  <тело>

Если PWA имеет более одной страницы, каждая страница должна ссылаться на манифест таким образом.

Манифест содержит один объект JSON, содержащий набор элементов, каждый из которых определяет некоторые аспекты внешнего вида или поведения PWA. Вот довольно минималистичный манифест, содержащий всего два элемента: "name" и "icons" .

 {
  "name": "Мой PWA",
  "значки": [
    {
      "src": "иконки/512.png",
      "тип": "изображение/png",
      "Размеры": "512x512"
    }
  ]
}

Требуемые элементы манифеста

Браузеры на основе Chromium, включая Google Chrome, Samsung Internet и Microsoft Edge, требуют, чтобы манифест включал следующие элементы:

имя
иконки
start_url
дисплей и/или display_override

Полное описание каждого члена см. в справочной документации по манифесту веб-приложения.

HTTPS

Чтобы веб-приложение можно было установить, оно должно обслуживаться через HTTPS.

Обратите внимание, что для упрощения разработки браузеры не требуют HTTPS, если доступ к веб-приложению осуществляется через домен localhost .

Service Worker

Чтобы веб-приложение можно было установить, оно должно включать Service Worker с обработчиком событий fetch , обеспечивающим базовые возможности работы в автономном режиме.

Пользователи ожидают найти приложения в магазине приложений для своей платформы, например в Google Play Store или Apple Store.

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

Как опубликовать PWA в магазине Google Play
Как опубликовать PWA в Microsoft Store
Как опубликовать PWA в магазине Meta Quest

PWABuilder — это инструмент, упрощающий процесс упаковки и публикации PWA для различных магазинов приложений. Он поддерживает Google Play Store, Microsoft Store, Meta Quest Store и iOS App Store.

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

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

Это отличный пример того, как PWA могут предложить вам лучшее из обоих миров. Это также хороший пример того, как прогрессивное улучшение работает с PWA: если пользователь сталкивается с вашим PWA в Интернете, используя браузер, который не может его установить, он может использовать его так же, как обычный веб-сайт.

Пользовательский интерфейс для установки PWA из Интернета отличается от одного браузера к другому и от одной платформы к другой. Например, браузер может отображать значок «Установить» в адресной строке, когда пользователь переходит на страницу:

Когда пользователь выбирает значок, браузер отображает приглашение с вопросом, хотят ли они установить PWA, и если они согласны, PWA установлено.

В приглашении отображается имя и значок PWA, взятые из имени и иконок элементов манифеста.

Поддержка браузера

Поддержка установки PWA из Интернета зависит от браузера и платформы.

На рабочем столе:

Firefox и Safari не поддерживают установку PWA на любых настольных операционных системах.
Chrome и Edge поддерживают установку PWA в Linux, Windows, macOS и Chromebook.

На мобильных устройствах:

Firefox, Chrome, Edge, Opera и интернет-браузер Samsung поддерживают установку PWA на Android.
Только Safari разрешено устанавливать PWA на iOS.

Запуск приглашения на установку

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

Этот метод основан на событии beforeinstallprompt , которое запускается в глобальном Объект Window , как только браузер определит, что PWA можно установить. Это событие имеет метод prompt() , который показывает запрос на установку. Итак, PWA может:

добавить собственную кнопку «Установить»
прослушивание события beforeinstallprompt
отменить поведение события по умолчанию, вызвав preventDefault()
в обработчике событий для собственной кнопки «Установить», вызовите prompt() .

Настройка запроса на установку

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

На приведенном ниже снимке экрана показано, как выглядит запрос на установку демо-версии PWAmp в Google Chrome, работающем на Android:

После установки PWA его значок отображается на устройстве вместе с другими приложениями, установленными пользователем, и нажатие на значок запускает приложение.

Вы можете использовать элемент манифеста display для управления режимом отображения : то есть тем, как PWA появляется при запуске. В частности:

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

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

This entry was posted in Популярное

Posted:

Comments: