Створіть і розповсюджуйте прогресивний веб-додаток

Скористайтеся студією дизайну Power Pages, щоб настроїти прогресивну вебпрограму (PWA). Ви можете ввімкнути або вимкнути функцію PWA. Ви можете налаштувати параметри PWA та підготуватися до створення пакета додатків для публікації у відповідних магазинах пристроїв, якщо захочете.

1. Перейдіть до Power Pages.

2. Виберіть свій сайт і натисніть Редагувати.

3. У студії дизайну виберіть робочу область Налаштування, а потім виберіть Прогресивна вебпрограма.

   

4. Виберіть Увімкнути PWA.

   

Створіть емблему для своєї програми

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

1. В студії дизайну виберіть Прогресивна вебпрограма.

2. Оновіть наведені параметри PWA для свого сайту.

   Параметр	Опис
   Звання	Назва порталу PWA, яка відображається на мобільному пристрої та в магазині додатків.
   Опис	Опис PWA, який з’являється на мобільному пристрої та в магазині додатків.
   Початкова сторінка для програми	Стартова сторінка для сайту, коли він відкривається через PWA.
   Фон заставки	Колір фону для екрана заставки під час завантаження PWA.
   Піктограма програми	Піктограма програми, яка з’являється на мобільному пристрої та в магазині додатків. Примітка: Підтримує формати .jpg, .jpeg, .png з максимальним розміром завантаження 5 МБ. Розмір піктограми має бути 512 х 512 пікселів.

   Нотатка

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

Визначення поведінки в автономному режимі

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

Настроювання автономних сторінок для порталу PWA

1. У студії дизайну в області Налаштування робочої області виберіть Прогресивний веб-додаток.

2. У розділі Додаткові параметри виберіть Визначити автономні сторінки.

   

3. Виберіть сторінки, до яких слід надати користувачам доступ під час використання PWA в автономному режимі.

   

Настроювання сторінки повідомлень у автономному режимі

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

1. У студії дизайну виберіть робочу область Сторінки.

2. Виберіть Автономна сторінка за умовчанням.

3. Налаштуйте сторінку.

Перевірте сайт в автономному режимі

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

1. Перейдіть на сайт за допомогою браузера на мобільному пристрої в онлайн режимі.

2. Виберіть Додати на головний екран або аналогічний параметр. Наприклад, на пристрої можна Android вибрати + Додати на>Екран програми.

   

   Нотатка

   Ця дія завантажує сторінки порталів, включені для перегляду в автономному режимі. Це може зайняти деякий час залежно від пропускної здатності мережі та розміру сторінок, вибраних для перегляду в автономному режимі.

3. Увімкніть автономний режим для свого мобільного пристрою.

4. Відкрийте свій портал з головної сторінки. Угорі з’явиться сповіщення з нагадуванням про те, що ви переглядаєте веб-сторінки в автономному режимі. Якщо ви виберете сторінки, які не ввімкнено для перегляду в автономному режимі, з’явиться повідомлення в автономному режимі.

   

Розповсюдження програми

Програму можна розповсюджувати за допомогою браузера або в магазині програм.

Розповсюджуйте програму за допомогою браузера

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

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

Android І iOS кожен з них пропонує різні методи встановлення на основі браузера.

Розповсюдження програми в магазині програм

Прогресивні веб-додатки також можна розповсюджувати через магазини додатків для Android,, iOS і Windows. Це розповсюдження здійснюється шляхом створення пакета додатків та публікації програми у відповідному магазині додатків. Для створення пакетів додатків ми співпрацюємо з PWABuilder, який надає платформу для створення пакетів додатків для різних магазинів додатків.

Щоб створити пакет додатків, перейдіть до розділу Налаштування робочої області в студії дизайну. У розділі Пакет програми виберіть Створити пакет програми.

Це приведе вас на веб-сайт PWA Builder, де ви можете створити пакет додатків для різних магазинів додатків. Пакет, створений за допомогою конструктора PWA Builder, містить:

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

• Покроковий документ про публікацію програми.

Для отримання додаткових відомостей перейдіть до центру ресурсів PWA.

Для iOS PWABuilder передбачена підтримка генерації пакета App Store. Для отримання додаткової інформації дивіться пакет для App Store.

Для Windows дивіться пакет для Microsoft Store.

Інші фактори, які необхідно враховувати для Android

Для Android платформи ви також можете оновити Android сертифікат за допомогою опції Оновити сертифікат Android .

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

Див. також

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