CC BY
52РАЗРАБОТКА ПРИЛОЖЕНИЙ (APPLICATION DEVELOPMENT) УДК 004
Харлампиди В.К.
Front-end и open source разработчик (Россия, г. Ростов-на-Дону)
ПРОГРЕССИВНЫЕ ВЕБ-ПРИЛОЖЕНИЯ: ОБЗОР СОВРЕМЕННЫХ МЕТОДОВ, ИНСТРУМЕНТОВ И ПРАКТИК
Аннотация: в данной статье рассматриваются прогрессивные веб-приложения (PWA). PWA - новый тип приложений, позволяющий создавать богатый пользовательский интерфейс, работать в автономном режиме и не требовать установки на устройство. Обсуждаются основные методы разработки PWA, такие как Service Workers и манифест веб-приложения, а также представлены основные фреймворки JavaScript для разработки PWA, такие как Angular, React и Vue.js. В разделе "Практические действия" статьи описаны ключевые методы, которые помогают создавать эффективные PWA, такие как проверка соединений, кэширование и уведомления.
Статья также предоставляет обзор современных методов, инструментов и практик, которые помогут разработчикам создавать эффективные и привлекательные PWA. Сравнительный анализ методов разработки, инструментов и практик для создания PWA поможет выбрать соответствующий подход для конкретного проекта.
Подчеркивается, что разработка PWA является одним из наиболее эффективных способов создания веб-приложений, которые могут быть запущены на различных устройствах и иметь функциональность, сопоставимую с нативными приложениями. Однако, стоит помнить, что PWA все еще относительно новая технология, и в зависимости от потребностей проекта, может оказаться не самым лучшим решением. Кроме того, важно учитывать ограничения, связанные с браузерами и устройствами, на которых запускаются PWA. В целом, статья представляет полный обзор PWA и позволяет разработчикам создавать эффективные и привлекательные приложения с помощью новой технологии.
Ключевые слова: прогрессивные веб-приложения, PWA, веб-технологии, Service workers, Web App Manifest, Angular, React, Vue.js, проверка подключения, кэширование, уведомления, сравнительный анализ.
Введение
В последние годы прогрессивные веб-приложения становятся все более популярными среди разработчиков и пользователей. Согласно данным Google Trends, интерес к PWA начал расти с 2015 года и продолжает возрастать до настоящего времени (см. рис. 1). Это свидетельствует о том, что PWA становятся все более востребованными и выгодными для использования как в бизнесе, так и в личных целях [1].
Прогрессивные веб-приложения предоставляют множество преимуществ перед традиционными веб-приложениями, такими как более быстрая загрузка, более плавный пользовательский интерфейс и возможность работы в офлайн-режиме. Эти преимущества делают PWA более удобными и привлекательными для пользователей, а также способствуют увеличению уровня удовлетворенности пользователя от использования приложения [2, 3].
В свою очередь, разработчики также получают выгоды от создания PWA. Эти приложения имеют низкие затраты на разработку и поддержку, поскольку они используют веб-технологии и не требуют дополнительных инструментов для установки и обновления на устройстве. Кроме того, PWA могут улучшить конверсию и удержание пользователей, что также приводит к увеличению прибыли и росту бизнеса.
В данной статье будет проанализирован ряд практических примеров и советов, основанных на современных методах и инструментах, которые помогут разработчикам создавать эффективные и привлекательные прогрессивные веб -приложения. Будут рассмотрены примеры, демонстрирующие использование Service workers, Web App Manifest, кэширования, проверки подключения и уведомлений, а также подробно рассмотрены инструменты для создания PWA, такие как Angular, React и Vue.js. Анализ практических примеров и советов
позволит разработчикам создавать PWA, которые обеспечивают высокую производительность, быструю загрузку и работу в офлайн -режиме, что является важным фактором для удовлетворения потребностей пользователей.
Рисунок 1 - Иллюстрация роста популярности PWA с течением времени Figure 1 - Illustration of the growingpopularity of PWA over time
Методы создания прогрессивных веб-приложений
Для создания прогрессивных веб-приложений используются различные методы и технологии.
1. Service Workers. Service Workers являются одним из ключевых компонентов прогрессивных веб-приложений (PWA). Это скрипты, которые выполняются в фоновом режиме, обеспечивая уникальный функционал, такой как обработка сетевых запросов, кэширование данных и отправка уведомлений. Важно отметить, что Service Workers могут работать независимо от основного потока JavaScript и могут выполняться даже после закрытия приложения.
Service Workers позволяют создавать приложения, которые могут работать в офлайн-режиме, что особенно полезно в условиях нестабильного интернет-соединения или полного отсутствия интернета. С помощью Service Workers можно кэшировать данные и ресурсы при первом запуске приложения и использовать их в дальнейшем в офлайн-режиме, что улучшает производительность и быстродействие приложения.
Service Workers позволяют обрабатывать сетевые запросы и отвечать на них, не зависимо от того, доступен ли интернет или нет. Это особенно важно для приложений, которые работают с большим объемом данных или
взаимодействуют с удаленными серверами, так как Service Workers могут выполнять эти задачи в фоновом режиме, не замедляя основной поток выполнения приложения.
Кроме того, Service Workers могут отправлять уведомления пользователю, даже если приложение закрыто или неактивно. Это особенно полезно для мгновенных уведомлений, таких как новые сообщения в чате или уведомления о событиях, которые могут быть интересны пользователю.
В целом, Service Workers - это мощный инструмент для создания производительных и функциональных прогрессивных веб-приложений, которые могут работать в различных условиях сетевой доступности. Они являются одним из ключевых элементов PWA, которые позволяют создавать веб-приложения, не уступающие в функциональности нативным приложениям [5].
Пример регистрации Service worker (см. рис. 2):
В PWA возможно использование оповещений, которые могут уведомлять пользователя о различных событиях в приложении. Для этого необходимо зарегистрировать Service worker и запросить у пользователя разрешение на отправку уведомлений.
Регистрация Service worker начинается с создания JavaScript-файла с необходимой логикой. В данном случае, Service worker будет использоваться для обработки оповещений. После создания файла, необходимо зарегистрировать его в основном файле приложения с помощью следующего кода:
if ('ServiceWorker' in navigator) {
window.addEventl_istener( ' load ", function^) {
navigator.serviceHorker.-sgi;te-('/service-worker.js1 1).then(function(registration) {
П Регистрация сервис-воркера прошла успешно
console.logfServiceWorker registration successful ..ith scope: , registration. scope) ;
}, function(err) {
// Регистрация сервис-воркера прошла неудачно
console.logf"ServiceWorker registration failed: err);
Рисунок 2 - Пример регистрации Service worker Figure 2 - Example of service worker registration
Данный код проверяет, поддерживает ли браузер использование Service workers, и, если да, регистрирует указанный файл.
После регистрации Service worker, необходимо запросить у пользователя разрешение на отправку оповещений. Это можно сделать с помощью следующего кода (см. рис. 3):
if ('Notification' in window) {
Notification.requestPermission().ther(function(permission) { (permission === 'grantee ) { console.log('Notification permission granted.'); } else {
console.log('Notification permission denied.')]
} }>;
Рисунок 3 - Разрешение на отправку оповещений Figure 3 - Permission to send alerts
Данный код проверяет, поддерживает ли браузер использование оповещений, и, если да, запрашивает разрешение на отправку. После получения
разрешения, можно отправлять оповещения с помощью следующего кода (см. рис. 4):
if ('serviceWorker' in navigator && 'Notification' in window) { navigator.serviceWorker.ready.then(function(registration) { registration.showNotification(1 Заголовок', { body: "Текст оповещения', icon: 1 path/to/icon.png' }); });
Рисунок 4 - Отправка оповещения Figure 4 - Sending an alert
Данный код проверяет, поддерживает ли браузер использование Service workers и оповещений, и, если да, отправляет оповещение с заданным заголовком, текстом и иконкой.
Таким образом, для использования оповещений в PWA необходимо зарегистрировать Service worker и запросить у пользователя разрешение на отправку оповещений. После получения разрешения, можно отправлять оповещения с помощью соответствующего кода.
Пример обработки сетевых запросов с использованием Service worker (см. рис. 5):
Service worker могут использоваться для кеширования ресурсов и обработки сетевых запросов, что позволяет улучшить производительность и обеспечить доступность приложения в оффлайн-режиме. Вот пример кода, который демонстрирует, как кешировать и отдавать ресурсы с помощью Service worker:
self.¿ddEventListener(1 fetch1, f unction (event) { event.respondWith(
caches.match{event.request).then(function(response) {
11 Если ресурс был найден в кеше., возвращаем его из кеша if (response) { return response,
}
// Если ресурса нет в кеше, отправляем сетевой запрос и кешируем результат return fetch(event.request). :hen(function(response) { return caches.эреп{1cache-vl1).then{function(cache) { cache. >ut(event.requestj response.clone())j return response; }); });
»
Рисунок 5 - Обработка сетевых запросов с использованием Service worker Figure 5 - Processing network requests using a service worker
Этот код регистрирует обработчик события fetch для Service worker, который перехватывает все сетевые запросы, обрабатывая их с помощью кеша. Если ресурс был найден в кеше, он возвращается непосредственно из кеша, а если его нет, происходит отправка сетевого запроса и сохранение его результата в кеше. Кеш имеет имя cache-v1, и новые ресурсы добавляются в него с помощью метода cache.put().
2. Web App Manifest. Web App Manifest - это JSON-файл, который содержит метаданные о PWA, такие как название, иконки, цвет темы и другие параметры, которые помогают браузеру понять, как отображать приложение на устройстве.
Пример манифеста (см. рис. 6):
"name": 11 Мое PWA приложение"., "shortname": "Мое PWA",
"icons": [ {
"src": "/icons/icon-192x192.png", "type": "image/png", "sizes : "192x192"
h {
"src": "/icons/icon - 512x512.png", "type": "image/png", "sizes : "512x512"
>
L
"start_url": "/ ,
"background_color": "#ffffff", "themecolor": "#007bff", "display": "standalone"
Рисунок 6 - Пример манифеста Figure 6 - Sample manifest
Этот пример манифеста определяет название приложения, его короткое название, иконки для различных размеров экрана, начальный URL для запуска приложения, цвет фона, цвет темы, а также указывает, что приложение должно быть запущено в режиме "standalone" (отдельностоящее приложение, не интегрирующееся с браузером). Все эти параметры помогают браузеру корректно отображать приложение на устройстве и создать максимально приятный пользовательский опыт.
3. Responsive Web Design (адаптивный дизайн). Адаптивный дизайн - это метод дизайна веб-сайтов, который позволяет сайту адаптироваться под различные экраны устройств. Для создания PWA необходимо использовать
адаптивный дизайн, чтобы приложение выглядело хорошо на разных устройствах [4].
Пример CSS-кода, который демонстрирует, как создать адаптивный дизайн для PWA (см. рис. 7):
/* Общие стили */ body {
font-family: Arial* sans-serif;
font-size: 16pxj
/* Стили для мобильных устройств *1
screen 5nd (rnax.-width: 4S0px) { /* Изменение ширины блока */
.block { wid^: !№%-,
}
/* Скрытие некоторых элементов */
.hide-on-mobile { display: none;
}
/* Стили для планшетов '/
gmedia screen snd (rnin-width: 4Slpx) and (max-width: 76Spx) { /* Изменение шрифта '/ body {
font-=iie: ISpx;
}
/* Стили для десктопов */ gmedia screen snd (rnin-width: 769px) { /* Изменение цвета фона V body {
background-color: #f 2f2f2;
}
Рисунок 7 - Настройка стилей для разных экранов устройств Figure 7 - Setting styles for different device screens
Этот пример демонстрирует, как с помощью медиа-запросов и CSS свойств можно настроить стили для разных экранов устройств. Например, для мобильных устройств можно изменить ширину блоков и скрыть некоторые
элементы, а для планшетов - изменить размер шрифта. Все это позволяет создать адаптивный дизайн для PWA, который будет хорошо выглядеть на любом устройстве.
Инструменты создания PWA
Для создания PWA используются следующие инструменты:
1. Angular. Angular - это один из самых популярных фреймворков для создания веб-приложений, который был разработан командой Google. Он основан на языке TypeScript и предоставляет разработчикам множество инструментов и функций для создания высококачественных приложений.
Для создания PWA с помощью Angular, разработчики могут использовать его компонентную архитектуру, которая позволяет создавать многоразовые компоненты для различных частей приложения. Angular также предоставляет сервисы для обмена данными между компонентами, которые могут использоваться для обработки сетевых запросов и кэширования данных.
Кроме того, Angular предоставляет маршрутизацию, которая позволяет разработчикам создавать множество страниц и переходить между ними без перезагрузки страницы. Это улучшает пользовательский опыт и повышает производительность приложения.
Для создания Service workers в Angular можно использовать Angular Service Worker, который предоставляет возможности для кэширования ресурсов и обработки сетевых запросов в фоновом режиме. Кроме того, Angular предоставляет инструменты для создания Web App Manifest, таких как Angular PWA Toolkit, которые помогают определить метаданные приложения и обеспечить его отображение на устройствах.
В целом, Angular - это мощный фреймворк для создания PWA, который предоставляет множество инструментов и функций для разработчиков.React: React - это JavaScript-библиотека для создания пользовательских интерфейсов. Он также может использоваться для создания PWA. React предоставляет множество компонентов, которые могут использоваться для создания
пользовательского интерфейса, а также инструменты для создания Service workers и Web App Manifest.
2. React. React - это JavaScript-библиотека для создания пользовательских интерфейсов. Она позволяет создавать эффективные и привлекательные веб-приложения, в том числе и прогрессивные веб-приложения (PWA). React предоставляет компонентный подход к разработке веб -приложений, который обеспечивает гибкость и масштабируемость приложений.
React также предоставляет инструменты для создания PWA, такие как Service workers и Web App Manifest. Service workers - это JavaScript-файлы, которые выполняются отдельно от основного потока браузера и могут выполнять задачи, такие как кэширование и обновление контента. Web App Manifest - это файл JSON, который содержит метаданные о приложении, такие как иконки, название и описание, и позволяет добавлять приложение на домашний экран устройства.
React имеет большое сообщество разработчиков, которые создают множество библиотек и инструментов для упрощения разработки веб-приложений, в том числе и PWA. Библиотеки, такие как React Router и Redux, обеспечивают гибкость и удобство в работе с маршрутизацией и управлением состоянием приложения.
В целом, React представляет собой мощный инструмент для создания PWA, который обеспечивает гибкость, масштабируемость и эффективность в разработке веб-приложений.
3. Vue.js. Vue.js - это прогрессивный JavaScript-фреймворк, который используется для создания пользовательских интерфейсов веб-приложений. Он имеет модульную структуру и легко интегрируется с другими библиотеками и фреймворками. Vue.js также может использоваться для создания PWA.
Vue.js предоставляет компоненты и директивы для создания интерактивных пользовательских интерфейсов, а также инструменты для создания Service workers и Web App Manifest. Компоненты в Vue.js представляют
собой отдельные части пользовательского интерфейса, которые можно переиспользовать и комбинировать друг с другом. Директивы в Vue.js позволяют добавлять дополнительную функциональность к элементам пользовательского интерфейса, например, для обработки событий или изменения стилей.
Для создания PWA в Vue.js необходимо использовать инструменты, такие как Vue CLI, которые позволяют настроить проект для работы в офлайн-режиме и добавить Web App Manifest. Кроме того, Vue.js предоставляет встроенную поддержку для создания Service workers с помощью плагина @vue/cli -plugin-pwa, который позволяет быстро настроить Service worker и кэширование ресурсов [6].
Практики для создания эффективных PWA
Для создания эффективных PWA используются следующие практики:
1. Проверка подключения. Проверка подключения - это метод, который используется для определения, есть ли подключение к Интернету. Это помогает приложению переключаться на офлайн-режим, когда нет подключения к Интернету.
2. Кэширование. Кэширование - это метод, который используется для хранения данных локально на устройстве пользователя. Это позволяет приложению работать быстрее и более эффективно в офлайн-режиме.
3. Уведомления. Уведомления - это метод, который используется для отправки уведомлений пользователю. Это позволяет приложению сообщать о новых событиях или обновлениях, даже если приложение не запущено.
Мобильные UI библиотеки и фреймворки для разработки PWA
При разработке прогрессивных веб-приложений (PWA), пользовательский интерфейс (UI) играет важную роль, так как он влияет на восприятие и опыт пользователей. Для создания качественного и удобного пользовательского интерфейса важно выбрать подходящий инструментарий.
Один из таких инструментов - мобильные UI библиотеки и фреймворки, предназначенные для разработки PWA [8].
Одним из наиболее популярных фреймворков для разработки гибридных мобильных приложений, веб-приложений и PWA с нативным внешним видом и ощущением является Framework7. Он предоставляет широкий набор готовых компонентов и инструментов для создания современных и функциональных приложений.
Framework7 обладает рядом преимуществ, которые включают:
1. Нативный внешний вид, который обеспечивает создание приложений, которые выглядят и ведут себя как нативные приложения на iOS и Android, что обеспечивает высокое качество пользовательского опыта;
2. Большой набор готовых компонентов, таких как навигационные панели, списки, карточки, модальные окна и многое другое, что ускоряет процесс разработки и упрощает создание сложных интерфейсов;
3. Простой и понятный синтаксис, что делает его доступным для разработчиков с разным уровнем опыта;
4. Гибкую архитектуру, которая поддерживает модульную структуру и позволяет разработчикам легко добавлять и изменять функциональность приложения;
5. Возможность интеграции с другими технологиями, такими как Vue.js, React и Svelte, что обеспечивает гибкость и упрощает разработку;
6. Встроенную поддержку PWA, которая позволяет разработчикам создавать высокопроизводительные и оффлайн-доступные приложения без дополнительных усилий;
7. Большое и активное сообщество разработчиков, которое может помочь в решении проблем и предоставить поддержку при использовании фреймворка;
8. Регулярные обновления и поддержку, которые обеспечивают стабильность, исправление ошибок и добавление новых функций;
9. Бесплатный и открытый исходный код, что позволяет разработчикам использовать фреймворк без ограничений и настроить его под свои нужды.
Однако, следует помнить, что Framework7 имеет свои ограничения и не подходит для всех типов проектов. Например, он не поддерживает разработку приложений для Windows и MacOS, а также может быть более сложным для начинающих разработчиков, которые не имеют опыта в работе с JavaScript и CSS.
Кроме Framework7, существует множество других мобильных UI библиотек и фреймворков, таких как React Native, Ionic, NativeScript, Onsen UI и другие, которые также могут быть использованы для разработки PWA с нативным внешним видом и ощущением. При выборе инструментария для разработки PWA необходимо учитывать особенности проекта, требования к пользовательскому интерфейсу, опыт разработчиков и другие факторы.
Сравнительный анализ методов разработки, инструментов и практик для создания PWA
В данном контексте, был проведен сравнительный анализ методов разработки PWA, инструментов для создания и практик, которые необходимо применять для создания эффективных PWA. Для этого были составлены три таблицы, содержащие информацию о методах разработки, инструментах и практиках, используемых в создании PWA. Таблицы помогут разработчикам выбрать наиболее подходящие методы и инструменты для создания высококачественных PWA и следовать эффективным практикам.
Таблица 1 - Сравнительный анализ методов разработки PWA Table 1 - Comparative analysis of PWA development methods
Метод Описание
Service Workers Скрипты, выполняющиеся в фоновом режиме и позволяющие работать в офлайн-режиме
Web App Manifest JSON-файл, содержащий метаданные PWA, такие как название, иконки и цвет темы
Responsive Web Design Адаптивный дизайн, позволяющий приложению выглядеть хорошо на разных устройствах
Таблица 1 представляет собой сравнительный анализ трех методов разработки PWA - Service Workers, Web App Manifest и Responsive Web Design. Рассмотрим каждый из методов более детально и проанализируем их преимущества и недостатки.
Service Workers - это мощный инструмент для создания PWA, который позволяет приложению функционировать в офлайн-режиме. Он используется для кэширования данных, оптимизации производительности и предотвращения повторной загрузки страниц. Service Workers позволяют создавать функциональные приложения, которые могут работать в любых условиях, даже если у пользователя нет доступа к Интернету. Однако, использование Service Workers требует определенных знаний и навыков, и может быть сложным для начинающих разработчиков.
Web App Manifest - это еще один важный метод разработки PWA, который используется для создания метаданных PWA. Web App Manifest позволяет определить основные параметры приложения, такие как иконки, цвет темы и название, и предоставляет единый стиль для всех платформ. Он также
позволяет создавать мобильные и десктопные ярлыки для быстрого запуска PWA. Однако, Web App Manifest не является самодостаточным методом разработки PWA и должен использоваться в сочетании с другими методами.
Responsive Web Design - это метод разработки PWA, который позволяет приложению выглядеть хорошо на разных устройствах. Responsive Web Design основывается на использовании гибкой сетки и медиа-запросов, которые адаптируют макет и размеры элементов интерфейса под размер экрана. Он позволяет создавать приложения, которые выглядят хорошо на всех устройствах, независимо от их разрешения и размера. Однако, Responsive Web Design может быть сложным для реализации, особенно для сложных приложений с большим количеством элементов интерфейса.
Таблица 2 - Сравнительный анализ инструментов для разработки PWA Table 2 - Comparative analysis of PWA development tools
Инструмент Описание
Angular JavaScript-фреймворк для создания веб-приложений
React JavaScript-библиотека для создания пользовательских интерфейсов
Vue.js JavaScript-фреймворк для создания пользовательских интерфейсов
Таблица 2 представляет сравнительный анализ трех наиболее популярных JavaScript-фреймворков и библиотек для разработки PWA: Angular, React и Vue.js. Каждый из этих инструментов имеет свои преимущества и недостатки в зависимости от задачи, которую необходимо решить.
Angular является полноценным фреймворком, который предоставляет все необходимые инструменты для создания сложных веб-приложений. Он обеспечивает высокую производительность благодаря использованию
TypeScript и Ahead-of-Time компиляции. Однако, из-за своей сложности, Angular может потребовать больше времени на изучение и настройку, особенно для новых разработчиков.
React является библиотекой для создания пользовательских интерфейсов, которая позволяет разрабатывать быстрые и эффективные приложения. React использует виртуальный DOM, что обеспечивает более быстрое обновление интерфейса, а также удобство в разработке и переиспользовании компонентов. Однако, для создания полноценного приложения в React могут потребоваться дополнительные инструменты и библиотеки.
Vue.js является легковесным и гибким фреймворком для создания пользовательских интерфейсов. Он имеет меньшую обучаемость и легче интегрируется с другими библиотеками и инструментами. Vue.js также предоставляет удобный механизм для создания компонентов и обработки событий, что делает его хорошим выбором для разработки PWA. Однако, в отличие от Angular, Vue.js не обеспечивает такой высокой производительности и масштабируемости.
Таблица 3 - Сравнительный анализ практик для создания эффективных PWA Table 3 - Comparative analysis ofpractices for creating effective PWA
Практика Описание
Проверка подключения Метод для определения, есть ли подключение к Интернету
Кэширование Метод для хранения данных локально на устройстве пользователя
Уведомления Метод для отправки уведомлений пользователю о новых событиях или обновлениях
Таблица 3 представляет сравнительный анализ трех практик, которые используются для создания эффективных прогрессивных веб-приложений (PWA).
Первая практика - "Проверка подключения", используется для определения наличия подключения к Интернету. Эта практика является важной, поскольку многие PWA предполагают работу с Интернетом, и отсутствие подключения может привести к непредсказуемому поведению приложения.
Вторая практика - "Кэширование", используется для хранения данных локально на устройстве пользователя. Это может повысить производительность приложения, так как часто используемые ресурсы могут быть быстро загружены из кэша, а не с сервера.
Третья практика - "Уведомления", используется для отправки уведомлений пользователю о новых событиях или обновлениях. Эта практика может улучшить пользовательский опыт, предоставляя пользователям своевременную информацию о важных событиях или изменениях в приложении.
В целом, использование этих трех практик в сочетании с другими технологиями, такими как Service Workers и Web App Manifest, может повысить качество и эффективность PWA.
Заключение
Прогрессивные веб-приложения (PWA) - это современный подход к созданию веб-приложений, который обеспечивает высокую производительность, доступность и масштабируемость, а также усовершенствованный пользовательский опыт на любом устройстве и в любых условиях.
Разработка PWA включает в себя использование передовых методов и инструментов, таких как Service workers, манифесты и кэширование данных, что позволяет достичь максимально быстрого и отзывчивого дизайна, оптимизации производительности, безопасности и конфиденциальности, а также поддержки работы в оффлайн-режиме и прогрессивного улучшения.
Приложения, разработанные с использованием лучших практик PWA, могут успешно конкурировать с нативными приложениями благодаря высокому уровню удобства использования и пользовательскому опыту.
Внедрение PWA в проекты может стать ключевым фактором успеха онлайн-бизнеса или веб-приложения, так как это позволяет увеличить уровень удовлетворенности и вовлеченности пользователей. Кроме того, использование PWA ведет к улучшению показателей конверсии, повышению лояльности пользователей и уменьшению затрат на разработку и обслуживание приложений.
С развитием технологий и совершенствованием браузеров, прогрессивные веб-приложения будут продолжать набирать популярность среди разработчиков и пользователей. Этот тренд может изменить пейзаж веб -разработки, сделав PWA неотъемлемым инструментом для создания веб-приложений с высокими показателями производительности и качества пользовательского опыта [7].
СПИСОК ЛИТЕРАТУРЫ:
1. Али, М., и Пан, Х. (2019). Прогрессивные веб-приложения: эмпирическое исследование. Журнал разработки программного обеспечения и приложений, 12
(1), 1-15.
2. Хегде, Р., и Ядав, А. (2020). Прогрессивное веб-приложение и его реализация с использованием Angular. Международный журнал передовой науки и техники, 29 (4), 1383-1393.
3. Кирк, П., и Кив, С. (2019). Разработка прогрессивного веб-приложения с использованием React. Международный журнал инновационных технологий и исследовательской инженерии, 8 (12), 1355-1359.
4. Мансур, И., Хаммад, М. и Альджара, И. (2020). Экспериментальная оценка прогрессивных стратегий кэширования веб-приложений. Журнал окружающего интеллекта и гуманизированных вычислений, 11 (5), 1975-1987.
5. Морали, А., и Шета, А. (2019). Систематический обзор прогрессивных веб -приложений. Журнал разработки программного обеспечения и приложений, 12 (6), 297-314.
6. Нияз, К., и Хамдан, А. Р. (2020). Роль прогрессивных веб-приложений в достижении высокой производительности в Интернете. Международный журнал передовых компьютерных наук и приложений, 11 (8), 124-129.
7. Пеммасани, В. Р., и Боммисетти, К. (2018). Разработка и внедрение прогрессивного веб-приложения с использованием AngularJS. Международный журнал компьютерных наук и информационной безопасности, 16 (10), 29-36.
8. Чжан К. и Ху Л. (2021). Разработка прогрессивного веб-приложения с использованием Vuejs. Журнал физики: Серия конференций, 1801 (1), 012012.
Kharlampidi V.K.
Front-end and open source developer (Russia, Rostov-on-Don)
PROGRESSIVE WEB APPLICATIONS: OVERVIEW OF MODERN METHODS, TOOLS & PRACTICES
Abstract: this article discusses progressive Web applications (PWA). PWA is a new type of application that allows you to create a rich user interface, work offline and do not require installation on the device. The main methods of PWA development, such as Service Workers and the web application manifest, are discussed, as well as the main JavaScript frameworks for PWA development, such as Angular, React and Vue.js . The "Practical Actions" section of the article describes key methods that help create effective PWA, such as connection checking, caching and notifications.
The article also provides an overview of modern methods, tools and practices that will help developers create effective and attractive PWA. A comparative analysis of development methods, tools and practices for creating PWA will help you choose the appropriate approach for a specific project.
It is emphasized that the development of PWA is one of the most effective ways to create web applications that can be run on various devices and have functionality comparable to native applications. However, it is worth remembering that PWA is still a relatively new technology, and depending on the needs of the project, it may not be the best solution. In addition, it is important to consider the limitations associated with browsers and devices on which PWA runs. In general, the article provides a complete overview of PWA and allows developers to create effective and attractive applications using the new technology.
Keywords: progressive web applications, PWA, Web technologies, Service workers, Web App Manifest, Angular, React, Vue.js, connection verification, caching, notifications, comparative analysis.
