Зміст
- Сходження на PWA
- PWA діють сьогодні
- Встановлення
- Офлайн і негайний запуск
- Першокласний досвід
- Магазини додатків
- Інтеграція з платформою
- Проблеми дизайну та UX
- Рік PWA
Подібно до того, як кілька років тому адаптивний веб-дизайн заповнив розрив між веб-сайтами для настільних ПК та мобільних пристроїв, прогресивні методи веб-програм в даний час заповнюють розрив між Інтернетом та світом додатків. З врахуванням досвіду користувачів від настільних до мобільних додатків, здається, ніби набагато витонченіший, ефективніший Інтернет розвивається - хоча неминуче не без деяких суттєвих змін в його генетичному коді.
- Як створити прогресивний веб-додаток
Очевидно, є деякі значні селективні тиски, що зумовлюють це. Перш за все, створення власних додатків для кожної ніші не обов'язково ефективне використання ресурсів: користувачі в кінцевому підсумку втрачають пропускну здатність і цінний простір на дисках, а компанії витрачають багато грошей на створення додатків лише для того, щоб їх можна було відмовитись. після їх перших версій. І більшість цих додатків просто керуються веб-вмістом: інформацією, що надходить від веб-служб або системою управління вмістом.
Визначення прогресивної веб-програми не є конкретним. PWA - це просто веб-програма, яка використовує кілька нових API та можливостей веб-платформи, використовуючи прогресивне вдосконалення, щоб запропонувати подібну програму на кожній платформі з однаковою базою коду. Це більше набір найкращих практик та використання API, що створює чудовий досвід роботи для ваших користувачів, тому це не те, що у вас є чи немає PWA; це більше схоже на ваш сайт більш-менш PWA.
Ви збираєтеся розпочати створення нового сайту? Спробуйте використати конструктор веб-сайтів. І обов’язково отримайте необхідну підтримку від гідної служби веб-хостингу. Або щось інше, дивіться наш посібник з найкращого хмарного сховища.
Сходження на PWA
Хоча назва PWA було придумано в 2015 році в статті «Втеча з вкладок, не втрачаючи душі» Алекса Рассела, який працює в Google для команди Chrome, їхня подорож там фактично не розпочалася. Раніше у нас були програми HTML (HTA), які були створені корпорацією Майкрософт у 1999 році, а також багато інших платформ веб-додатків від Nokia, BlackBerry та інших компаній. Потім, у 2007 році, Стів Джобс представив єдиний на той час спосіб створення додатків для оригінального iPhone: PWA, хоча і з іншою назвою. Chrome почав звідти, вдосконалив API через кілька років і винайшов назву PWA.
З огляду на стільки попередніх невдалих досвідів, які намагалися передати веб-вміст у світ програм, чому ми думаємо, що це буде працювати зараз? Ну, в першу чергу, це залежить від компаній, які зараз працюють і просувають технології, що стоять за PWA, такі як Microsoft, Google, Apple та Mozilla, і назвемо лише кілька. Крім того, продуктивність веб-платформи досягла точки, коли немає помітної різниці при порівнянні добре розробленої PWA з рідною програмою. Ці умови ніколи не існували раніше, і це одна з причин, через яку веб-спільнота вирішила, що настав час для PWA.
PWA діють сьогодні
Сьогодні PWA повністю функціональні та встановлюються на:
- Android з більшістю браузерів, а Chrome пропонує найкращий досвід
- iOS із Safari
- Chromebook
- Windows 10 з магазину Microsoft
- Функціональні телефони з KaiOS - форком від Firefox OS - в даний час доступні для мільйонів користувачів переважно в Індії
Пізніше цього року підтримка також надходить до macOS, Windows та Linux через Chrome. Сьогодні він доступний як експериментальний прапор „Desktop PWA“, якщо ви хочете спробувати зараз. Встановлення на Windows на Edge без використання магазину також відбудеться пізніше, хоча конкретні часові рамки не визначені.
Якщо ви перечитаєте список, ви побачите, що кожна платформа має або збирається мати підтримку повністю встановлюваних PWA протягом наступних місяців. І оскільки PWA - це лише веб-сайт із функціями зверху, які активуватимуться лише у сумісних браузерах, ми навіть можемо сказати, що він сумісний з усіма браузерами завдяки своїй базовій функціональності.
Крім того, PWA зараз генеруються з більшості CLI для різних фреймворків, включаючи Angular 6+ CLI, React Create App, PWA Starter Kit від Polymer та Preact CLI. Нарешті, команда Ionic Framework виступила з ідеєю Capacitor, заміною Cordova з відкритим кодом, яка робить власні PWA можливими в кожному магазині додатків.
Встановлення
Одним з найважливіших аспектів PWA є встановлення програми. Цей процес виконується у два необов’язкові кроки: завантаження та збереження файлів програми в автономному режимі та встановлення піктограми в ОС. Оскільки обидва кроки необов’язкові, ви можете запропонувати роботу в автономному режимі в браузері або запропонувати піктограму без встановлення в режимі офлайн. Але справжній PWA повинен включати і те, і інше: він повинен обслуговуватися з TLS за протоколом HTTPS, і користувач вирішить, чи буде він використовувати його в браузері або в межах власної встановленої піктограми.
Офлайн і негайний запуск
Мозок PWA - це службовець, файл JavaScript, встановлений на пристрої користувача, який відповідає за завантаження файлів програми, зберігання їх у кеш-пам’яті та пізніше обслуговування за потреби. Після встановлення працівника служби він діє як мережевий проксі-сервер для кожного ресурсу, необхідного веб-програмі: він може вирішити отримати його з мережі або доставити з локального кешу, що робить програму доступною в автономному режимі, а також доступною лише пару мілісекунд, навіть якщо користувач має з’єднання, імітуючи запуск власної програми.
Для того, щоб встановити працівника служби, ваш документ HTML повинен містити щось на зразок:
if (’serviceWorker’ у навігаторі) navigator.serviceWorker.register ("sw.js");
Це встановить файл "sw.js" на пристрої користувачів для поточної папки в поточному домені - концепція, відома як область. Після його встановлення наступними відвідуваннями будь-якої URL-адреси в межах її обсягу буде керувати цей службовець.
Скажімо, у нас є PWA з чотирма файлами: index.html, app.js, app.css та logo.png. Перше, що потрібно, це встановити ці файли в кеш у файлі sw.js.
const resources = ["index.html", "app.js", "app.css", "logo.png"]; себе. addEventListener ("install", event => {event. waitUntil (caches.open ("myPWAcache"). then (cache => cache.addAll (resources)));});
Тоді, щоб PWA завжди обслуговувався з кеш-пам'яті, нам потрібно прослухати подію вибору в службовій службі та вирішити, яку політику кешу використовувати, наприклад, кеш спочатку з наступним фрагментом.
self.addEventListener ("fetch", e => e.respoWWith (caches.match (e.request). then (res => res);
У цьому випадку кожного разу, коли користувач отримує доступ до PWA (як із браузера, так і з встановленої піктограми), механізм отримуватиме файли з кешу. Перевага PWA в порівнянні з власними програмами полягає в тому, що пристроям не потрібно завантажувати всі файли знову, коли відбуваються зміни, а лише файл, який змінився за допомогою прозорого процесу. Крім того, ми все ще можемо завантажувати частини програми за запитом.
Але проблема полягає в тому, як ви знаєте, які файли були оновлені на сервері, щоб ви могли замінити їх у кеші? Якщо ви не хочете писати працівника служби низького рівня, щоб керувати цим, ви можете скористатися бібліотекою з відкритим кодом Workbox, яка допоможе вам генерувати службовця та маніфест ресурсів для оновлення встановленого пакету.
Майте на увазі, що файли вашого PWA будуть видалені, якщо на пристрої виникає тиск зберігання, якщо ви не попросите постійне сховище, якщо воно доступне:
if (‘зберігання’ в навігаторі && ’persist’ у navigator.storage) navigator.storage.persist ();
У Chrome та більшості браузерів Android ваш додаток не може використовувати більше п’яти відсотків доступного місця; на iOS це лише 50 МБ (близько 50 МБ) на хост; в Edge він змінюється відповідно до загального обсягу пам'яті, а в магазині Windows - необмежений.
Першокласний досвід
У нас є мозок, і тепер настав час для серця: веб-програма маніфест. Мета перетворення веб-сайту в PWA полягає не лише в тому, щоб забезпечити його доступність швидко або в автономному режимі, а й у тому, щоб він мав власну піктограму в ОС та пропонував повністю самостійний досвід роботи, як будь-яка інша встановлена програма.
Маніфест - це файл JSON, який визначає метадані для PWA, що використовується браузером або магазином програм для визначення поведінки встановлення.
Файл визначає кілька властивостей як метадані для вашого PWA. Кожна ОС прочитає ці властивості та постарається зробити все можливе, щоб відповідати бажаному досвіду. Наприклад, Android читатиме 'display: standalone' і створюватиме звичайну роботу додатка. Завдяки ‘display: minimal-ui’ він створить досвід роботи з видимою URL-адресою та сертифікатом TLS - корисно для програм, що чутливі до безпеки. Завдяки функції «дисплей: повноекранний» він створює повністю захоплюючі програми без рядка стану або видимої кнопки назад. Набір піктограм та кольорів визначає, як виглядатимуть вікна вашого додатка заставки або рядки заголовків.
Є деякі генератори маніфестів, такі як Генератор маніфестів веб-додатків або Конструктор PWA, які також змінюватимуть розмір піктограми для вас у різних роздільних здатностях, якщо ви надаєте високу роздільну здатність (мінімум 512 пікселів).
Коли файл маніфесту зв’язаний у вашому HTML-документі, користувачі зможуть встановити програму, використовуючи різні техніки, залежно від браузера, як правило, під назвою Додати на головний екран, Встановити або просто Додати. Якщо ваш PWA може сканувати Bing, Microsoft автоматично додасть його до магазину Microsoft, щоб користувачі Windows 10 змогли встановити його звідти.
У деяких операційних системах ваш PWA матиме можливість захоплювати посилання. Це означає, що після того, як користувач встановить програму, будь-яка URL-адреса, що перебуває в межах вашого маніфесту, буде відкрита в межах вашої програми, а не в браузері, незалежно від того, з’являється вона у браузері чи інших додатках, таких як WhatsApp, Facebook або електронного листа.
Якщо ви прийняли вимоги PWA, які ми визначаємо тут, деякі платформи пропонуватимуть емблему для оточення (невеликий значок, як правило, на панелі URL-адрес, що вказує, що веб-сторінку можна встановити), або банер веб-програми. Якщо ви бажаєте, ви також можете додати власну кнопку Встановити, використовуючи такий фрагмент:
window.addEventListener ("beforeinstallpr ompt", функція (e) {e.prompt (); // покаже вказівку на встановлення})
Якщо інстальовано PWA, подія, яку встановлено додатком, буде запущена на об'єкті вікна, щоб ви могли відстежувати статистику, яка її слухає.
Магазини додатків
Однією з головних переваг встановлення з браузера є можливість уникнути процесу затвердження магазину додатків або необхідності платити за те, щоб бути видавцем. Це має очевидні переваги, такі як миттєва публікація, створення приватних програм для компаній або додатків, які не слід приймати в магазинах.
Але деякі компанії хочуть бути в магазині. На сьогодні єдиними магазинами, які офіційно приймають PWA, є Магазин Windows та Магазин kaiOS. На щастя, за допомогою таких інструментів, як Capacitor (на даний момент у версії Alpha) або PWA Builder, ми можемо створювати та підписувати власні пакети для інших платформ.
У магазині Google Play вже опубліковано кілька PWA, таких як Twitter Lite та Google Maps Go, які зараз реалізуються на замовлення. Chrome запропонує рішення від Chrome 68 через надійні веб-дії. З цього моменту ми зможемо створити пакет Android (APK) із панеллю запуску до нашого PWA та завантажити його в магазин. Для магазину Microsoft Store у Windows 10 сайт PWA Builder в даний час допомагає у створенні пакета APPX для Windows 10. Використовуючи веб-перегляд, ви можете вручну створити додаток iOS для App Store, але будьте надзвичайно обережні з правилами магазину.
Інтеграція з платформою
Впроваджуючи методи прогресивного вдосконалення, ви зможете використовувати багато функцій, включаючи push-сповіщення, доступ до камери та мікрофона, геолокацію, датчики, платежі, діалогові вікна спільного використання та офлайн-сховище. Усі ці функції працюють безпосередньо в рамках моделі захисту браузера, включаючи діалогові вікна дозволів.
Ми також можемо спілкуватися з іншими програмами за допомогою схем URI, таких як відкриття Twitter, YouTube або WhatsApp через їх URL-адреси або користувацькі URI, такі як WhatsApp: //.
Нарешті, під час створення власних PWA, які публікуються в магазині за допомогою конденсатора або в магазині Microsoft, ми зможемо перейти до власних API, які дозволять нам виконувати практично будь-який власний код. Ця інтеграція з Windows 10 включає апаратний доступ, а також інтеграцію з ОС, пропонуючи такі варіанти, як Pin to Start. Наприклад, Twitter PWA дозволяє закріпити будь-якого користувача на початковому екрані.
Проблеми дизайну та UX
Проектування PWA має унікальні завдання, тому важливо витратити трохи часу на дослідження, якомога більше тестування та врахування наступного:
- Користувачі очікуватимуть подій, подібних до додатків.
- Процес встановлення все ще новий, тому нам потрібно докласти додаткових зусиль, щоб пояснити, як встановити програму.
- Оновлення програми у фоновому режимі без взаємодії з користувачем є чудовим, але це також створює деякі проблеми для UX.
- На робочому столі адаптивний веб-дизайн набуває нових меж, оскільки вікна PWA можуть бути крихітними, набагато меншими, ніж мобільний огляд. Це означає, що нам потрібно створити конкретні подання або невеликі віджети для цього формату, як це бачимо сьогодні в ОС Chrome.
- Push-повідомлення повинні додавати цінності лише користувачеві, тому навчіться запитувати в потрібний момент і не втрачайте можливості надсилати повідомлення, які не є корисними чи цікавими.
- Нам потрібно розробити веб-продуктивність та автономний доступ.
Рік PWA
З додаванням iOS та настільних ПК цього року, PWA сьогодні є скрізь. Але ми повинні пам’ятати, що їхня подорож тільки починається, тому чекайте частих змін і не забудьте постійно оновлюватись найновішими техніками та ідеями, щоб забезпечити чудовий досвід для користувачів під час розвитку платформи.
Ця стаття була спочатку опублікована у номері 308 від чистий, самий продаваний у світі журнал для веб-дизайнерів та розробників. Придбайте випуск 308 тут або підпишіться тут.
