Як встановити PWA - Прогресивний веб-додаток

Ці інструкції пояснюють, як локально встановити прогресивний веб-додаток (PWA), що дозволяє отримувати доступ до нього безпосередньо з пристрою без відкриття браузера або пошуку домену. Після встановлення достатньо натиснути на іконку додатку, щоб одразу ним користуватися.

Встановлення на Android Встановлення на iOS

Що таке PWA - Прогресивний веб-додаток?

Прогресивний веб-додаток (PWA) — це веб-сайт, який можна завантажити на пристрій і використовувати як звичайний додаток. Хоча PWA працює як стандартний веб-сайт, його встановлення надає додаткові переваги. Встановлений PWA працює навіть без інтернет-з’єднання і з’являється поряд з іншими додатками, що полегшує доступ. Процес встановлення відрізняється залежно від операційної системи та браузера.

Браузер Safari

Процес встановлення на пристроях iOS

PWA можна встановити на iOS лише через браузер Safari. Спершу відкрийте сайт у Safari. Натисніть кнопку «Поділитися» та оберіть «Додати на домашній екран» у меню. Нарешті, натисніть «Додати» у верхньому правому куті, щоб завершити встановлення. Іконка додатку з’явиться на домашньому екрані.

Скріншот сайту у Safari з виділеною кнопкою трьох точок у правому нижньому куті

Скріншот сайту у Safari з розгорнутим меню та виділеною кнопкою «Поділитися»

Меню спільного доступу iOS з виділеною опцією «Додати на домашній екран»

Екран iOS «Додати на домашній екран» з виділеною кнопкою «Додати»

Скріншоти, що показують кроки встановлення PWA на iOS

Google Chrome

Процес встановлення на пристроях Android

Стандартний браузер Chrome дозволяє встановлювати PWA на Android. Спершу відкрийте сайт у Chrome. Натисніть іконку «три крапки» у правому верхньому куті для відкриття меню. Оберіть «Додати на домашній екран». У спливаючому вікні натисніть «Додати». PWA буде встановлено та з’явиться на домашньому екрані.

Скріншот сайту у Chrome з виділеною кнопкою трьох крапок угорі праворуч

Скріншот сайту у Chrome з розгорнутим меню та виділеною опцією «Додати на домашній екран»

Екран Chrome з опцією встановлення PWA та виділеною кнопкою «Встановити»

Екран Chrome «Додати на домашній екран» з виділеною кнопкою «Додати»

Скріншоти, що показують кроки встановлення PWA на Android

PWA на комп’ютери

Встановлення PWA на Windows та macOS

Google Chrome та Microsoft Edge наразі забезпечують найкращу підтримку PWA на Windows та macOS. Процес встановлення у обох браузерах дуже схожий. Спершу перейдіть на сторінку, яку хочете встановити як PWA. Якщо сайт підтримує PWA, праворуч у рядку адреси з’явиться відповідна іконка. Натисніть на неї, а потім оберіть «Встановити». Альтернативно можна встановити PWA через меню «три крапки». На Windows PWA з’явиться у меню Пуск. На Mac доступ до нього буде через Launchpad та Spotlight.