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

Анькита Массанд

В этом руководстве мы собираемся создать основы прогрессивных веб-приложений (PWA). Я помогу вам понять болевые точки традиционной сети и необходимость чего-то лучшего для борьбы с собственными приложениями. Мы погрузимся глубже в компоненты, которые составляют PWA – Сервисные работники , Indexeddb , Mainesest.json & Web Push-уведомления Отказ И самый интересный бит – мы построим PWA с нуля.

Как я получил идею написать это руководство

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

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

Чтобы удовлетворить мое любопытство, я проверил свой телефон и обнаружил, что он установил более 40 приложений для его разнообразных потребностей. ? ♀️. Было два приложения для чтения блогов на разные категории, два из них были для получения обновлений новостей, трое из них были приложениями электронной коммерции, три для игр, один для того, чтобы держать глаза на его взаимные фонды и еще один для обработки его банковского счета транзакции и было еще несколько, что он не использовал часто.

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

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

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

Заблуждения людей имеют о сети

Мой брат точно считает, что большинство пользователей думают о сети. Традиционная сеть медленная и уродливая. Давайте найму минутку и проверим Twitter на мобильной сети , популярно называется Twitter Lite, и понимаю значение слова традиционный в моем последнем заявлении.

Опыт наравне с нативным приложением? Это мгновенно загружает. Нет янки прокрутки. Это не похоже на старый традиционный сайт Отказ Возможно, вы заметили небольшой баннер на дне, прося вас Добавить Twitter на ваш домашний экран. Является ли любительским способом побуждения пользователей устанавливать собственные приложения? Нет, это не так. Это не скажет собственное применение мегабайт в размерах. Просит вас добавить Twitter Lite на ваш домашний экран. Он буквально означает добавление ярлыка для доступа к мобильной сети Twitter, используя этот значок на главном экране.

Давайте экспериментем с этим, нажав на Добавить Twitter на главный экран и проверить, что может предложить более новая сеть. Если баннер не появился в вашем случае, пожалуйста, нажмите на три точки на правой стороне и выберите вариант Добавить на домашний экран . Теперь нажмите на значок Twitter с домашнего экрана. Разве это не удивительно? О, да, это приложение также может отправить вам в режиме реального времени Push-уведомления. Сеть не будет чувствовать себя потерянным миром. После того, как вы приступите к Push-уведомлениям в веб-приложении, он делает отличную работу пользователей, показывая их все обновления.

Существует еще одна важная вещь, которая отсутствует в традиционной старой сети – способность иметь дело с прерывистыми или без подключения к Интернету. Веб ведет себя совсем по-разному на 2G устройствах по сравнению с WiFi. В большинстве случаев это ничего не или загрузчик на экране при просмотре в соединении 2G. Это расстраивает конечный пользователь.

Хорошая новость в том, что современная сеть также может иметь дело с этой проблемой. Вы не видите динозавров, когда ваш интернет уходит. Это хорошая команда приложений, которая всплывает, когда вы не подключены к Интернету. Мне очень нравится путь Триваго Справляются с этой проблемой, они показывают хорошую раковину приложений, чтобы играть вокруг оффлайн лабиринта.

Давайте проверим еще одно применение этого вида – Financial Times Отказ Нагрузка Financial Times В вашем браузере и теперь выключите свой интернет. Перезагрузить страницу. Опыт остается одинаковым. Разве это не то, что заставляет Веб выглядеть великолепно? Эти веб-приложения, которые решают болевые точки традиционной сети, популярно называются Прогрессивные веб-приложения Отказ

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

Преимущества прогрессивных веб-приложений

Прогрессивные веб-приложения (PWAS):

Быстро

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

Надежный

PWA Data Data почти мгновенно. Каждая сетевая просьба Fetch от приложения проходит через сервисных работников (больше на что позже). Они управляют кешем (indexedDB или любой другой локальный кэш). Работники обслуживания могут отправлять ответ на запрос сети непосредственно из кэша в случае прерывистых или медленных подключений к Интернету. PWA работает надежно даже на 2G соединениях.

Вовлечение

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

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

Работники обслуживания

Сервисные работники Простые термины находятся несколько строк кода JavaScript, который продолжает работать в фоновом режиме. Тем не менее, они идут в слабое состояние, когда они не используются. Они работают как управляемая событиями. Всякий раз, когда вызывается определенное событие (например, запрос на сервере), сервис-работники оживают.

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

IndexedDB или любой другой локальный кэш

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

Мы видели раньше, как Financial Times обрабатывает Нет состояния интернет Отказ Это все еще отображает все статьи на домашней странице. Он использует IndexedDB для хранения данных из этих статей.

Давайте посмотрим на это в действии. Вы найдете indexedDB в вкладке Chrome devtools под приложениями. Под indexeddb, перейдите к Статьи раздел.

Web Push-уведомления

Услуги обслуживания также слушают нажатие и имеют соответствующий обработчик Push-события, который позаботится о том, чтобы показать указатель пользователя. Приложение должно иметь разрешение пользователя для того, чтобы показать их push-уведомления. Как только пользователь OPTS-In для приема push-уведомлений, браузер создает уникальный токен для них. Затем сервер может взаимодействовать с пользователем, используя этот уникальный токен.

maineest.json file.

Mainesest.json, как правило, является файлом метаданных приложения. Приложение включает в себя mainesest.json в index.html следующим образом

Mainesest.json делает работу в том, чтобы рассказать браузеру, что приложение является PWA. Он говорит браузеру имя, цвет фона, цвет темы и значки, которые будут использоваться для этого приложения. Он также сообщает режим, в котором следует открыть приложение. Например, Автономный режим запускает PWA, давая ощущение аналогичного аналогии собственного применения.

Богатый пользовательский опыт

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

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

Используйте Case – Создание сокровищницы книг

Мы будем строить приложение под названием Книг книг Отказ Это поможет в поддержании систематической записи книг, которые мы прочитали, а также те, которые находятся в нашем трубопроводе. Ни одно мудрое слово училось, должно уйти напрасно Отказ

Следующие функции будут включены в это приложение:

1. Отображение списка книг (название, автор, сводка и любимые цитаты)
2. Добавление новой книги в список

Предпосылки – наш технологический стек

• Реагировать – для строительства интерфейса
• Indexeddb – Для хранения записей книг (пожалуйста, обратите внимание, нет задней базы данных)
• WebPack – как сервер развития и для объединения активов

Отпусти! Чтобы сделать все возможное, я создал Котельная начать с.

Понимание котельной

package.json – package.json Содержит проектные зависимости. Когда вы делаете NPM установить Эти зависимости будут загружены в вашей системе. Так как мы используем реагирование на создание нашего интерфейса, реагировать & React-Dom Библиотеки включены в раздел зависимости.

В Devdependonds Объект, предустановки Babel и немногих плагинов, связанных с WebPack, включены. Бабел Это компилятор JavaScript, который используется для преобразования синтаксиса, преобразовав JavaScript Next-Gen в браузерную совместимую версию.

Браузер не понимает синтаксис реагирования напрямую, поэтому мы используем Babel-Preset-React Чтобы преобразовать реагирование и JSX в JavaScript, что браузер понимает. Мы используем WebPack как модуль Bundler.

webpack.config.js Содержит настройку конфигурации, необходимую для генерации пакета статических активов. Вход объект в Module.exports Содержит точку записи приложения, которое в нашем случае это app.js Отказ WebPack генерирует график зависимости, используя эту точку входа и продолжает добавлять зависимости в комплекте, начиная с app.js Отказ вывод Объект содержит путь выходной папки и Имя файла генерирует динамические имена файлов на основе их значения в объекте ввода. В нашем случае это будет bundle.js. Как мы упомянули пакет в точке входа.

Далее есть некоторые правила для преобразования файлов .js & .scsssssss. Эти файлы должны быть преобразованы с соответствующими погрузками, прежде чем добавлять их в основной пучок.

• Htmlwebpackplugin Добавляет сгенерированные выходные пакеты в предоставленные index.html шаблон.
• ExtractTextPlugin Перемещает модули .css в отдельный файл.
• Copywebpackplugin просто копирует Mainesest.json файл и Service-Worker.js Файл из SRC к Dist Отказ

Мы будем настроить SRC вдоль этого учебника. На данный момент он содержит index.html. у этого есть один элемент div с ID приложение . app.js является корневым компонентом приложения. Он содержит простой заголовок и компоненты для тела.

Давайте начнем строить наши Книги PWA Отказ Мы будем строить это постепенно в следующих шагах:

1. Создание столового компонента для отображения записей книги
2. Предоставление Добавить новую книгу в таблице
3. Хранение записей книги в IndexedDB
4. Добавление сервисного работника к кэше статическим активам
5. Добавление Mainest.json.

Создание столового компонента для отображения записей книги

Мы используем React-bootstrap для построения пользовательского интерфейса. Давайте импортируем компонент таблицы из React-bootstrap Отказ

Запустите сервер, используя команду NPM начать в вашем терминале. Перейти к localhost: 8080/dist/ Отказ У нас еще нет записей книги, поэтому стол пуста. Книжные ложки импортируются из папки констант. Пожалуйста, добавьте Книжные ложки в книги-заголовки.js Файл в папке констант из здесь Отказ

Книжные ложки это просто массив объектов, которые мы отображаем в таблице. gettablemarkup Функция создает заголовки таблицы с GetTableHeaders и тело с gettabledata Функции. книгидата поддерживает состояние компонента. Если будет добавлена какая-либо новая запись книги, она должна быть нажата в книгидата множество.

Предоставление Добавить новую книгу в таблице

Давайте сделаем его дальше и добавьте нашу первую книгу в таблице. Все, что мы должны добавить, это импортировать Bookform Компонент из базовой папки и предоставить ему OnsUbmit пропры OnsUbmit PROP принимает функцию, которая будет называться, когда пользователь нажимает на кнопку отправки в форме, и это даст нам подробную информацию о новой книге. Как только вы закончите с этим, ваш компонент тела должен выглядеть как Это Отказ

Вот …| Bookform составная часть:

Полевая группа это просто обертка для меченых входов. Пожалуйста, поставьте Это внутри field-group.js Файл в Utils папка. Bookform Компонент поддерживает свое состояние в formdata объект. Всякий раз, когда пользователь вводит имя, автор или резюме, он сохраняется в состоянии компонента. Кнопка «Отправка» передает состояние компонента в компонент родительского тела, который затем добавляет его в его состояние – книгидата множество.

После добавления записи книги вы увидите, что ваша таблица теперь заполнена этой записью. Но когда вы обновляете страницу, все это ушло. Мы должны исправить это.

Хранение записей книги в IndexedDB

Indexeddb это структурированная база данных хранения на стороне клиента. Записи в IndexedDB хранятся в виде пар клавиш. Мы будем сохранять записи книги в IndexedDB. IndexedDB предоставляет API для добавления, удаления и обновления записей в базе данных. Давайте рассмотрим эти API, создавая обертку в indexeddb.js Файл в Utils папка.

Операции, выполненные на IndexedDB, асинхронные по своей природе. Итак, API IndexedDB предоставляет соответствующие крючки для событий успеха и ошибок.

Во-первых, нам придется создать нашу базу данных. Давайте напишем инициализировать Функция, которая будет обрабатывать задачи инициализации:

В приведенном выше фрагменте кода Книг книг это название базы данных indexedDB и Книги это ObjectStore Отказ ObjectStore аналогичен таблице в SQL. Заявление IDB.Open (БД, 1) Является ли асинхронный запрос на открытие базы данных IndexedDB Книг книг И второй параметр 1 означает версию базы данных. Переменная запроса имеет тип Idbopendbrequest Отказ

Мы определили outsuccess. , onerror. и OnupGradeNeeded Функции на объекте запроса, который будет вызываться на соответствующих событиях. Например, OnSuccess Обратный вызов будет вызван, когда база данных открывается успешно и в OnSuccess Метод, мы кэшируем экземпляр Книг книг база данных. OnupGradeNeeded Метод вызывается всякий раз, когда есть изменение в версии базы данных.

В настоящее время, с версией 1, мы добавили только одну ObjectStore, называемую как Книги Отказ Скажем, на более позднем этапе, когда наша заявка растет, мы решили добавить еще одну ObjectStore. Мы должны обновить версию нашей базы данных до 2 и добавить схему этой новой ObjectSore в OnupGradeNeeded метод.

Мы будем писать три важных метода – Получить , Обновление & Удалить – В нашей обертке IndexedDB. Общая идея для выполнения любой из этих операций – сначала получить экземпляр магазина, оберните операцию в транзакции, а затем записывать обработчики успеха и ошибок для соответствующих асинхронных запросов. Транзакция – это просто обертка вокруг операции, чтобы обеспечить целостность данных. Если какие-либо действия в транзакции терпят неудачу, то никакие действия не выполняется в базе данных.

Например, наш метод PUT или обновления будет выглядеть что-то подобное:

Обновление Метод занимает три параметра:

Тип это имя объекта, данные Является ли запись книги, которую мы намерены добавить/обновить в нашей ObjectSore, а Обратный вызов имеет тип функции, которая была бы названа после успешного добавления данные в объекте.

транзакция определяется на Idbopendbrequest Экземпляр, и он принимает имя ObjectStore и режим, с помощью которого должна выполняться операция. В этом случае режим – ReadWrite Так как мы пишем на объект.

Как упоминалось ранее, indexedDB принимает данные в виде пар клавишных пар. Мы используем Timestamp, чтобы создать уникальный идентификатор для конкретной записи. Store.put (данные) Асинхронно добавляет книжные записи в Книги ObjectStore. На одних и то же линиях я добавил получить и удалять методы в нашей обертке. Пожалуйста, проверьте полный код Wrapper IndexedDB здесь Отказ

Теперь, когда наша обертка IndexedDB является все настроен, пришло время использовать функцию Add/Update из нашей обертки всякий раз, когда пользователь пытается добавить новую запись книги. Давайте изменим наш компонент тела для размещения этих изменений.

Первый импорт IndexedDB обертка в компоненте тела. Мы будем звонить в инициализировать Функция Indexeddbwrapper в ComponentDidmount Отказ инициализировать Метод принимает обратный вызов, как Инициализированб Функция, которая определяется в компоненте тела. Инициализированб Работа создает начальное состояние нашего применения путем получения хранимых записей книг из IndexedDB.

Последнее, что связано с Indexeddbwrapper это позвонить его Обновление Способ подачи книги записи. Мы должны изменить OnsUbmit Способ компонента тела следующим образом:

Теперь новая запись будет сначала добавлена в IndexedDB, и как только это будет успешно, мы обновляем состояние компонента. Попробуйте добавить новую книжную запись и перезагрузить страницу. Вы все равно будете увидеть вашу книгу в таблице. Вот где он исходит от!

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

Добавление сервисного работника к кэше статическим активам

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

Регистрация работника обслуживания

инициализует Функция определяется в компоненте тела, и мы назовем это в ComponentDidmount Крюк жизненного цикла. Сервис работы определяется на Навигатор Отказ Согласно МДН,

Сервисский работник зарегистрирован с использованием Регистрация Метод, определенный на Navigator.serviceWorker объект. Регистрация Метод принимает URL URL сервисного рабочего файла. Возвращает Обещание который разрешается, когда обслуживающий работник успешно зарегистрирован на веб-странице. Как только это сделано, вы увидите сообщение успеха в консоли. По умолчанию работники обслуживания могут перехватывать все запросы Fetch, исходящих с веб-страницы.

Регистрация Метод также принимает дополнительный второй параметр, который определяет Область услуг.

navigator.serviceWorker.register('./service-worker.js', { scope: '/products' })

Вышеуказанный сервис будет перехватить только /продукты/* Запросы. Итак, что-то вроде /платежи не перехвачен вышеуказанным работником обслуживания.

Как сказано ранее, работники обслуживания работают как система, управляемая событиями. После успешной регистрации Установить событие срабатывает. Мы можем использовать обработчик установки для задач инициализации. В нашем случае мы будем создавать наш кеш для хранения статических активов.

Вот обработчик установки события:

Event.waituntil Убедитесь, что сервисный работник активен, пока URL-адреса добавляются в кэш.

Сервисский работник еще не начал делать свою магию. После успешно установки активировать Событие срабатывает, и это хорошее место для убрания старых неиспользованных кэшей. Давайте сделаем наш бит:

активировать Обработчик событий заботится о удалении всех кэшей, кроме Cookskeep-cache Отказ Когда веб-страница производит сетевой запрос на сервер, срабатывает событие Fetch сервисного работника. Итак, если бы мы должны были манипулировать или изменять ответ, который будет отправлен на определенный запрос, мы должны сделать это в обработчике событий Fetch.

Event.RespondWith Метод позволяет нам отправить модифицированный ответ обратно на клиента. Это возвращает обещание, которое решает до действительного ответа. Cache.match Проверяет, является ли запрос действительным ресурсом для кэширования (если вы помните, мы добавили несколько конкретных URL-адресов на Urlstocache Переменная в обработчике «Установка события).).

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

Вот Файл сервисного работника с тремя обработчиками событий, объясненных выше.

Добавление Mainest.json.

Short_name используется на главном экране как имя приложения. В случае Short_name не предусмотрено, то Имя Собственность используется на его месте. Иконки Покажите как значок домашнего экрана для приложения в приложении Launcher и на экране Splash. start_url Сообщите браузеру о начальной странице приложения. Пользователь будет направлен на этот URL, когда приложение запущено. автономный Поскольку свойство отображения приложения дает ему внешний вид собственного применения. Приложение работает в своем собственном окне и скрывает некоторые элементы элементов браузера, как URL-бар. background_color Устанавливает цвет экрана всплеска, когда приложение впервые запущено и theme_color рассказывает о цвете панели инструментов.

Это оно. Мы создали наши Книги PWA Отказ Давайте быть быстрым откровением вещей, которые мы узнали в этом руководстве:

1. Традиционная сеть не хватает некоторых важных функций, которые нативные приложения предоставляют из коробки. Прогрессивные веб-приложения помогают улучшить опыт пользователя в Интернете. Они быстрые, надежные и участвующие и обеспечивают опыт, аналогичный аналогии местных приложений.
2. PWA используют сервисные работники, IndexedDB (или любым другим локальным кешем), Maintest.json и Web Push-уведомлениями.
3. Сервисные работники работают в качестве системы, управляемой событиями и прослушиванию Fetch & Push Events. извлекать Событие позволяет нам отправлять ответ на запрос сети непосредственно из кеша в случае медленных или прерывистых соединений. толчок Мероприятие позволяет нам показывать пользователю Push-уведомления и помогает вовлекать пользователя, утверждая их о своевременных обновлениях.
4. IndexedDB – это структура ключевой стоимости. Это помогает хранить масштабный объем данных на клиентской стороне. Mainesest.json Информирует браузер о некоторых важных свойствах приложения.
5. Мы узнали, как начать создание прогрессивного веб-приложения.

Это было быстрое введение в прогрессивные веб-приложения. Если вы хотите узнать больше, вот некоторые из ресурсов:

1. Обширное руководство по прогрессирующим веб-приложениям
2. Проверьте мой Книг книг Применение на Github. Я добавил еще несколько функций, таких как обновление записей книги, добавляя цитаты и поддержку для уведомлений Web Push. Я буду продолжать добавлять больше!
3. Работники обслуживания

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

Первоначально опубликовано hashnode.com .

Оригинал: “https://www.freecodecamp.org/news/benefits-of-progressive-web-applications-pwas-and-how-to-build-one-a763e6424717/”