Добавить на домашний экран

1. Почему A2HS?
2. Какие браузеры поддерживают A2HS?
3. Как вы используете его?
4. Как вы делаете приложение A2HS-готовым?
5. манифест
6. Соответствующий значок
7. Ссылка HTML на манифест
8. Что A2HS не дает вам?
9. A2HS на рабочем столе
10. Добавление кнопки установки
11. JavaScript для обработки установки

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

Почему A2HS?

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

Какие браузеры поддерживают A2HS?

A2HS поддерживается Mobile Chrome / Android Webview начиная с версии 31, Opera для Android начиная с версии 32 и Firefox для Android начиная с версии 31 версия 58 ,

Как вы используете его?

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

Если у вас есть Firefox для Android, используйте его, чтобы перейти к нашей демонстрации по адресу https://mdn.github.io/pwa-examples/a2hs/. Вы увидите картинки с изображением лисы, но, что более важно, вы увидите значок «домой» со значком плюс (+) внутри - это значок «Добавить на главный экран», отображаемый для любого сайта, который имеет необходимые функции в место.

Нажатие на это покажет баннер подтверждения - нажатие большой кнопки + ДОБАВИТЬ В ГЛАВНЫЙ ЭКРАН завершит действие, добавив приложение на главный экран. (Примечание. В Android 8 и более поздних версиях сначала появится диалоговое окно разрешения «Добавить на главный экран» на системном уровне.)

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

Если в этот момент вы решите не добавлять его на главный экран, это можно сделать позже, используя значок « Добавить на главный экран» в главном меню Chrome.

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

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

Как вы делаете приложение A2HS-готовым?

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

• Чтобы обслуживаться по HTTP - сеть все больше перемещается в более безопасном направлении, и многие современные веб-технологии (включая A2HS) будут работать только в безопасных контекстах.
• Чтобы файл манифеста с правильными заполненными полями был связан с заголовком HTML.
• Чтобы соответствующий значок был доступен для отображения на главном экране.
• Chrome дополнительно требует, чтобы приложение зарегистрировало сервисного работника (например, чтобы оно могло работать в автономном режиме).

манифест

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

Примечание . Расширение .webmanifest указано в Регистрация медиа типа раздел спецификации, но обычно браузеры будут поддерживать манифесты с другими соответствующими расширениями, например .json.

Поля, необходимые для A2HS, следующие:

• background_color: Определяет цвет фона, который будет использоваться в некоторых контекстах приложения. Наиболее подходящим для A2HS является заставка, отображаемая при нажатии значка приложения на главном экране и его первой загрузке (в настоящее время он отображается только в том случае, если приложения были добавлены на главный экран Chrome).
• display: указывает, как должно отображаться приложение. Чтобы оно выглядело как отдельное приложение (а не только веб-страница), вы должны выбрать значение, например, полноэкранный (вообще не отображается пользовательский интерфейс) или автономное (очень похожие, но элементы пользовательского интерфейса системного уровня, такие как строка состояния). может быть видно).
• значки: указывает значки, которые браузер должен использовать при представлении приложения в разных местах (например, на переключателе задач или, что более важно, на главном экране). Мы включили только один в нашу демонстрацию.
• name / short_name: эти поля предоставляют имя приложения, которое будет отображаться при представлении приложения в разных местах. name предоставляет полное имя приложения, а short_name предоставляет сокращенное имя, которое будет использоваться, когда недостаточно места для отображения полного имени. Рекомендуется указывать и то и другое, если имя вашего приложения особенно длинное.
• start_url: предоставляет путь к ресурсу, который должен быть загружен при запуске приложения, добавленного на домашний экран. Обратите внимание, что это должен быть относительный URL-адрес, указывающий на индекс сайта относительно URL-адреса манифеста. Кроме того, имейте в виду, что Chrome требует этого, прежде чем он отобразит баннер установки, тогда как Firefox не требует его для отображения значка «дома с плюсом».

Манифест для нашего примера приложения выглядит следующим образом:

{"background_color": "purple", "description": "Показывает случайные картинки лис. Эй, по крайней мере, это не кошки.", "display": "fullscreen", "icons": [{"src": " icon / fox-icon.png "," sizes ":" 192x192 "," type ":" image / png "}]," name ":" Awesome fox pictures "," short_name ":" Foxes "," start_url " : "/pwa-examples/a2hs/index.html"}

Соответствующий значок

Как показано в приведенном выше листе манифеста, мы включили значок 192 x 192 px для использования в нашем приложении. Вы можете включить больше размеров, если хотите; Android выберет наиболее подходящий размер для каждого варианта использования. Вы также можете включить различные типы значков, чтобы устройства могли использовать лучшие из доступных (например, Chrome уже поддерживает формат WebP).

Обратите внимание, что элемент type в объекте каждого значка указывает mimetype значка, поэтому браузер может быстро прочитать, какой это тип значка, а затем проигнорировать его и перейти к другому значку, если он его не поддерживает.

Что касается дизайна значка, вы должны следовать тем же рекомендациям, что и для любого значка Android (см. Правила дизайна иконок Android ).

Ссылка HTML на манифест

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

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

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

Что A2HS не дает вам?

Имейте в виду, что когда вы добавляете приложение на домашний экран, оно просто делает приложение легкодоступным - оно не загружает ресурсы и данные приложения на ваше устройство и не делает приложение доступным в автономном режиме или что-либо подобное. Чтобы ваше приложение работало в автономном режиме, вы должны использовать Service Worker API обрабатывать хранение активов в автономном режиме, и, если требуется, веб-хранилище или же IndexedDB хранить свои данные.

В нашем примере приложения мы только что использовали сервисного работника для хранения всех необходимых файлов. Работник сервиса зарегистрирован на сайте с последним блоком кода в index.js файл. Затем мы кешируем все ресурсы сайта, используя Cache API и обслуживать их из кэша, а не по сети, используя код в sw.js файл.

A2HS на рабочем столе

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

Примечание . На момент написания описанная ниже функциональность поддерживалась только в более новых версиях Chrome - по умолчанию в Windows и за флагом # enable-desktop-pwas в macOS.

Добавление кнопки установки

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

<button class = "add-button"> Добавить на главный экран </ button>

Затем мы дали ему простой стиль:

.add-button {позиция: абсолютная; верх: 1px; слева: 1 пиксель; }

JavaScript для обработки установки

В нижней части нашего файл index.js Мы добавили немного JavaScript для обработки установки. Прежде всего, мы объявляем переменную deferredPrompt (которую мы объясним позже), получаем ссылку на нашу кнопку установки и устанавливаем для нее отображение: нет изначально:

let deferredPrompt; const addBtn = document.querySelector ('. add-button'); addBtn.style.display = 'none';

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

window.addEventListener ('beforeinstallprompt', (e) => {// Предотвращение автоматического отображения приглашения Chrome 67 и более ранних версий e.preventDefault (); // Сохранение события, чтобы его можно было вызвать позже. deferredPrompt = e; // Обновите пользовательский интерфейс, чтобы уведомить пользователя, которого он может добавить на домашний экран addBtn.style.display = 'block'; addBtn.addEventListener ('click', (e) => {// скрыть наш пользовательский интерфейс, который показывает нашу кнопку A2HS addBtn.style .display = 'none'; // Показать приглашение deferredPrompt.prompt (); // Дождаться, пока пользователь ответит на приглашение deferredPrompt.userChoice.then ((choiceResult) => {if (choiceResult.outcome === ' принято ») {console.log (« Пользователь принял приглашение A2HS »);} else {console.log (« Пользователь отклонил приглашение A2HS »);} deferredPrompt = null;});});});

Итак, вот мы:

• Вызов Event.preventDefault () чтобы Chrome 67 и более ранние версии не вызывали приглашение установки автоматически (это изменилось в Chrome 68).
• Сохраните объект события в переменной deferredPrompt, чтобы впоследствии его можно было использовать для фактической установки.
• Установите кнопку для отображения: блокировать, чтобы она отображалась в пользовательском интерфейсе для пользователя, чтобы щелкнуть.
• Установите обработчик щелчка для кнопки.

Обработчик кликов содержит следующие шаги:

• Снова скрыть кнопку с отображением: нет - она ​​больше не нужна после установки приложения.
• Используйте метод prompt (), доступный для объекта события beforeinstallprompt (хранящегося в deferredPrompt), чтобы вызвать показ приглашения на установку.
• Отвечайте на взаимодействие пользователя с приглашением, используя свойство userChoice, снова доступное в объекте события beforeinstallprompt.
• Установите deferredPrompt в ноль, так как он больше не нужен.

Поэтому, когда кнопка нажата, появляется запрос на установку.

Если пользователь выбирает « Установить» , приложение устанавливается (доступно как автономное настольное приложение), и кнопка «Установка» больше не отображается (событие onbeforeinstallprompt больше не срабатывает, если приложение уже установлено). Когда вы откроете приложение, оно появится в собственном окне:

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

Смотрите также