Прогрессивные веб-приложения (PWA)
2018-10-18 583 4.7 1


PWA



Краткая версия: что такое прогрессивные веб-приложения?

Открыв спойлер можно узнать, что такое PWA


веб-приложения

Как и существующие веб-приложения, они будут размещаться непосредственно на связанном с ними веб-сайте. Разработчики могут обновлять их именно на своем веб-сервере, не отправляя эти обновления в несколько разных магазинов приложений, и одно и то же приложение будет работать на всех браузерах и платформах одинаково.

PWA - это новая технология, сочетающая открытые стандарты Интернета, предлагаемые современными браузерами, чтобы обеспечить преимущества богатого мобильного опыта.

«Прогрессивная» часть названия, означает, что они «постепенно улучшаются» с помощью современных веб-функций, а это значит, что они будут работать и в старых браузерах, которые не поддерживают новые функции, однако работать лучше и с большим количеством функций им "приятней" в современных браузерах.

Эти приложения получат собственное окно и ярлык на панели задач (в Windows 10 и любой версии Chrome) или значок на главном экране (на устройствах Android и других смартфонах). Когда вы их открываете, они быстро загружаются благодаря API Cache и IndexedDB, который хранит ресурсы и данные приложения на вашем устройстве, что позволяет им работать, даже без интернета.





Новый Chrome 70 позволяет устанавливать PWA приложения на Windows 10. Они запускаются из меню "Пуск" и появляются так же, как родные приложения без адресной строки и без вкладок.

Chrome 70, уже доступный сейчас, позволяет устанавливать «Прогрессивные веб-приложения» / PWA в Windows. Когда вы посещаете веб-сайт с помощью PWA, например Twitter или Google Maps, вы можете теперь «установить» его так, чтобы он больше похож на обычное настольное приложение. Сейчас Google обновил сайт Google Фото (photos.google.com ), чтобы функционировать в качестве прогрессивного веб-приложения.

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

◆ PWA можно указывать в магазинах приложений для более легкого обнаружения и установки, но в магазине приложений будут ссылки только на серверы веб-приложений.

Речь идет о том, чтобы установить новый стандарт для устанавливаемых приложений, поддерживаемых каждой платформой.

Это означает, что они будут запускаться как приложения на родном языке в Windows 10 и будут присутствовать в Windows Store. Это значительно повлияет на решение проблемы магазина корпорации microsoft, поскольку Google не хочет поддерживать универсальную Windows-платформу Microsoft (UWP). Другие разработчики, которые не хотели создавать отдельные приложения UWP, внезапно смогут поддерживать Windows 10 с помощью PWA в собственном стиле.



Как установить PWA в Windows 10

Чтобы установить PWA на компьютер под управлением операционной системы Windows, вам сначала нужно посетить веб-сайт, который имеет «Прогрессивное веб-приложение». В настоящее время, сравнительно мало сайтов предлагают PWA. Twitter предлагает PWA, YouTube, который использует свой мобильный интерфейс.

Когда вы находитесь на веб-сайте, который предлагает PWA, вы можете щелкнуть меню> Install [App Name], чтобы установить его. Например, открываем сайт ampbyexample и выбрать меню > Установить приложение AМP ampbyexample.

Если вы не видите этот параметр, веб-сайт, который вы посещаете, не предлагает PWA. Большинство веб-сайтов этого не делают.

Установить ampbyexample PWA

установка PWA в Windows 10

Вам будет предложено установить приложение в вашей системе. Нажмите «Установить».

пуск PWA

Вы получите приложение со своим окном, значком в панели задач и записью в меню «Пуск».


Чтобы удалить PWA, нажмите кнопку меню в верхней части окна приложения и нажмите «Удалить [Имя приложения]».

Кстати, это приложение Twitter - это тот же PWA, который предлагается, когда вы устанавливаете Twitter через Store в Windows 10. Однако Google не доволен Microsoft, так как браузер Microsoft Edge не имеет никакого способа установить PWA из веб.

Вы должны установить их через приложение Store. Да, это странно, но для Microsoft - это простой способ расширить свой магазин приложений для Windows.

Поддержка устанавливаемых PWA доступна начиная с Chrome 67, в Chrome OS и подходит к MacOS и Linux с Chrome 72. Если вы являетесь пользователем Mac или Linux, вы можете протестировать эту функцию сегодня, включив #enable-desktop-pwas flags.



Где можно получить Прогрессивные веб-приложения

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

Каталоги, витрины, и примеры где можно подобрать интересные приложения (прогрессивные)

Каталог PWA

скриншот с сайта pwa-directory

PWA Directory / Каталог PWA - это список содержащий более 1600 Progressive Web Apps, который позволяет искать по ключевому слову или оценке расширения Lighthouse для Chrome

Посмотрите, как другие делают Progressive Web Apps. Вдохновитесь и подумайте, как это принесло пользу этим людям в ключевых бизнес-показателях.

PWA.Rocks

PWA.Rocks-витрина прогрессивных веб-приложений.
PWA.Rocks: прогрессивные веб-приложения. Сайт поддерживается командой разработчиков Opera, и они принимаем запросы на размещение в каталоге, если у вас замечательный отзывчивый PWA.

Помните, что сайты не являются «мобильными», поэтому лучшие PWA отлично смотрятся на рабочем столе и на устройствах.

Витрина Google PWA: витрина Google для компаний, которые были подобраны из PWA.

Бизнес-пример для прогрессивных веб-приложений: Джейсон Григсби приводит убедительное доказательство преимуществ PWA.

Appscope - это каталог лучших прогрессивных веб-приложений, приложений, которые запускаются в браузере, работают на всех устройствах, запускается мгновенно и может быть установлены для работы в автономном режиме.

установить Appscope
Appcope, один из каталогов для Progressive Web Apps (PWA)

Список PWA / Лучшие примеры PWA приложений
Name Description Link Audit score
ReSTbasis Web Starter Kit. [1] 100
The Air Horner An Air horn. [2] 100
chromestatus Chrome Platform Status [3] 100
Serene Notes text & picture notes, retrievable by context [4] 100
Dev.Opera Web features and implementations [5] 73
Appscope Directory of PWAs [6] 100
Bet Calculator Online bet calculator [7] 91
emojoy [8] 82
Expense Manager Example expense manager [9]
Firefox Platform Status Roadmap for web platform features [10]
Flipkart Lite Online shopping [11] 55
GitHub Explorer [12]
Google I/O [13] 82
Guitar Tuner Tune a guitar [14] 82
Instant Website Maker Make A Website [15] 100
Kite OnAir network Kite Network [16]
koolsol solitaire card game [17] 100
Memory Game PWA [18] 91
MotoPlaces Biker App [19] 73
Notepad Offline Notes [20]
Paytm Lite [21] 91
Pokedex [22] 91
Polymon by Polymer [23]
Progressive Beer [24] 82
Progressive Web App.Store A PWA Store [25] 100
QR Code Scanner Offline QR code scanner [26] 100
React HN [27]
Remember GPS logging [28] 73
Resume Nation [29] 91
SVGOMG SVG editor [30] 82
Smaller Pictures [31]
Soundslice [32] 64
SplittyPie [33]
sv-ginger WebGL Morph Demo [34] 91
SuperPWA PWA Software [35] 100
Taskade [36]
TeamGrid [37]
Twitter [38] 82
Uber [39] 82
voice-memos [40]
Washington Post [41] 55
Wave-PD1 Synthesizer with Web Audio API [42] 73
Web Bluetooth (Intel® Edison demo) [43] 100
Web NFC enabled shopping cart [44] 100
Wiki Offline [45] 73
X Sound [46] 45



Как установить PWA?

Хотя это и не требуется, вы можете сохранить PWA на свой (рабочий стол) экран, чтобы сделать их более доступными.


◆ Как установить PWA на Android

Многие PWA автоматически запросят установку при посещении приложения в веб-браузере. Если нет, нажмите кнопку рядом с полем адреса и выберите «Добавить на главный экран» в списке параметров, которые появляются.


◆ Как установить PWA на iOS

При использовании PWA в Safari нажмите кнопку в браузере. Прокрутите список справа от отображаемых опций и выберите «Добавить на главный экран».



Почему PWA лучше, чем традиционные приложения?

Существует много причин, по которым PWA лучше, чем традиционные приложения. Вот некоторые из их наиболее перспективных преимуществ.


Большие стимулы для прогрессивных веб-приложений?

Поставщики браузеров хотят продвигать Progressive Web Apps не просто потому, что они являются самыми последними и лучшими технологиями. Они хотят продвигать их, потому что Progressive Web Apps представляет лучшие практики для веб-сайтов и приложений.

Progressive Web Apps

Анимированный gif добавления на главный экран баннера в Chrome от разработчиков Google


Кросс-платформенная совместимость

В отличие от собственных приложений, которые необходимо разрабатывать для настольных компьютеров, iOS или Android, PWA совместимы со всеми тремя! Это означает, что разработчик должен разработать одно приложение для доступа к пользователям на всех платформах.


Упрощенная разработка

Создание PWA так же просто, как создание веб-сайта. PWA создаются с HTML5 и Javascript и не требуют знания языков программирования, таких как Swift.


Независимость от App Store

В приложениях, основанных на браузере, PWA не подчиняются бюрократии традиционных магазинов приложений. Это означает, что обновления могут быть сделаны мгновенно, без необходимости ждать одобрения группы по обзору. Аналогичным образом, лицензия разработчика не требуется, и разработчики сохраняют все свои доходы (избегая 30% транзакционной платы, которая принудительно применяется к родным приложениям).


Поисковая система

В отличие от собственных приложений, PWA можно обнаружить и указать в поисковых системах, что облегчает их поиск новыми пользователями.

И кажется неизбежным, что поисковые системы будут уделять особое внимание Progressive Web Apps в будущем. Таким образом, вы можете рассматривать Progressive Web Apps как свой шанс кардинально улучшить SEO.


Теги:Windows, pwa

Читайте также:
Похожие записи, из рубрики:
  • Как разогнать видеокарту
  • Бесплатные альтернативы Office и Photoshop
  • Как изменить настройки корзины в Windows 10
  • Что такое операционная система?
Комментарии
0
1 Lybania   (2018-10-27 10:35:00)
Так что уже скоро не будет простых сайтов. Все будут приложениями?

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]