Progressive Web Apps: WhoAmI

Інтерес до розробки додатків для мобільних операційних систем в співтоваристві розробників стабільно зростає, кількість інструментів і підходів дозволяють створювати додатки стає все більше. Сьогодні я хочу написати про одному з нових підходів, а саме про Progressive Web Apps.





Що таке PWA



PWA – це назва групи програм, які використовують стек Web технологій (JS + HTML + CSS) і дозволяють поєднати простоту використання Web-сайту зі специфічними для рідних додатків операційної системи UX і технічними можливостями.
Основне призначення PWA збільшити конверсію, кількість користувачів і зручність використання Веб-додатків на мобільних пристроях.

Progressive Web Apps є логічним продовженням Accelerated Mobile Pages, таким чином, якщо ви раніше створювали AMP додатки, то вам однозначно варто оновити свій додаток до норм PWA додатків. Якщо ви до цього нічого не чули про AMP, то це не стане для вас проблемою під час вивчення PWA.

PWA додатком необхідно бути:
  • Прогресивним – Працювати з кожним користувачем в не залежності від оточення використовуючи метод поступового поліпшення як основний принцип роботи;
  • Адаптивним – Підлаштовуватися під будь-який пристрій: десктоп, смартфони, планшети або щось інше;
  • Незалежним від з'єднання – Використовуючи Service Worker додаток повинен працювати в оффлайн режимі при перериванні або відсутності з'єднання;
  • Виглядати нативно – Додаток повинен відповідати звичним для користувача способів взаємодії та навігації;
  • Самообновляемым – Додаток повинен контролювати процес автоматичного оновлення за допомогою Service Worker API;
  • Безпечним – за Допомогою використання HTTPS запобігати перехоплення і підміну даних;
  • Визначаються – за допомогою W3C маніфесту та реєстрації через Service Worker додаток ідентифікується як «додаток» пошуковими системами;
  • Утримує – Використовуючи технічні можливості мотивуємо користувача ще раз використовувати додаток, наприклад, за допомогою push-повідомлень;
  • Легким в установці – Дозволяє «зберегти» додаток на пристрої користувача за допомогою додавання PWA програми в списку встановлених програм без використання магазину додатків;
  • Легким у використанні – Для початку використання програми досить відкрити URL. Установка програми не обов'язкова.


Цільова Аудиторія

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

Стандартний процес роботи

Користувач, використовуючи смартфон, відкриває посилання отриману за допомогою будь-якого додатку, після завантаження web-сторінки користувач отримує повноцінне додаток, яке він може використовувати.
Тим самим почати використовувати новий додаток стає набагато простіше, адже не потрібно заходити в магазин додатків і чекати поки встановиться необхідне користувачеві додаток.
При необхідності користувач може додати додаток на робочий стіл за допомогою пункту опцій в браузері «Add to home screen». Або додаток може запропонувати користувачеві зробити це замість нього за допомогою – Web app-install banner.



Після чого на головному екрані користувача буде створена іконка попередньо зазначена в маніфесті програми. Розробник може керувати стилем браузера і варіантом відображення програми після установки. Так само Service Worker йде в комплекті з PWA додатком буде відповідати за кешування, оффлайн роботу і обробку пуш повідомлень.

посилання

Web Fundamentals – developers.google.com/web/fundamentals/?hl=en
Progressive Web Apps – developers.google.com/web/progressive-web-apps

Замість висновку

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

У разі успішності опитування очікуйте серію статей про PWA з відкритим вихідним кодом розташованим на github.

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.