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

Что такое PWA?

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

Есть три основных ключевых слова, которые резюмируют PWA:

  • Надежность: быстрая загрузка и поддержка автономной работы.
  • Быстро. Быстро реагируйте на действия пользователя и предоставляйте доступ к встроенным функциям устройства интуитивно понятным способом.
  • Вовлечение:похоже на нативное приложение для мобильных устройств.

Давайте поговорим об основных строительных блоках PWA.

  • Service Workers: это JavaScript, работающий в фоновом процессе, даже если ваше приложение закрыто. Сервисные работы являются основным строительным блоком, поскольку они позволяют нам получать автономный доступ к файлам кеша и обслуживать их, если у нас нет подключения к Интернету. Они также предоставляют нам доступ к другим функциям PWA, таким как синхронизация пользовательских данных в фоновом режиме, отправка push-уведомлений в Интернете, поскольку они всегда работают в фоновом режиме независимо от открытой в данный момент вкладки.
  • Манифест приложения: позволяет установить наше веб-приложение на главном экране.
  • Адаптивный дизайн. Макет должен хорошо работать/выглядеть на всех устройствах. Это не что-то новое, но мы делаем это уже пару лет.
  • API геолокации: позволяет получить доступ к местоположению устройства пользователя.
  • Media API: предоставляет доступ к камере и микрофону устройства.

Одностраничные приложения и PWA

Одностраничные приложения (SPA) — это веб-приложения на основе JavaScript, обычно создаваемые с использованием фреймворков, где фреймворк берет на себя управление рендерингом/обновлением DOM. Люди часто путают SPA и PWA, но они совершенно разные. PWA — это набор технологий и методов, которые работают совершенно независимо от того, является ли ваше веб-приложение SPA или нет. Мы можем превратить любое SPA в PWA, и это верно для любого другого традиционного многостраничного веб-приложения.

Как это работает в разных браузерах?

Большинство современных браузеров (кроме Safari) хорошо поддерживают PWA. Мы можем настроить его так, чтобы наша веб-страница по-прежнему работала в браузерах, которые до сих пор не поддерживаются. Это означает, что если у вас есть современный браузер на мобильном устройстве, вы начинаете получать собственные возможности, в противном случае вы получаете те же возможности, что и раньше.

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

Вы также можете следить за мной в твиттере @Akash940, чтобы получать обновления JavaScript или React.

Спасибо!