CC BY
46
Перспективы применения технологии PWA для расширения e-learning систем на мобильные платформы
Валитова Наталья Львовна к. т. н., доцент кафедры Прикладной математики и информатики, Казанский национальный исследовательский технический университет им. А. Н. Туполева (КАИ), ул. Большая Красная, 55, г. Казань, 420015, (843)2310086 valinata@,rambler.ru
Кремлева Эльмира Шамильевна старший преподаватель кафедры Прикладной математики и информатики, Казанский национальный исследовательский технический университет им. А. Н. Туполева (КАИ), ул. Большая Красная, 55, г. Казань, 420015, (843)2310086 e-smile29.04@mail.ru
Кашафутдинов Рашид Камилевич студент кафедры Прикладной математики и информатики, Казанский национальный исследовательский технический университет им. А. Н. Туполева (КАИ), ул. Большая Красная, 55, г. Казань, 420015, (843)2310086 mr.rashidkk@gmail.com
Аннотация
В данной статье рассматривается сравнительно новая технология построения веб-приложений, получившая название PWA, а также ее потенциал в развитии систем дистанционного обучения. Статья включает в себя краткий экскурс в основные принципы вышеупомянутой технологии и план предстоящего исследования. Данное исследование преследует две цели. Первой целью является выяснение того, как использование технологии PWA в веб-приложении сказывается на количественных и качественных характеристиках. Второй, не менее важной целью является формирование вывода о том, какой вклад может принести данная технология в развитие интернета вообще и e-learning систем в частности.
This article discusses a relatively new technology for building web applications, called PWA, as well as its potential in the development of e-learning systems. The article includes a brief excursion into the basic principles of the above-mentioned technology and a plan for the upcoming research. This study has two objectives. The first goal is to find out how the use of PWA technology in a web application affects quantitative and qualitative characteristics. The second, no less important goal is to form a conclusion about what contribution this technology can bring to the development of the Internet in general and e-learning systems in particular.
Ключевые слова
e-learning, прогрессивное веб-приложение, PWA, веб-разработка, веб-сайт, интернет, браузер
e-learning, progressive web-application, PWA, web-development, web-site, internet, browser
Введение
Современными тенденциями высшего образования являются его практикоориентированность и цифровизация. Первая тенденция поддерживается наличием большого количества стандартов, как российских, так и международных [ 18], вторая же - наличием огромного количества систем электронного обучения [9-13], включающих компьютерные учебники [14], приложения-тренажеры [15], виртуальные лаборатории [16-17], электронные курсы, разработанные на базе какой-либо системы электронного обучения [18-26]. Так или иначе, большинство e-learning систем используют веб-технологии для обеспечения дистанционности процесса обучения.
За последние несколько лет веб-технологии сделали огромный скачок в сторону интерактивности, динамичности и доступности. С начала истории возникновения интернета до сегодняшнего дня, система претерпела глобальные изменения. В первые годы после создания интернета веб-сайты представляли собой статичные страницы, содержащие минимум оформления и относительно редко обменивающие данными с веб-сервером. Сейчас же многие сайты являются динамичными веб-приложениями, содержащими обилие интерактивных элементов. Причем объем передающихся между веб-клиентом и веб-сервером данных возрос в несколько раз. Как следствие, плохо оптимизированные веб-сайты и веб-приложения показывают низкую производительность при слабом интернет-соединении. В связи с этим стали очень востребованы технологии, позволяющие сократить объем передаваемого трафика или частоту обмена данными. Данная проблема особенно остро стоит для систем электронного обучения, где объем трафика может быть настолько огромным, что сильно затормозит и таким образом, сделает совершенно некомфортной или невозможной работу с этой системой. Кроме того, бурное развитие и повсеместное распространение мобильных устройств приводит к необходимости обеспечения обучения с использованием этих устройств. Однако перенос систем обучения на мобильные платформы не всегда легок, а зачастую и невозможен.
Одной из технологий, позволяющих решить проблему трафика и мобильности, стала технология PWA (англ. — progressive web app) - технология веб-разработки, которая добавляет сайтам возможности приложений для мобильных устройств (рис. 1).
Progressive Web Applications
Технологии Целевые показатели
• Service Worker • Надежность
• Web App manifest • Быстрота
. HTTPS • Привлекательность
• App shell
• Push Notifications
Рис. 1. Технологии и целевые показатели PWA
Термин был предложен Алексом Расселом, инженером Google Chrome [27]. Технологию PWA поддерживает и активно развивает Google. Согласно интернет-ресурсу Google Developers, PWA обладает следующими характеристиками:
• Прогрессивный - работает у любого пользователя, независимо от выбора браузера, используя принципы прогрессивного усовершенствования.
• Отзывчивый - подходит для любого форм-фактора: рабочего стола, мобильного телефона, планшета.
• Независим от подключения - специальный процесс Service Worker позволяет работать в автономном режиме или в сетях низкого качества.
• Подобен приложению - ощущается для пользователя как обычное интерактивное приложение.
• Актуальный - всегда в актуальном состоянии, благодаря процессу обновления service worker.
• Безопасный - работает через HTTPS, чтобы предотвратить слежку и убедиться, что информация не может быть подделана.
• Обнаруживаемый - идентифицируется как «приложение», согласно WebAppManifest, и обнаруживается поисковыми системами.
• Повторно посещаемый - использует push-уведомления для поддержания связи с пользователем.
• Устанавливаемый - предоставляет иконку на главном экране без использования AppStore.
• Связываемый - может легко использоваться через URL-адрес и не требует сложной установки.
Технические критерии для сайта, который может считаться прогрессивным веб-приложением, были описаны Алексом Расселом:
• Создает безопасное соединение через протокол TLS.
• Работает в автономном режиме. Подразумевается, что для прогрессивных веб-приложений требуется service worker.
• Использует WebAppManifest с по крайней мере четырьмя ключевыми свойствами: name, short_name, start_url и display (со значением standalone или fullscreen).
• Создает иконку размером не менее 144*144 в формате png.
Вышеописанные характеристики технологии PWA делают ее весьма привлекательной для использования в сфере образования. Система дистанционного обучения, созданная с применением PWA-технологии будет доступна на любом типе устройств при любом качестве интернета, ее легко будет найти и установить, а также будет обеспечиваться постоянная связь с обучаемым благодаря push-уведомлениям.
Компоненты PWA
PWA имеет некоторые важные технические компоненты, которые работают вместе. Следующие компоненты необходимы для разработки прогрессивного приложения: Service Worker, Файл манифеста, HTTPS (рис 2).
Manifest.json Рис. 2. Компоненты PWA
1. Service Worker
При первой загрузке Service Worker сохраняет необходимые ресурсы в кэше браузера. И когда пользователь посещает приложение в следующий раз, Service Worker проверяют кэш и возвращают ответ пользователю, прежде чем даже проверить доступность сети.
Service Worker - это всего лишь компонент кода JavaScript, который работает как прокси-сервер между браузером и сетью. ServiceWorker управляет push-уведомлениями и помогает создать автономное веб-приложение с помощью API кэша браузера [28].
Это может ускорить работу приложения, независимо от того, подключено устройство к интернету или нет.
Разработчик имеет полный контроль над поведением приложения и тем, как оно должно реагировать в различных сценариях. Service Worker имеет свои собственные события жизненного цикла [29].
2. Файл манифеста
Файл манифеста - это файл конфигурации JSON, который содержит информацию о приложении, например, значок, который будет отображаться на главном экране при установке, краткое имя приложения, цвет фона или тему (рис. 3).
»I
"short_nameM: "Spinner" "name": "Fidget spinner
»»
I»
I«
к
fi
r
II
II
src": "/images/icons-192.png type": "image/png", sizes": "192x152"
и. к
it
it
it
ti
■I
"src": "/images/icons-512.png" "Type": "image/png", "sizes": "512x512"
],
"starr_url": "/home/?source=pT.va", "background_color": "I3367D6", "display": "standalone", "scope": "/home/", "theme color": "#3367D6"
Если файл манифеста присутствует, браузер автоматически запускает баннер установки веб-приложения, и если пользователь согласен, это добавляет значок на главный экран, и PWA устанавливается.
Service Worker имеет возможность перехватывать сетевые запросы и изменять ответы. Service Worker выполняют все действия на стороне клиента. Следовательно, PWA требует безопасного протокола HTTPS [28].
План исследования влияния технологии PWA на количественные и качественные показатели веб-приложения
Прежде чем начать исследование следует определить характеристики, по которым будут сравниваться обычное веб-приложение и веб-приложение с применением технологии PWA, а также разделить их на две группы: количественные и качественные.
К количественным показателям отнесем следующие:
• Время загрузки
• Среднее количество обращений в веб-серверу
• Время необходимое пользователю на выполнение нетривиального действия (оформление заказа, поиск в каталоге и т.п.)
Качественные показатели включают в себя:
• Опыт пользователя
}
Рис. 3. Пример содержимого файла манифеста
3. HTTPS
Количественные показатели будут измеряться при помощи встроенных в веб-браузеры инструментов разработчика. Для определения качественных показателей необходимо набрать группу тестируемых, которым будет предложено проделать определенные действия в веб-приложении. После того, как участники тестирования достигнут (или не достигнут) поставленной цели, им будет дана анкета с вопросами. В результате анализа всех анкет будет сделан вывод о том, на сколько позитивным был опыт использования веб-приложения.
Также планируется сравнить, насколько технология PWA доступна на операционных системах Android и iOS.
Затрагиваемые исследованием области
Данное исследование затрагивает такие области информационных технологий, как веб-разработка, компьютерные сети и информационная безопасность. В ходе исследования планируется подробное изучение технологии HTTPS, так как подразумевается, что веб-приложение хранит и передает личные данные пользователей, для которых необходимо обеспечить должный уровень безопасности.
Обзор опыта внедрения технологии PWA
На сайте Google Developers можно найти много примеров успешной реализации технологии PWA [27].
1. Alibaba
Alibaba.com является крупнейшей в мире онлайн-торговой платформой для бизнеса (B2B), обслуживающей более 200 стран и регионов. После обновления своего сайта до прогрессивного веб-приложения (PWA) они достигли 76-процентного увеличения общего числа конверсии в браузерах.
2. Ele.me
Ele.me - самая большая компания заказа и доставки еды в Китае. Она обслуживает 260 миллионов зарегистрированных пользователей из более чем 200 городов по всему Китаю и более 1,3 миллиона ресторанов. Внедрение технологии PWA помогло Ele.me достичь следующих результатов:
• Время загрузки уменьшилось на 11,6% для закешированных страниц.
• Время загрузки снизилось в среднем на 6,35% по всем страницам.
• Время полной загрузки снизилось до 4,93 секунд в 3G сети при первой загрузке.
3. Twitter
Twitter - социальная сеть для публичного обмена сообщениями при помощи веб-интерфейса, SMS, средств мгновенного обмена сообщениями или сторонних программ-клиентов для пользователей интернета любого возраста. Он имеет 328 миллионов активных пользователей по всему миру, которые потребляют, создают и обмениваются информацией. С более чем 80% пользователей на мобильных устройствах, Twitter хотел, чтобы опыт использования мобильной версии сайта стал быстрее, надежнее и привлекательнее. После обновления своего сайта до прогрессивного веб-приложения (PWA) они зафиксировали следующие изменения:
• Количество просматриваемых за сессию страниц увеличилось на 65%.
• Количество отправляемых сообщений увеличилось на 75%.
• Показатель отказов снизился на 20%.
Наличие примеров реализации среди популярных брендов говорит о больших перспективах развития технологии PWA. Многие ее называют даже технологией
будущего. Однако для целей обучения такая технология применяется пока еще редко. На просторах интернета авторам удалось найти лишь блог [30], где на примере приложения для обучению скорочтения подробно описывается, как применять технологию PWA (рис. 4).
Рис. 4. Приложение «Скорочтец» на мобильной платформе
Заключение
PWA — новая технология, поэтому пока не существует однозначного понимания того, как она будет развиваться. Конечно, в ней есть недостатки, которые могут замедлить ее развитие. Среди наиболее значимых можно отметить неполную поддержку всеми браузерами. Так, Chrome и Opera начали поддержку прогрессивных WebApps, а Firefox и Microsoft взяли на себя обязательство по поддержке. Пока намерений по поддержке этого формата нет только у Apple [31]. Однако преимуществ у нее гораздо больше. Прогрессивные приложения значительно меньше мобильных приложений по размеру, так как они эффективно используют возможности браузера. Установка приложения происходит мгновенно. Все компоненты, которые требуют длительной загрузки, уже устанавливаются в кэш при первом посещении сайта пользователем. Кроме того, прогрессивные приложения кроссплатформенны в отличие от обычных, которые могут быть использованы только на той платформе, для которой они созданы. Вы не можете использовать обычное приложение на вашем компьютере так же, как на Android или iOS устройстве, в отличие от прогрессивных приложений. Учитывая все вышесказанное, можно сделать вывод, что технология PWA может быть весьма полезной для нужд образования, так как позволит обеспечить охват аудитории как в веб, так и в мобильной среде, а также позволит системе
оставаться отзывчивой и актуальной, несмотря даже на низкую скорость подключения к сети интернет или даже временное отсутствие подключения.
Литература
1. Zakharova I., Kuzenkov O. Experience in implementing the requirements of the educational and professional standards in the field of ICT in russian education.Всборнике: CEUR Workshop Proceedings Selected Papers of the 11th International Scientific-Practical Conference Modern Information Technologies and IT-Education, SITITO 2016. С. 17-31.
2. Захарова И.В., Сыромясов А.О. Отечественные стандарты высшего образования: эволюция математического содержания и сравнение с финскими аналогами // Вестник ТвГУ. Серия Педагогика и психология. 2016. № 2. С. 140-155.
3. Захарова И.В., Кузенков О.А. Опыт актуализации образовательных стандартов высшего образования в области ИКТ// Современные информационные технологии и ИТ-образование. 2017. Т. 13. № 4. С. 46-57.
4. Kuzenkov O.A., Zakharova I.V. Mathematical programs modernization based on Russian and International standardsZ/Современные информационные технологии ИТ-образование. 2018. Т. 14. № 1. С. 233-244.
5. SoldatenkoI.S., BalandinD.V., KuzenkovO.A., ZakharovaI.V., BiryukovR.S., KuzenkovaG.V., YazeninA.V., NovikovaS.V. Modernization of math-related courses in engineering education in Russia based on best practices in European and Russian universities. В книге: 44th Annual Conference of the European Society for Engineering Education - Engineering Education on Top of the World: Industry-University Cooperation, SEFI 2016 44, Engineering Education on Top of the World: Industry-University Cooperation. 2016. С. 131.
6. Zakharova I.V., Kuzenkov O.A., Soldatenko I.S., Yazenin A.V., Novikova S.V., Medvedeva S.N., Chukhnov A.S. Using SEFI framework for modernization of requirements system for mathematical education in Russia. В книге: 44th Annual Conference of the European Society for Engineering Education - Engineering Education on Top of the World: Industry-University Cooperation, SEFI 2016 44, Engineering Education on Top of the World: Industry-University Cooperation. 2016. С. 164.
7. Новикова С.В., Новикова К.Н. Инструменты оценки эффективности обучения по стандартам SEFI в e-leaming системе Math-Bridge // Международный электронный журнал "Образовательные технологии и общество (Educational Technology&Society)" - 2016. - Т.19. - №3. - C.496-508. - ISSN 1436-4522.
8. Kremer, M., Brannen, C., &Glennerster, R. The challenge of education and learning in the developing world. // Science, 2013, 340(6130), 297-300. DOI:
10.1126/science. 1235350
9. Медведева С.Н. Разработка интерактивных электронных образовательных ресурсов для e-learning.//Всероссийская научно-практическая конференция с международным участием «Новые технологии, материалы и оборудование российской аэрокосмической отрасли» АКТО-2016 10-11 августа 2016 г. -С. 977980
10. Кремлева Эльмира Шамильевна, Новикова Светлана Владимировна Программные средства поддержки самостоятельной работы студентов в рамках курса «Компьютерное моделирование процессов и систем» для студентов технических ВУЗов// Международный электронный журнал "Образовательные технологии и общество (Educational Technology&Society)" - 2018. - Т.21. - №1. - C.363-387.
11. Кузенков О.А., Кузенкова Г.В., Киселева Т.П. Использование электронных средств обучения при модернизации курса "Математическое моделирование
процессов отбора"//Образовательные технологии и общество. 2018. Т. 21. № 1. С. 435-448.
12. Новикова С.В., Снегуренко А.П. К вопросу создания мультиязычных электронных обучающих курсов// Международный электронный журнал "Образовательные технологии и общество (Educational Technology&Society)" -2016. - Т.19. - №4. - C.429-439. - ISSN 1436-4522
13. Snegurenko A.P., Sosnovsky S.A., Novikova S.V., Yakhina R.R., Valitova N.L., Kremleva E.Sh. Using E-Learning Tools to Enhance Students-Mathematicians' ^mpetences in the ^ntext of International Academic Mobility Programmes. Integratsiya obrazovaniya = Integration of Education. 2019; 23(1):8-22. DOI: 10.15507/1991-9468.094.023.201901.008-022
14. Медведева С.Н. К методике проектирования информационных технологий обучения на основе компьютерных учебников.//Вестник КГТУ им. А. Н. Туполева, - Казань: 1999. № 2-С. 76-79.
15. Novikova S.V., Sosnovsky S.A., Yakhina R.R., Valitova N.L., KremlevaE.Sh. The specific aspects of designing computer-based tutors for future engineers in numerical methods studying. Integratsiya obrazovaniya = Integration of Education. 2017; 2(21):322-343. DOI: 10.15507/1991-9468.087.021.201702.322-343
16. Савкина А.В., Савкина А.В., Федосин С.А. Виртуальные лаборатории в дистанционном обучении. Образовательные технологии и общество. 2014. Т. 17. № 4. С. 507-517.
17. Нуштаева А.В., Савкина А.В., Тихонова Н.П., Макарова Н.В., Немчинава Е.А., Пыресева О.С. Разработка виртуального лабораторного комплекса для определения горизонтальной составляющей напряженности магнитного поля Земли. В сборнике: Лучшая научно-исследовательская работа 2017 сборник статей XI Международного научно-практического конкурса. 2017. С. 68-73.
18. Медведева С. Н. Проектирование дистанционного обучающего курса в среде Lotus Learning Space//Educational Technology& Society.2005. 1 8(1). ISSN 14364522, Р. 148-164.
19. Новикова С.В. Проблемы интеграции практико-лабораторных модулей в дистанционный обучающий комплекс среды Learning SpaceV/Международный электронный журнал «Образовательные технологии и общество (Educational Technology&Society)». 2014. -V.17. -№4. -C.543-554.
20. Медведева С.Н., Дубовский К.П. Проектирование электронного курса сложной логической структуры в системе дистанционного обучения Blackboard//Международный электронный журнал "Образовательные технологии и общество (Educational Technology&Society)" -2011. -V.14. -№4. -C.329-341. -ISSN 1436-4522
21. Валитова Наталья Львовна, Новикова Светлана Владимировна, Кремлева Эльмира Шамильевна Разработка электронного образовательного ресурса в поддержку курса Software and Systems Engineering на платформе Blackboard для студентов Германо-Российского института новых технологий // Международный электронный журнал "Образовательные технологии и общество (Educational Technology&Society)" - 2018. - Т.21. - №1. - C.305-321.
22. Валитова Наталья Львовна, Новикова Светлана Владимировна Внедрение интерактивных демонстраций в статичные элементы обучения системы MathBridge// Международный электронный журнал "Образовательные технологии и общество (Educational Technology&Society)" - 2017. - Т.20. - №1. - C.381-392. -ISSN 1436-4522.
23. Савкина А.В., Нуштаева А.В., Борискина И.П. Информатизация курса "Алгебра и геометрия" с помощью интеллектуальной обучающей системы Math-Bridge Образовательные технологии и общество. 2016. Т. 19. № 4. С. 479-487.
24. Макарова Н.В., Немчинова Е.А., Савкина А.В., Федосин С.А.Возможности интеллектуальной системы Math-Bridge при обучении студентов методам сортировки массивов Инженерное образование. 2017. № 21. С. 110-116.
25. Новикова С.В. Нестандартные элементы e-learning курсов системы Math-Bridge// Международный электронный журнал "Образовательные технологии и общество (Educational Technology&Society)" - 2016. - Т.19. - №3. - C.440-464. - ISSN 14364522
26. Кремлева Эльмира Шамильевна, Новикова Светлана Владимировна Использование интерактивных формул и выражений в динамических тест-объектах e-learning системы MathBridge // Международный электронный журнал "Образовательные технологии и общество (Educational Technology&Society)" -2017. - Т.20. - №1. - C.366-380. - ISSN 1436-4522.
27. Максимилиано Ф., Веб-программирование для мобильных устройств. — 1-е изд.
— М. : Рид Групп, 2012. — 576 с.
28. Диков И. А., Основы веб-программирования: язык разметки гипертекста HTML. Книга 1. — 3-е изд. — М.: LAMBERT, 2017. — 128 с.
29. Джонатан С., Разработка iPhone-приложений с помощью HTML, CSS и JavaScript.
— 1-е изд. — М.: Питер, 2011. — 341 с.
30. https://habr.com/ru/company/mailru/blog/450504/ (Дата обращения 28.11.2019)
31. Дронов В.М., PHP, MySQL, HTML5 и CSS 3. Разработка современных динамических Web-сайтов. — 2-е изд. — М.: БХВ-Питер, 2011. — 302 с.
