Изучите основы 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 г.