=Paper=
{{Paper
|id=Vol-3077/paper16
|storemode=property
|title=Design a progressive web application to support student learning
|pdfUrl=https://ceur-ws.org/Vol-3077/paper16.pdf
|volume=Vol-3077
|authors=Svitlana O. Leshchuk,Yurii S. Ramskyi,Anastasia V. Kotyk,Serhiy V. Kutsiy
|dblpUrl=https://dblp.org/rec/conf/cs-se-sw/LeshchukRKK21
}}
==Design a progressive web application to support student learning==
https://ceur-ws.org/Vol-3077/paper16.pdf
Design a progressive web application to support
student learning
Svitlana O. Leshchuk1 , Yurii S. Ramskyi2 , Anastasia V. Kotyk1 and Serhiy V. Kutsiy1
1
Ternopil Volodymyr Hnatiuk National Pedagogical University, 2 Maxyma Kryvonosa Str., Ternopil, 46027, Ukraine
2
National Pedagogical Dragomanov University, 9 Pyrogova Str., Kyiv, 01601, Ukraine
Abstract
The role of progressive web applications in students’ educational activities is researched in the work.
Authors compare them with applied and hybrid programs; determine the features of PWA technology
as well as analyze the architecture of progressive web applications. The study aim is to develop and
implement the progressive web application that is an information portal of the Faculty of Physics and
Mathematics Ternopil Volodymyr Hnatiuk National Pedagogical University using PWA technology. To
achieve this goal, the following required resources for the’ training organization of student’s activities
have been selected. They are the schedule of the educational process, lessons schedule, schedule of mod-
ular and final controls, information on practice, schedule of final exams, regulatory and methodological
software. On the first stages of work a website template was created in addition to information gathering.
The next stages of practical implementation were aimed at the development of logic and implementation
of PWA technology, namely defining the interface, adding a worker, creating auxiliary functions. The
final stage of the study is the project deployment. The results obtained by the author can be used in the
process of higher specialists training in educational institutions. The web application itself is practical
for organizing students’ educational activities.
Keywords
progressive web application, web-programming, future computer science teacher, information portal,
organization of educational activities
1. Introduction
Technological innovations always affect how goods and services are developed. In recent years,
there has been an increase in Internet services [1]. This is due to the introduction of new and
improvement of existing technologies. Things that were previously impossible now exist. The
application of technology can be traced in all areas such as business, education, science, health,
agriculture. Today, business perceives the Internet as a business platform and requires constant
scaling.
CS&SE@SW 2021: 4th Workshop for Young Scientists in Computer Science & Software Engineering, December 18, 2021,
Kryvyi Rih, Ukraine
" leshchuk_so@fizmat.tnpu.edu.ua (S. O. Leshchuk); y.s.ramsky@npu.edu.ua (Y. S. Ramskyi);
kotyk_av@fizmat.tnpu.edu.ua (A. V. Kotyk); kutsyj_sv@fizmat.tnpu.edu.ua (S. V. Kutsiy)
~ https://tnpu.edu.ua/faculty/fizmat/leshchuuk_so.php (S. O. Leshchuk); https://ramsky.fi.npu.edu.ua/
(Y. S. Ramskyi)
0000-0001-6600-7940 (S. O. Leshchuk); 0000-0002-3121-7005 (Y. S. Ramskyi); 0000-0002-8427-5532 (A. V. Kotyk);
0000-0002-8427-5532 (S. V. Kutsiy)
© 2022 Copyright for this paper by its authors.
Use permitted under Creative Commons License Attribution 4.0 International (CC BY 4.0).
CEUR
Workshop
Proceedings
http://ceur-ws.org
ISSN 1613-0073
CEUR Workshop Proceedings (CEUR-WS.org)
83
Therefore, there is a need for fast and reliable applications, including for mobile phones. The
rapidly growing market of mobile devices has set a need for applications being available at
anytime, anywhere, and on any device. Although this evolution provides users an unprecedented
freedom, developers are facing the challenges caused by mobile device fragmentation [2].
Current application development solutions are insufficiently optimized for the high diversity
of mobile platforms and hardware characteristics.
After solving these problems, it remains relevant a need for fast and reliable web applications.
One such web technology is the Progressive Web App (PWA). It transforms the site into an
application. If you delve into its architecture, the developer is offered technologies (Service
Worker, Push Notifications, WebApp manifest, HTTPS, App shell) and outlines goals (Reliable,
Fast, Engaging). Since PWA has no limitations like traditional applications, they can be as
advanced as possible and can run on all possible operating systems.
We can teach this to students today. Designing a mobile-oriented environment for professional
and practical training requires determining the stable (fundamental) and mobile (technological)
components of its content and determining the appropriate model for specialist training. In
work [3] it has been established that the fundamental core of software engineers’ training should
ensure that students achieve such leading learning outcomes: to know and put into practice
the fundamental concepts, paradigms and basic principles of the functioning of language,
instrumental and computational tools for software engineering; know and apply the appropriate
mathematical concepts, domain methods, system and object-oriented analysis and mathematical
modeling for software development; put into practice the software tools for domain analysis,
design, testing, visualization, measurement and documentation of software.
Thus, there is a need for fast and reliable web applications. One such web technology is the
Progressive Web App (PWA). It transforms the site into an application. If you delve into its
architecture, the developer is offered technologies (Service Worker, Push Notifications, Web
App manifest, HTTPS, App shell) and outlines goals (Reliable, Fast, Engaging). Since PWA has
no limitations like traditional applications, they can be as advanced as possible and can run on
all possible operating systems. Therefore, consider this area of research relevant.
2. The research apparatus
This work is a research project on a progressive web application. The main goal was to evaluate
and implement advanced technologies for creating a web application. The project is implemented
by studying the theoretical foundations and developing a prototype PWA web application. The
React and React Material web components were used to create the user interface. Web App
Manifest, Service Worker, App Shell, and Web Push Notification have been implemented to
keep the application running offline, increasing its download speed on slow networks.
The purpose of this work is to introduce a progressive web application in the activities
of students of the Physics and Mathematics Faculty of Ternopil Volodymyr Hnatiuk National
Pedagogical University [4]. The study took place over several stages.
1. Development of a site template.
2. Collection of necessary information about the work of the faculty.
3. Development of the logic of the application.
84
4. Development of the PWA application (mobile and desktop versions).
5. Project deployment
The object of research is the technology of creating advanced web applications.
The subject of research is a progressive web application as a means of implementing educational
interaction.
To achieve this goal, we used a set of research methods such as analysis of scientific and
technical literature, generalization, modeling of information processes, observation, analysis of
experience in the use of PWA technology, software development and testing.
The approbation of the research was carried out within the activity of the STEM-center of
the Physics and Mathematics Faculty of Ternopil Volodymyr Hnatiuk National Pedagogical
University, in particular in the educational process.
3. Research results
The role of progressive web applications in students’ educational activity is considered in the
work. A significant role is devoted to the comparison of this technology with applied and hybrid
programs. The features of PWA technology are also studied, the architecture of advanced web
applications is analyzed.
3.1. Analysis of the basic concepts of the study
To understand what Progressive Web Apps (PWA) is, it is enough to imagine that a site interacts
with the user as an application. The user can install it on any gadget, receive messages and
work with it. And the work can continue even offline. This application model offers combine
the features of modern browsers and the benefits of mobile applications. Progressive Web App
is a hybrid of a site and an application.
Progressive web applications give the user access to information in one click. The involvement
of the resource increases, because the client can quickly visit the resource at any convenient
time. At the same time, PWAs are able to run on almost all hardware platforms, which reduces
the cost of development: you do not need to create a separate product for each operating system,
just develop one universal PWA-application. Progressive mobile applications demonstrate good
behavioral factors. This is because users actively navigate the pages and receive lower bounce
rates. This has a positive effect on the ranking of the site in search. PWA only works with the
HTTPS protocol, which also improves the security of the site.
In terms of User Experience (UX), PWA also has advantages. With the progressive web
application, the user can enjoy not only browsing, searching and downloading resources, but
also the time saved and nerves saved. Such solutions are especially interesting in terms of
Ukrainian realities, where 3G / 4G coverage is not so ideal. However, Progressive Web Apps
cannot completely replace mobile applications, because the native mobile application still has
more features. However, in many cases, the PWA site is becoming a cheaper alternative to
mobile applications. The advantages of PWA include:
• PWAs are small in size due to the fact that they effectively use the capabilities of the
browser;
85
Table 1
Comparison of progressive and mobile applications.
Features PWA Mobile Application
Instant installation + -
Higher development speed + -
The device takes up less memory + -
Low development cost + -
Cheaper to develop and maintain + -
Interaction with a microphone and a smartphone camera + -
Use of functions of access to proximity sensors, bluetooth, etc. - +
No need for stores to distribute them + -
Table 2
Comparison of progressive applications and sites.
Features PWA Site
Higher download speed + -
Work offline + -
Faster and easier access + -
Push notifications + -
More user-friendly interface + -
Support for many browsers + -
• faster in development;
• in progressive applications it is easier to edit content (you do not need to edit content
separately in the application and separately on the site);
• it is easier to use a PWA site, which increases the SEO indicators of the site.
Some features of progressive and mobile applications are shown in the tables 1, 2.
PWA’s popularity is growing very fast in the field of e-commerce, business, Internet portals,
and other industries due to these characteristics [5].
Creating advanced web applications that meet all the requirements based on performance,
availability, adherence to best practices and SEO is quite a challenge. To do this, all PWA
components, such as Service Worker, Web App Manifest, Application Shell model, and Web
Push notifications, must be implemented with great care and testing.
3.2. Set of selected technologies
• React. It was used in this project to display the results of the components, as well as
through the convenience of creating new projects using the utility react-create-app, which
provides all the necessary tools to the developer right of the box. Any data is passed to
the components using props, in the component they are already processed in order to
render the result. Another important advantage is the ability to use states. That is, it is
data that can change asynchronously depending on the user‘s actions. For example, a user
86
entering data into a form text box can update the date in the components via setState(),
or data coming from API can update the input field value asynchronously, so there is no
need to reload the browser page to see new data, and the user always will see the latest
version of the site.
• React-Router. In the developed program, as well as in any typical website, routing is
used. There is no special choice here, because react-router is probably the only popular
solution available. The router allows you to easily and flexibly control the display of the
application depending on the route in the browser, redirect the user to other routes and
block unwanted transitions.
• Webpack. It was decided to use Webpack to build the applications. This is the most
powerful and popular solution at the moment. From scratch, setting up an assembly can
take a decent amount of time, so it was decided to use npx create-react-app, which allows
you to deploy a ready-to-develop application environment. When a webpack processes
an application, it internally creates a dependency graph that display each module that
the project needs and generates one or more package.
The entry point indicates which web package of the module should be used to build an
internal dependency graph. Webpack will find out which other modules and libraries this
entry point depends on (directly and indirectly).
The output property tells the webpack where to place the created sets and how to name
these files. By default, the path will be in ./dist/main.js for the main source file and the
./dist folder for any other created file.
By default, the web package only understands JavaScript and JSON files. Downloaders
allow the webpack to process other types of files and convert them into active modules
that can be used by the application and added to the dependency graph.
Although loaders are used to convert certain types of modules, plug-ins can be used to
perform a wider range of tasks, such as package optimization, asset management, and
the introduction of environment variables.
To use the plugin, you need to call the require() command with the name of the plugin
and add it to the plugin array. Most plugins can be customized with options. Because the
plugin can be used multiple times in the configuration for different purposes, you need to
instantiate it by calling it with the new operator.
You also need to set the development mode parameter, one of: development, production,
or none. This way, the webpack will enable built-in web package optimizations that are
appropriate for each environment. The default value is production. Webpack runs on
Node.js version 8.x or newer.
• Git. It was used as the version control system. The git process is shown in the figure 1.
Before you start, you need to initialize git by calling the git init command. This command
will create a .git directory where it was called. The git add command is used to add new
files. The next step is to call the git commit command, which creates a committee in the
current branch with the entered message, as well as files that are in the stack.
• PhpStorm development environment PhpStorm is an intelligent editor for PHP, HTML
and JavaScript with the ability to analyze code on the fly, prevent errors in raw code and
automated refactoring tools for PHP and JavaScript. The autocomplete code in PhpStorm
supports the PHP 5.3 / 5.4 / 5.5 / 5.6 / 7.0 / 7.1 specification (modern and traditional
87
Figure 1: Scheme of work Git.
designs), including generators, coroutines, namespaces, locks, types, and short array
syntax. There is a full-fledged SQL-editor with the ability to edit the results of queries [6].
PhpStorm is based on the IntelliJ IDEA platform, written in Java. Users can extend the
functionality of the development environment by installing plug-ins designed for the
IntelliJ platform or by writing their own plug-ins. All WebStorm functionality is included
in PhpStorm.
PhpStorm is ideal for working with Symfony, Drupal, WordPress, Zend Framework,
Laravel, Magento, Joomla, CakePHP, Yii and other frameworks.
PhpStorm deeply analyzes the structure of the code, supporting all the features of the
PHP language in both new and legacy projects. The editor supports code auto-completion
and refactoring, prevents errors on the fly.
PhpStorm has the ability to work with the most modern technologies: HTML5, CSS, Sass,
Less, Stylus, CoffeeScript, TypeScript, Emmet and JavaScript. Refactoring, debugging and
unit testing will be available. Thanks to the Live Edit function, all changes can be viewed
immediately in the browser.
It is convenient to perform monotonous tasks directly in PhpStorm. IDE is integrated
with version control systems, supports remote deployment, databases and SQL, command
line tools, Docker, Composer, REST client and many other tools.
PhpStorm includes all WebStorm functionality, as well as full support for PHP, databases
and SQL.
PhpStorm takes care of the quality of the code with the help of hundreds of inspections,
which check the code on the fly and analyze the whole project. PHPDoc support, a
formatting tool, quick fixes, and other features help developers write neat code that is
easy to maintain.
88
PhpStorm securely converts code by reliably refactoring renaming, moving and deleting,
extracting methods, entering changes, moving items up or down, changing signatures,
and more. Refactoring that takes into account the specifics of a particular language will
help to apply changes throughout the project in a couple of clicks. In this case, any
transformation can be canceled.
3.3. Creating an information portal FIZMAT
PWA development is based on a stack of selected technologies for this project. It should be
added that you can create a PWA without additional frameworks or libraries. To begin with,
HTML and Javascript are enough.
The first stage was the deployment of the project infrastructure, and the git version control
system was initialized. All packages used in the web program are at the root of the project in
the package.json file (figure 2).
Figure 2: Packages used in development.
To initialize the git version control system, the git init command is called, which creates a
new repository in the current folder. The .git folder contains all the information needed for the
project in version control, and all the information about the commit, the address of the remote
repository, and so on. They are all present in .git folder. It also contains a journal that preserves
the history of the committees.
Creating React Components. Components are independent and reusable bits of code. They
perform the same goals as JavaScript functions, but work in isolation and return HTML through
a rendering function. There are two types of components, class components and function compo-
89
nents, this project uses class components. When you create a React component, the component
name must begin with a capital letter. The component must include the React.Component
extends statement, which creates a descendant from React.Component and gives the component
access to the React.Component functions. The component also requires the initialization of the
render() method in the class, this method returns HTML (figure 3).
Figure 3: Class schedule component of training.
The submitted component is passed to another component of the library react-router
.
Website resources are stylized in the App.css file. Also connected are fontawesome icons
by a separate npm package. Components are rendered to reflect the resources of the Faculty
of Physics and Mathematics, such as a component that displays a graph of modular and final
controls (figure 4).
The next step is to test the progressive web application offline (figure 5).
3.4. Practical implementation of the model
Stage 1. Creating a site template.
The first step is to create an index.html file. Which will be the main template of the site, which
connects all the other necessary resources, such as: styles, scripts, manifest file, the necessary
images to install the website on the user’s device. Also in this file the entry point for the created
90
Figure 4: Component of the schedule of modular and final controls.
progressive web application is defined, as an element in which the virtual DOM created by
React components will be rendered there will be a div element with the root identifier. The
index.html template checks for the presence of a web worker in the browser, if the browser
supports PWA technology, the worker is registered in the browser by specifying the path to the
file in which it is defined.
Stage 2. Collection of information.
The web application is designed for students of the Faculty of Physics and Mathematics, so
the information provided in it will be useful, especially for physicists. The application provides
all the necessary information:
• schedule of the educational process;
• schedule of classes for full-time and part-time education;
• schedule of modular and final controls;
• information about the practice;
• schedule of final certification;
• normative and methodological support;
• schedule of individual classes;
• schedule of liquidation of academic debt;
91
Figure 5: The homepage of the web application is offline.
• disciplines of choice.
Stage 3. Development of logic.
The use of selected technologies allows the developer to build the architecture of the applica-
tion following the already defined rules of writing code and the correct structuring of the file
hierarchy in the project. All pages on the site are available at a specific link. Since the routing
is on the client side, a react-router library was used, which intercepts all transitions on the site,
calling the desired component for each of the links. React supports the component approach in
programming, so all pages on the site are components that are passed to the appropriate as component properties. A component is a class that is inherited from React.Component,
which initializes all the properties and states required to run the component. In the constructor
of a class the transferred properties as props, and also public properties of a class which are
necessary for correct display of contents rise to the parent class. In the render class method, all
file paths are defined, depending on the state of the user’s network, and a template is returned
with the data ready to be displayed in the user’s browser.
Stage 4. Introduction of PWA technology.
The first step in implementing PWA technology was to add the manifest.json file. The web
application manifest is a JSON file that defines the PWA interface. It determines how you
download and display progressive web applications, as well as your own application from the
application store. The manifests of this web application include: the name of the program,
description, style, theme, icons, the initial path when opening it on the device, and a list of
necessary resources. Unlike regular bookmark-only web applications, PWAs can use regular
web APIs and be installed on the device home screen.
The successor korok needs to create a worker file, and also to connect yo-go on a site in a
92
root template. The file, according to the recommendations of google developers, creators of
this technology, is called service-worker.js. It is placed in the public folder on the same level
with the manifest file. This file specifies the path from where to start caching files, in this case
the root of the site was selected so that all files are stored in the browser cache and the cache
version is specified to identify its different versions. The handler added handlers for events that
come from the browser, these are: install, activate, fetch.
The install event is a standard event in which the worker is prepared for work. For example,
creating a cache using the built-in API saves the necessary resources that are needed to run
offline.
Activate event — the handler of this event clears outdated cache and other things related to
the previous version of the service employee, ie the file service-worker.js.
Fetch event – is triggered when a user, in this case a browser, or a device, sends a request to
obtain a specific resource. The handler works to retrieve the resources stored in the cache and
send the requested data to the client using the respondWith event method.
Each resource in the cache is stored with the name of the generated hash, so the resources
cannot be duplicated in memory. To work with hashed files, auxiliary functions were created:
removeHash, hasHash, hasSameHash.
Stage 5. Project deployment.
As a hosting for the project, the Firebase platform was used. Hosting Firebase provides fast
and secure hosting for hosted web applications, static and dynamic content and microservices.
You must first install the developer tools to call the Firebase features from the console. Tools
are installed using the npm install firebase-tools-g command. The next step is to log in to the
Firebase platform, such authentication is performed using the firebase login command, where
you need to enter your email address and password from the account. After successful user
authentication, you need to initialize the project by calling the firebase init command. During
the initialization process, you will be prompted to configure the project upload process to the
host. You must specify a folder that contains the static resources used by the web application.
After the initialization of the process of uploading files to the host, Firebase will create files:
.firebaserc, firebase.json. These files are automatically generated when you need to make a
commit and upload the last commit to the host, so that locally the developer and the host had
consistent data of the web application.
The developed web application is available at: https://new-info-fizmat.web.app/
3.5. Experimental study
Usually, the experiment is carried out as part of scientific research and serves to test the
hypothesis, to establish causal links between phenomena. In a passive experiment, information
about the object under study is accumulated by passive observation, ie information is obtained
in the normal functioning of the object. The results of the experimental study we obtained by
analyzing the questionnaire.
The aim of the questionnaire was determination of efficiency of the use of informative portal
physical Faculty of Mathematics using PWA technology. Among the questions: research of
requirements in such web applications, comfort of establishment and use, selection of content,
design.Informative materials for organization of educational activity of students can be found
93
Figure 6: The level of interest of respondents.
and on the web-site of university.But exactly optimization of access to them induced this
research.In his experimental part we compare traditional access to these resources with the use
of worked out to web-addition of PWA. We present the processing of the results of twenty-seven
respondents (figure 6).
The content of the information portal received the highest marks (23% – “4” out of “5”, 74% –
“5”). We received more than 95% of positive feedback on the block of questions regarding the
design of the interface and design. It should be added that the design is subject to change and
does not require significant changes to the code, its structure, or logic.
An important result is that most respondents were able to install a website on their device
(figure 7):
Figure 7: Evaluate the installation of a web application on the device.
The question regarding the recommendation of the web relationship received a 100% positive
answer. This indicates that students need a quick and easy application that does not need to be
downloaded and installed on a device that will have all the information they need. As a result,
94
we received mostly positive results from respondents. This allows us to talk about a sufficient
level of demand for websites of this type and its quality development (figure 8).
Figure 8: Assessment of the overall impression of use.
4. Conclusions
This work was performed as a research project on a progressive web application. The main
goal was to evaluate and implement advanced technologies in the application. This study was
conducted by studying the relevant theory and developing a prototype PWA web application.
The React and React Material web components were used for the user interface, while Web App
Manifest, Service Worker, App Shell and Web Push Notification were implemented to make
the program work offline, load quickly even on unstable networks and send the appropriate
push notifications as a native application. The study demonstrates how PWA combines the best
practices of websites and applications. In addition, it also demonstrates some of the challenges
that PWA faces in today’s information technology environment, and that PWA is still in its
infancy. Meanwhile, Google is actively developing this technology and working hard to provide
and support tutorials. Thus, with growing browser and platform support, PWA may be the
future of mobile Internet.
Collection of technical information for development of PWA of applications can be used for
organization of similar projects and studies of students of technological profiles. A research
and practice result is development of progressive web application as to the means of realization
of educational co-operation.
After conducting a theoretical study, implementing the developed web application (filling it
with information materials), and evaluating the effectiveness of its application, we can conclude
that the purpose of the work – the introduction of a progressive web application in the activities
of students of the Faculty of Physics and Mathematics of Ternopil Volodymyr Hnatiuk National
Pedagogical University achieved.
95
References
[1] Y. Ramsky, O. Rezina, Study of Information Search Systems of the Internet, in: R. T.
Mittermeir (Ed.), From Computer Literacy to Informatics Fundamentals, Springer Berlin
Heidelberg, Berlin, Heidelberg, 2005, pp. 84–91. doi:10.1007/978-3-540-31958-0_11.
[2] H. Desruelle, D. Blomme, F. Gielen, Adaptive mobile web applications: A quantitative
evaluation approach, Lecture Notes in Computer Science (including subseries Lecture Notes
in Artificial Intelligence and Lecture Notes in Bioinformatics) 6757 LNCS (2011) 375–378.
doi:10.1007/978-3-642-22233-7_29.
[3] A. M. Striuk, S. O. Semerikov, The dawn of software engineering education, CEUR Workshop
Proceedings 2546 (2019) 35–57. URL: http://ceur-ws.org/Vol-2546/paper02.pdf.
[4] P. Turansky, S. Leshchuk, Creation of modern web applications using PWA technology, in:
Modern information technologies and innovative teaching methods: experience, trends,
prospects, 2020. URL: http://dspace.tnpu.edu.ua/handle/123456789/16990.
[5] Add a web app manifest, 2021. URL: https://developers.google.com/web/fundamentals/
web-app-manifest/.
[6] PhpStorm. The Lightning-Smart PHP IDE, 2021. URL: https://www.jetbrains.com/phpstorm/.
96