Создание и распространение прогрессивного веб-приложения
Используйте студию дизайна Power Pages для настройки своего прогрессивного веб-приложения (PWA). Можно включить или отключить возможность PWA. Вы можете настроить параметры PWA и подготовить создание пакета приложения для публикации в магазине устройств по вашему выбору.
Переход к Power Pages.
Выберите свой сайт и нажмите Редактировать.
В студии дизайна выберите рабочую область Настройка, затем выберите Прогрессивное веб-приложение.
Выберите Включить PWA.
Фирменная настройка своего приложения
Вы можете создать собственное фирменное приложение PWA, используя параметры настройки для изменения имени приложения, начальной страницы, цвета и других параметров.
Заметка
На устройствах iOS значки для PWA будут отображаться в виде эскизов, а настроенный экран-заставка отображаться не будет.
В студии дизайна выберите Прогрессивное веб-приложение.
Обновите следующие настройки PWA для вашего сайта.
Параметр Description Title Имя PWA портала, которое отображается на мобильном устройстве и в магазине приложений. Description Описание PWA, которое отображается на мобильном устройстве и в магазине приложений. Начальная страница приложения Стартовая страница сайта при его открытии через PWA. Фон экрана-заставки Цвет фона для экрана-заставки при загрузке PWA. Значок приложения Значок приложения, который отображается на мобильном устройстве и в магазине приложений.
Примечание. Поддерживает форматы .jpg, .jpeg, .png с максимальным размером отправки 5 МБ. Размер значка должен быть 512 × 512 пикселей.Заметка
В зависимости от вашего браузера, изменения могут занять некоторое время. После настройки PWA выберите Предварительный просмотр, чтобы очистить кэш вашего сайта.
Определение автономного поведения
PWA обеспечивает поддержку плавной навигации, когда используемое устройство находится в автономном режиме или отключено от Интернета. Вы можете выбрать страницы внутри сайта, которые доступны в автономном режиме (только для чтения), и страницу сообщений для остальных возможностей портала, которые не включены для автономного доступа.
Настройка автономных страниц для портала PWA
В студии дизайна в рабочей области Настройка выберите Прогрессивное веб-приложение.
В разделе Дополнительные параметры выберите Определить автономные страницы.
Выберите страницы, к которым вы хотите предоставить пользователям доступ при использовании PWA в автономном режиме.
Заметка
При настройке автономного доступа к страницам PWA убедитесь, что вы учитываете ограничения хранилища для устройств пользователей. Когда требования к хранилищу для автономного режима PWA превышают доступную емкость хранилища на устройстве, весь портал будет недоступен для автономного доступа. Мы рекомендуем вам протестировать пользовательский интерфейс автономного доступа и кэшировать только те страницы, которые будут наиболее полезными и важными для ваших пользователей. Помните, что автономные страницы могут отображать только информацию; страницы, подключенные к Microsoft Dataverse, которые содержат формы для заполнения или выполнения запросов, не будут работать в автономном режиме.
Настройка страницы автономных сообщений
Когда устройство находится в автономном режиме, страница, которую вы настраиваете как страницу автономных сообщений, отображается для пользователей, когда они пытаются получить доступ к страницам, для которых не включен автономный доступ.
В студии дизайна выберите рабочую область Страницы.
Выберите Автономная страница по умолчанию.
Настройте эту страницу.
Заметка
- Вы не можете изменить поля Заголовок и Частичный URL ("/default-offline-page") для автономной страницы. Автономная страница по умолчанию будет отображаться для пользователей, если автономная страница отсутствует.
- В зависимости от вашего браузера, изменения могут занять некоторое время. После настройки автономного режима PWA выберите Предварительный просмотр, чтобы очистить кэш вашего сайта.
Проверка сайта в автономном режиме
После того, как вы включили автономные страницы, теперь вы можете использовать мобильное устройство в автономном режиме и просматривать разные страницы, для которых включен автономный доступ.
Перейдите на свой сайт с помощью веб-браузера на мобильном устройстве в онлайн-режиме.
Выберите Добавить на домашний экран или аналогичный вариант. Например, на устройстве Android, параметр может быть + Добавить в>Экран приложения.
Заметка
Это действие загружает страницы портала, для которых разрешен автономный просмотр. Это может занять некоторое время, в зависимости от пропускной способности сети и размера страниц, выбранных для автономного просмотра.
Включите автономный режим для мобильного устройства.
Откройте свой портал с главного экрана. Вверху вы увидите уведомление о том, что вы просматриваете в автономном режиме. Если вы выберете какие-либо страницы, которые не включены для автономного просмотра, появится сообщение об автономном режиме.
Распространение приложения
Вы можете распространять свое приложение либо с помощью браузера, либо через магазин приложений.
Распространение приложения с помощью браузера
После того, как ваш портал будет включен в качестве PWA, ваши пользователи смогут закреплять сайты Power Pages в качестве приложения на главном экране своего устройства. Этот переметр поддерживается на всех платформах (Android, iOS, Chromebook и Windows) в дополнение ко всем форм-факторам (мобильное устройство, компьютер и планшет).
На следующих рисунках показано взаимодействие пользователя при добавлении портала на главный экран с помощью браузера, который устанавливает портал как PWA.
Android и iOS предлагают свой метод установки через браузер.
Распространение приложения через магазин приложений
Прогрессивные веб-приложения также можно распространять через магазины приложений для Android, iOS и Windows. Это распространение осуществляется путем создания пакета приложения и публикации приложения в соответствующем магазине приложений. Для создания пакетов приложений мы сотрудничаем с PWABuilder, который предоставляет платформу для создания пакетов приложений для различных магазинов приложений.
Чтобы создать пакет приложения, перейдите в рабочую область Настройка в студии дизайна. В разделе Пакет приложения выберите Создать пакет приложения.
Вы попадете на веб-сайт конструктора PWA, где вы можете создавать пакет приложения для различных магазинов приложений. Пакет, который вы создаете с помощью конструктора PWA, содержит:
Пакет приложения для PWA, который будет использоваться в соответствующем магазине приложений.
Пошаговый документ о публикации приложения.
Для получения более подробной информации перейдите Центр ресурсов PWA.
Для iOS PWABuilder обеспечивает поддержку создания пакета магазина приложений. Дополнительные сведения см. в разделе Пакет для App Store.
Для Windows см. раздел Пакет для Microsoft Store.
Прочие рекомендации для Android
Для платформы Android вы также можете обновить сертификат Android, используя параметр Обновить сертификат Android.
Обновите заголовок и SHA-256 отпечаток сертификата, чтобы обновить файл ссылок на цифровые активы (assetlinks.json), подтверждающий право собственности на ваш PWA.
См. также
Обзор сайтов как прогрессивных веб-приложений
Обзор прогрессивных веб-приложений (PWA)
Создание и распространение прогрессивного веб-приложения (видео)