Изучите основы PWA и как начать работу с React 18.

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

Что такое прогрессивное веб-приложение (PWA) и как оно работает?

Прогрессивное веб-приложение — это веб-сайт, который может вести себя как нативное приложение. Это возможно благодаря дополнительным настройкам веб-приложения или веб-сайта, которые предоставляют эти возможности. Некоторые функции, на которые способен PWA, включают push-уведомления, возможность работы на Android и IOS без особой разницы, обычную иконку на главном экране устройства пользователя, как в стандартном приложении, и возможность работать в автономном режиме.

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

  • Более низкие затраты: для создания нативного мобильного приложения или настольного приложения требуется бюджет для найма разработчика. Но с PWA мобильный разработчик не нужен, так как веб-сайт можно сразу преобразовать в прогрессивное веб-приложение.
  • Экономия времени: PWA экономит время, которое было бы потрачено на создание мобильного приложения. Одна и та же кодовая база может совместно использоваться на нескольких платформах и при этом выглядеть и чувствовать себя хорошо.
  • Легкий: PWA легкие, а не тяжелые и громоздкие. Это помогает веб-приложению быстрее загружаться и оптимально использовать память.
  • Кроссплатформенность: PWA являются кроссплатформенными. Они работают на Android, IOS, Windows и даже MacOS и доступны на любом устройстве с браузером.
  • Быстрое обновление: прогрессивное веб-приложение не требует отдельной установки обновления на любой платформе, на которой оно находится. Он обновляется сам по себе, поскольку технически является веб-сайтом.

В этой статье мы создадим простое приложение для создания заметок с помощью React JS, а затем превратим его в прогрессивное веб-приложение.

Создание проекта

Мы будем использовать React 18 (последнюю версию React JS) для создания этого проекта. Помните, что нам нужно иметь Node версии 14.0.0 (или выше) и npm версии 5.6 или выше, чтобы использовать React 18.

npx create-react-app notes

И затем у нас загружается наше приложение для заметок.

После установки запускаем:

После этого мы также можем приступить к открытию нашего недавно созданного реагирующего приложения в нашем любимом редакторе кода.

Создание страницы

А теперь мы создадим нашу домашнюю страницу с нашим компонентом приложения. В index.js у нас есть:

И в нашем App.js у нас есть

И теперь у нас это отображается на нашей странице:

Создание компонента заметок

Мы создадим компонент Notes, который будет отображать все доступные заметки. Компонент будет находиться внутри папки, а папка будет создана внутри папки src и будет называться components.

После этого мы создадим файл с именем Notes.js внутри папки components и создадим простую функцию, которая перебирает доступные данные, представленные в свойствах, создавая различные элементы p.

Внутри файла Notes.js у нас есть:

Это означает, что наш компонент Notes всегда будет принимать параметр data. Теперь, чтобы импортировать его в наш App.js, у нас есть:

Помните, что нашему компоненту Notes нужны данные параметров. Мы создадим состояния для данных, которые будут обновляться при каждом нажатии кнопки save.

И теперь мы должны иметь возможность сохранять некоторые заметки в нашем приложении.

Регистрация нашего Service Worker

Что такое сервисный работник? Сервисный работник — это просто необходимая программа JS, чтобы наше приложение было прогрессивным веб-приложением.

Итак, чтобы использовать сервис-воркер, нам нужно будет зарегистрировать его на нашем index.js, поэтому мы импортируем serviceWorker.js в наш index.js.

index.js:

Редактируем наш файл manifest.json

Последний шаг к превращению нашего приложения в PWA — изменение некоторых вещей в файле manifest.json. Мы установим наши значки и другие доступные параметры.

И, наконец, у нас есть работающее приложение PWA, которое может работать на любом устройстве, как родное приложение.

Повтор сеанса с открытым исходным кодом

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

Удачной отладки для современных клиентских команд — начните бесплатно отслеживать свое веб-приложение.

Заключение

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

Исходный код этого проекта можно найти в Stackblitz.

Первоначально опубликовано на https://blog.openreplay.com 16 апреля 2022 г.