Споделяне чрез


Създаване и разпространение на прогресивно уеб приложение

Използвайте студиото за дизайн на Power Pages за конфигуриране на вашето прогресивно уеб приложение (PWA). Можете да активирате или деактивирате възможността за PWA. Можете да персонализирате настройките на PWA и да се подготвите да създадете пакет с приложения, който да публикувате в съответните магазини за устройства, ако решите.

  1. Отидете на Power Pages.

  2. Изберете сайта си и изберете Редактиране.

  3. В студиото за дизайн изберете работната област Настройка и след това изберете Прогресивно уеб приложение.

    Стартирайте прогресивно уеб приложение от работната област за настройка.

  4. Изберете Разрешаване на PWA.

    Активиране на прогресивно уеб приложение от работната област за настройка.

Брандирайте приложението си

Можете да създадете своя собствена марка PWA, като използвате опциите за персонализиране, за да промените името на приложението, началната страница, цвета и др.

Бележка

На устройства с iOS иконите за PWA ще се показват като миниатюри и персонализираният начален екран няма да се показва.

  1. В студиото за дизайн изберете Прогресивно уеб приложение.

  2. Актуализирайте следните настройки на PWA за вашия сайт.

    Настройка Описание
    Обръщение Името на PWA на портала, който се появява на мобилното устройство и в магазина за приложения.
    Описание Описанието на PWA, което се появява на мобилното устройство и в магазина за приложения.
    Начална страница за приложението Началната страница на сайта, когато се отвори чрез PWA.
    Фон на началния екран Цветът на фона за началния екран, когато PWA е зареден.
    Икона на приложение Иконата за приложението, което се появява на мобилното устройство и в магазина за приложения.
    Забележка: Поддържа .jpg, .jpeg, .png формати с максимален размер на качване от 5 MB. Размерът на иконата трябва да бъде 512 × 512 пиксела.

    Бележка

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

Определяне на офлайн поведението

PWA предлага поддръжка за гладка навигация, когато използваното устройство е офлайн или е прекъснато от интернет. Можете да изберете страниците в сайта си, които са достъпни офлайн (само за четене), и страница със съобщения за останалите възможности на портала, които не са разрешени за офлайн достъп.

Конфигурирайте офлайн страници за портала PWA

  1. В дизайнерското студио, в работната област Настройка изберете Прогресивно уеб приложение.

  2. Под Още настройки изберете Определете офлайн страници.

    Избор на страници за офлайн режим.

  3. Изберете страниците, до които искате да разрешите достъп на потребителите, когато използват PWA офлайн.

    Управление на страници офлайн.

Бележка

Когато конфигурирате офлайн достъп за PWA страници, не забравяйте да вземете предвид ограниченията за съхранение за потребителските устройства. Когато изискването за съхранение за офлайн PWA достъп надвиши наличното място за съхранение на устройството, целият портал няма да бъде достъпен за офлайн достъп. Препоръчваме ви да тествате потребителското изживяване при офлайн достъп и да кеширате само страниците, които ще бъдат най-полезни и важни за вашите потребители. Не забравяйте, че офлайн страниците могат да показват само информация; страници, свързани към Microsoft Dataverse, които съдържат формуляри за попълване или изпълнение на заявки, няма да работят, докато сте офлайн.

Създаване на страница за офлайн съобщения

Когато дадено устройство е офлайн, страницата, която конфигурирате като офлайн страница за съобщения, се показва, когато потребителите се опитат да получат достъп до страници, които не са разрешени за офлайн достъп.

  1. В студиото за дизайн изберте работната област Страници.

  2. Изберете Офлайн страница по подразбиране.

  3. Персонализирайте страницата.

Бележка

  • Не можете да промените Заглавие или Частичен URL адрес ("/default-offline-page") полета за офлайн страницата. Офлайн страница по подразбиране ще се показва на потребителите, ако офлайн страницата липсва.
  • В зависимост от браузъра ви може да отнеме няколко минути, докато отрази промените ви. След като персонализирате офлайн изживяването на PWA, изберете Преглед, за да изчистите кеша на сайта си.

Тествайте своя сайт в офлайн режим

След като разрешите офлайн страници, можете да използвате мобилно устройство в офлайн режим и да преглеждате различни страници, които са разрешени за офлайн достъп.

  1. Прегледайте вашия сайт с помощта на уеб браузър на вашето мобилно устройство в онлайн режим.

  2. Изберете Добави към началния екран или подобна опция. Например на Android устройство, опцията може да бъде + Добавяне към>Екран на приложението.

    Добавяне на PWA към началната страница на мобилно устройство.

    Бележка

    Това действие изтегля портални страници, които са били активирани за офлайн сърфиране. Това може да отнеме известно време в зависимост от честотната лента на мрежата и размера на страниците, избрани за офлайн сърфиране.

  3. Активирайте офлайн режим в мобилното си устройство.

  4. Отворете портала си от началния екран. В горната част ще видите известие, което ви напомня, че сърфирате в офлайн режим. Ако изберете страници, които не са разрешени за офлайн сърфиране, се показва офлайн съобщението.

    Страница само за четене в офлайн режим за PWA приложение.Не е свързана с интернет страницата в приложението PWA.

Разпространение на вашето приложение

Можете да разпространявате приложението си или чрез браузър, или чрез магазин за приложения.

Разпространявайте приложението си с помощта на браузър

След като вашият портал е активиран като PWA, вашите потребители могат да фиксират сайта на Power Pages като приложение към началния екран на тяхното устройство. Тази опция се поддържа на всички платформи (Android, iOS, Chromebook и Windows) в допълнение към всички форм-фактори (мобилни устройства, настолни компютри и таблети).

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

Поредица от изображения, първото изображение показва портал, отворен в браузър на мобилно устройство. Следващото изображение показва командата от менюто Добавяне към началния екран. На следващото изображение потребителят е подканен да инсталира приложението. Последното изображение показва приложението с неговия персонализиран фон и брандиране, работещо като собствено мобилно приложение.

Android и iOS всеки предлага различен метод за инсталиране, базирано на браузър.

Разпространете приложението си чрез магазин за приложения

Прогресивните уеб приложения могат да се разпространяват и чрез магазини за приложения за Android iOS и Windows. Това разпространение се извършва чрез създаване на пакет от приложения и публикуване на приложението в съответния магазин за приложения. За създаването на пакетите за приложения си партнираме с PWABuilder, който предоставя платформа за генериране на пакети приложения за различни магазини за приложения.

За да създадете пакет с приложения, отидете на Настройване на работно пространство в дизайнерското студио. Под Пакет приложения изберете Създайте пакет с приложения.

Отваряне на PWA Builder за създаване на пакет с приложения в студио за портали.

Това ви отвежда до уебсайта на PWA Builder, където можете да създадете пакет с приложения за различни магазини за приложения. Пакетът, който създавате с помощта на PWA Builder, съдържа:

  • Пакет от приложения за PWA, който да се използва в съответния магазин за приложения.

  • Документ стъпка по стъпка относно публикуването на приложението.

За повече подробности отидете на PWA център за ресурси.

За iOS PWABuilder предоставя поддръжка за генериране на пакета за магазин за приложения. За повече информация вижте Пакет за App Store.

За Windows вижте пакета за Microsoft Store.

Други съображения за Android

За платформата Android можете също да актуализирате сертификата Android с опцията Актуализиране на Android сертификата .

Елемент от менюто в студиото за портали за актуализиране на сертификат за Android.

Актуализирайте заглавието и пръстовия отпечатък на сертификата SHA-256, за да актуализирате файла с връзки към цифрови активи (assetlinks.json), който доказва собствеността върху вашия PWA.

Актуализиране на подробности за сертификата за Android.

Вижте също

Общ преглед на сайтовете като прогресивни уеб приложения
Общ преглед на прогресивните уеб приложения (PWA)
Създаване и разпространение на прогресивно уеб приложение (видеоклип)