Що таке PWA або Progressive Web Apps

DEV

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

Що таке PWA

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

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

Переваги PWA

1. Розробка Progressive Web Apps відбувається в десятки разів швидше і дешевше, в порівнянні зі звичайним додатком. Розробка повноцінного мобільного додатка, може обійтися вам в десятки тисяч $ і кілька місяців, в той час як PWA додаток створюється за 30 хвилин.
2. Звичайний додаток вимагає до себе окремого підходу, ви повинні будете працювати над сайтом і над додатком окремо. PWA додаток повністю дублює ваш сайт і не вимагає до окремої уваги.
3. Сайти з встановленим Progressive Web Apps індексуються і покращують SEO-показники, додаючи авторитет вашому сайту в очах Google. Як мінімум, Google оцінить наявність у вас SSL сертифікату, так як такі сайти працюють виключно через HTTPS.
4. Завдяки свій універсальності та кросплатформенності, вам необхідно розробити всього один додаток, і він буде працювати на будь-яких пристроях, операційних системах та браузерах.
5. Програми, створені за технологією PWA, здатні працювати при повільному або відсутньому інтернеті - це значить, ви не втратите потенційних клієнтів і покупців.

Реалізація PWA

Для початку ваш сайт повинен мати мобільну версію або бути адаптивним, це важливо так як технологіz в першу чергу актуальна для мобільних користувачів. Далі необхідно щоб ваш сайт працював по захищеному протоколу - HTTPS, це важливо адже ваше додаток буде встановлюватися в обхід PlayMarket і AppStore. Ну і останнє правило говорить - окремий URL для кожної сторінки сайту, що швидше за все і так є нормою).

Якщо ваш сайт побудований на CMS, на зразок того ж Wordpress, то даний функціонал ви зможете впровадити на свій сайт за допомогою готових плагінів і модулів за лічені хвилини. Якщо сайт статичний або зроблений на самописній системі управління, то буде необхідно завантажити в корінь сайту всього 3 файли і підключити їх в шаблоні. Дана процедура займе не більше 30 хвилин, і все одно, ми рекомендуємо звернутися до професіоналів для її виконання, адже коштує це копійки, а ризик "поламати" сайт зведеться до нуля.

Ще важливий момент, в одному з 3-х файлів, які ми повинні будемо підключити в шаблоні сайті, необхідно заповнити дані про додаток! Крім заголовка і опису, необхідно намалювати і підключити іконки для додатка мінімум в 3-х розмірах (128, 256 і 512 пх).

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