Progressive Web Application (PWA): различия между версиями

Материал из Minter Wiki
м
м
Строка 3: Строка 3:
  
 
[[Файл:PWA.png|мини]]
 
[[Файл:PWA.png|мини]]
'''Progressive Web Application (PWA)''' - прогрессивная веб-технология, которая функционально и визуально трансформирует практически любой сайт в мобильное приложение. Прямиком из браузера его можно разместить на главном экране смартфона -
+
'''Progressive Web Application (PWA)''' - прогрессивная веб-технология, которая функционально и визуально трансформирует практически любой сайт в мобильное приложение. Прямо из браузера его можно разместить на главном экране смартфона - приложение будет самостоятельно отправлять push-уведомления и получит полный доступ к аппаратным средствам гаджета, которые для этого необходимы.
оно будет самостоятельно отправлять push-уведомления и получит полный доступ к аппаратным средствам гаджета, которые для этого необходимы.
 
  
 
==История==
 
==История==
Технологию PWA разработала [https://ru.wikipedia.org/wiki/Apple корпорация Apple] в далеком 2007 году. Все приложения для iPhone изначально создавали только на web-платформе, они были доступны в Safari (браузер для iOS и macOS). Но, компания не получила той прибыли, на которую рассчитывала, и уже через год во второй версии появился [https://ru.wikipedia.org/wiki/App_Store магазин приложений App Store]. Именно после этого началось развитие технологии PWA.
+
Технологию PWA разработала [https://ru.wikipedia.org/wiki/Apple корпорация Apple] в 2007 году. Все приложения для iPhone изначально создавали только на web-платформе, они были доступны в Safari (браузер для iOS и macOS). Но компания не получила той прибыли, на которую рассчитывала, и уже через год во второй версии появился [https://ru.wikipedia.org/wiki/App_Store магазин приложений App Store]. Именно после этого началось развитие технологии PWA.
  
В течении нескольких лет другие компании копировали поочередно копировали и модифицировали технологию (браузер MeeGo на Nokia N9).
+
В течении нескольких лет другие компании копировали и модифицировали технологию (например, браузер MeeGo на Nokia N9).
  
Настоящим прорывом для технология стал 2015 год, когда благодаря браузеру Google Chrome, в котором появилась масса расширенных возможностей и продвижению Service Worker и Web App Manifest о PWA узнал практически целый мир. Именно тогда дизайнер Фрэнсис Берримэн и инженер Алекс Рассел придумали термин "PWA".  
+
Настоящим прорывом для технология стал 2015 год, когда благодаря браузеру Google Chrome, в котором появилась масса расширенных возможностей, а также продвижению Service Worker и Web App Manifest, о PWA узнал практически весь мир. Именно тогда дизайнер Фрэнсис Берримэн и инженер Алекс Рассел придумали термин "PWA".  
  
После этого технологию начали использовать практически все IT-стартапы. Сейчас оффлайн-работу с PWA могут обеспечить Windows, Linux, iOS, Android, Safari, Firefox, macOS, Chrome OS, Edge и Samsung Internet.
+
После этого технологию начали использовать многие IT-стартапы. Сейчас оффлайн-работу с PWA могут обеспечить Windows, Linux, iOS, Android, Safari, Firefox, macOS, Chrome OS, Edge и Samsung Internet.
  
 
==Основы и технология==
 
==Основы и технология==
Нельзя сказать точно, что такое "PWA приложения". Никто не сможет одним взглядом определить какой сайт - PWA  или нет. Простыми словами, PWA — это веб приложение, которое создали с использованием некоторых технологий для достижения определенных '''целевых показателей'''.  
+
Нельзя сказать точно, что такое "PWA приложения". Никто не сможет с одного взгляда определить, что сайт PWA  или нет. Простыми словами, PWA — это веб приложение, которое создали с использованием некоторых технологий для достижения определенных '''целевых показателей'''.  
  
 
Эти [https://habr.com/ru/post/418923/ показатели] можно расшифровать следующим образом:
 
Эти [https://habr.com/ru/post/418923/ показатели] можно расшифровать следующим образом:
Строка 24: Строка 23:
 
*Привлекательность (Engaging) — работать с приложением очень комфортно и приятно.
 
*Привлекательность (Engaging) — работать с приложением очень комфортно и приятно.
  
По словам представителей корпорации Google, эти показатели можно определить только по ощущениям и внешнему виду и никак иначе. Если говорить простыми словами, то каждый разработчик на старте имеет одинаковые возможности. Стандартные инструменты одинаковы для всех (Push Notifications, Service Worker и другие). Как именно каждый человек сможет "скрутить" свой сайт зависит только от него.
+
По словам представителей корпорации Google, эти показатели можно определить только по ощущениям и внешнему виду и никак иначе. Если говорить простыми словами, то каждый разработчик на старте имеет одинаковые возможности. Стандартные инструменты одинаковы для всех (Push Notifications, Service Worker и другие). Как именно каждый человек сможет собрать свой сайт, зависит только от него.
  
Объем приложения — очень важный фактор. В среднем, вес нативного (стандартного) приложения составляет примерно 25 Мегабайт. Чем больше пользователь скачивает различные сервисы, тем больше приложения захламляют наши смартфоны. Средний объем '''PWA — всего 2 Мегабайта'''. Разница просто огромная.
+
Объем приложения — очень важный фактор. В среднем, вес нативного (стандартного) приложения составляет примерно 25 Мегабайт. Чем больше пользователь скачивает, тем больше приложения захламляют наши смартфоны. Средний объем '''PWA — всего 2 Мегабайта'''. Разница огромная.
  
 
[https://seo.ru/blog/chto-takoe-pwa-prosto-o-tehnologii/ Как самостоятельно создать PWA]
 
[https://seo.ru/blog/chto-takoe-pwa-prosto-o-tehnologii/ Как самостоятельно создать PWA]
Строка 72: Строка 71:
 
==Преимущества PWA==
 
==Преимущества PWA==
  
*Страницы сайта PWA выглядят одинаково красиво на экранах всех устройств и не зависит от браузера, который установлен на смартфоне;
+
*Страницы сайта PWA выглядят одинаково красиво на экранах всех устройств и не зависят от браузера, который установлен на смартфоне;
  
 
*PWA сайт загружается мгновенно. Большинство пользователей просто закрывают вкладку если страница загружается больше 3 секунд. С PWA такое невозможно;
 
*PWA сайт загружается мгновенно. Большинство пользователей просто закрывают вкладку если страница загружается больше 3 секунд. С PWA такое невозможно;
Строка 80: Строка 79:
 
*Работа в оффлайн-режиме. Находясь в онлайн-режиме, PWA синхронизирует данные и обновляет их в кэше;
 
*Работа в оффлайн-режиме. Находясь в онлайн-режиме, PWA синхронизирует данные и обновляет их в кэше;
  
*Уведомления на Android-устройствах. Информация об актуальных событиях, акциях и обновлениях молниеносно появляется на экране пользователя в виде push-уведомлений;
+
*Уведомления на Android-устройствах. Информация об актуальных событиях, акциях и обновлениях сразу появляется на экране пользователя в виде push-уведомлений;
  
 
*PWA самостоятельно индексируются и улучшают SEO-показатели. Неимоверно важная деталь для разработчиков;
 
*PWA самостоятельно индексируются и улучшают SEO-показатели. Неимоверно важная деталь для разработчиков;
Строка 87: Строка 86:
  
 
==Выводы==
 
==Выводы==
С дальнейшим развитием технологии PWA, разработчики смогут быстро и без особых проблем создавать приложения, которые в разы технологичнее от стандартных (нативных) приложений. Да, технология еще очень молода, не все браузеры ее поддерживают (особенно более старые). Но, в конечном итоге, все разработчики будут использовать и развивать именно эту технологию, ведь PWA - это прогрессивное будущее, которое гармонично сольется воедино с другими IT-сферами, которые тоже шагают семимильными шагами.
+
С дальнейшим развитием технологии PWA, разработчики смогут быстро и без особых проблем создавать приложения, которые в разы технологичнее, чем стандартные. Да, технология еще очень молода, не все браузеры ее поддерживают (особенно более старые). Но в итоге все разработчики будут использовать и развивать именно эту технологию, ведь PWA - это прогрессивное будущее, которое гармонично сольется воедино с другими IT-сферами, которые тоже шагают семимильными шагами.
  
 
==Читайте также==
 
==Читайте также==

Версия 21:09, 15 мая 2020


PWA.png

Progressive Web Application (PWA) - прогрессивная веб-технология, которая функционально и визуально трансформирует практически любой сайт в мобильное приложение. Прямо из браузера его можно разместить на главном экране смартфона - приложение будет самостоятельно отправлять push-уведомления и получит полный доступ к аппаратным средствам гаджета, которые для этого необходимы.

История

Технологию PWA разработала корпорация Apple в 2007 году. Все приложения для iPhone изначально создавали только на web-платформе, они были доступны в Safari (браузер для iOS и macOS). Но компания не получила той прибыли, на которую рассчитывала, и уже через год во второй версии появился магазин приложений App Store. Именно после этого началось развитие технологии PWA.

В течении нескольких лет другие компании копировали и модифицировали технологию (например, браузер MeeGo на Nokia N9).

Настоящим прорывом для технология стал 2015 год, когда благодаря браузеру Google Chrome, в котором появилась масса расширенных возможностей, а также продвижению Service Worker и Web App Manifest, о PWA узнал практически весь мир. Именно тогда дизайнер Фрэнсис Берримэн и инженер Алекс Рассел придумали термин "PWA".

После этого технологию начали использовать многие IT-стартапы. Сейчас оффлайн-работу с PWA могут обеспечить Windows, Linux, iOS, Android, Safari, Firefox, macOS, Chrome OS, Edge и Samsung Internet.

Основы и технология

Нельзя сказать точно, что такое "PWA приложения". Никто не сможет с одного взгляда определить, что сайт PWA или нет. Простыми словами, PWA — это веб приложение, которое создали с использованием некоторых технологий для достижения определенных целевых показателей.

Эти показатели можно расшифровать следующим образом:

  • Надежность (Reliable) — приложение загружается моментально, это не зависит от качества сетевого соединения;
  • Быстрота (Fast) — взаимный обмен данными в сети происходит очень быстро;
  • Привлекательность (Engaging) — работать с приложением очень комфортно и приятно.

По словам представителей корпорации Google, эти показатели можно определить только по ощущениям и внешнему виду и никак иначе. Если говорить простыми словами, то каждый разработчик на старте имеет одинаковые возможности. Стандартные инструменты одинаковы для всех (Push Notifications, Service Worker и другие). Как именно каждый человек сможет собрать свой сайт, зависит только от него.

Объем приложения — очень важный фактор. В среднем, вес нативного (стандартного) приложения составляет примерно 25 Мегабайт. Чем больше пользователь скачивает, тем больше приложения захламляют наши смартфоны. Средний объем PWA — всего 2 Мегабайта. Разница огромная.

Как самостоятельно создать PWA

Перед тем, как сделать собственное PWA-приложение, нужно убедиться, что сайт соответствует требованиям технологии:

  • Наличие SSL-сертификата;
  • Мобильная пригодность (есть мобильная версия или внедрен адаптивный дизайн);
  • Скрипт Service Worker, который подгружает файлы и данные, а также сохраняет их;
  • Отдельный URL для каждой страницы;
  • Если чего-то не хватает, сначала придется над этим поработать. Еще перед началом работ рекомендуется установить GIT для контроля версий.

Если все есть, выбираем нужный плагин:

Или каркас для разработки прогрессивных веб-приложений:

  • PWA-Starter-Kit – самый простой каркас от Polymer;
  • Vue Storefront – бесплатный каркас с открытым исходным кодом, подходящий ко многим CMS;
  • Ionic – фреймворк с платным расширением возможностей;
  • Quasar – также поможет сгенерировать Progressive Web Apps.

Пример полной установки и настройки Progressive Web App.

Примеры использования PWA

  • Технология успешно реализовали на примере Google Maps:
PWA maps.png
  • Сервис визуальных закладок и поиска картинок Pinterest тоже реализовал эту технологию:
PWA pinterest.png

Преимущества PWA

  • Страницы сайта PWA выглядят одинаково красиво на экранах всех устройств и не зависят от браузера, который установлен на смартфоне;
  • PWA сайт загружается мгновенно. Большинство пользователей просто закрывают вкладку если страница загружается больше 3 секунд. С PWA такое невозможно;
  • Быстрая установка на смартфон;
  • Работа в оффлайн-режиме. Находясь в онлайн-режиме, PWA синхронизирует данные и обновляет их в кэше;
  • Уведомления на Android-устройствах. Информация об актуальных событиях, акциях и обновлениях сразу появляется на экране пользователя в виде push-уведомлений;
  • PWA самостоятельно индексируются и улучшают SEO-показатели. Неимоверно важная деталь для разработчиков;
  • Кроссплатформенность. С помощью данной технологии можно разрабатывать приложения, которые будут работать на любых устройствах, любых ОС и любых браузерах.

Выводы

С дальнейшим развитием технологии PWA, разработчики смогут быстро и без особых проблем создавать приложения, которые в разы технологичнее, чем стандартные. Да, технология еще очень молода, не все браузеры ее поддерживают (особенно более старые). Но в итоге все разработчики будут использовать и развивать именно эту технологию, ведь PWA - это прогрессивное будущее, которое гармонично сольется воедино с другими IT-сферами, которые тоже шагают семимильными шагами.

Читайте также