Architectural Consideration for Gamified Learning Systems: An Exploration of Offline-First Progressive Web Application
https://doi.org/10.26594/register.v11i2.5087
Keywords:
Offline-first Architecture, Progressive Web Application, Gamified Learning System, Scalability, Educational TechnologyAbstract
This paper presents a detailed exploration of the architectural development of an offline-first Progressive Web Application (PWA) prototype, specifically designed for gamified learning systems. The core research involves the technical examination of the PWA prototype, emphasizing its architectural design and crucial offline capabilities in the context of gamification elements. The study highlights the critical architectural components necessary for offline-first PWAs in educational settings, including the usage of PWA service workers and caching mechanisms. Key gamification features were identified and integrated, differentiating between those suitable for offline settings (like Points Systems, Badges/Achievements, Progress Tracking) and those requiring online connectivity (like Global Leaderboards and Social Interactions). The prototype, built using the React frontend framework and Supabase BAAS for the backend, demonstrates the potential of offline-first strategies in educational technology. It provides practical insights into the challenges and opportunities of maintaining engaging, uninterrupted learning experiences, particularly in low-connectivity environments. In conclusion, while offline-first PWAs effectively support learning activities with intermittent internet access, the research suggests that a careful balance must be managed between robust offline functionality and the richness of dynamic online interactivity to fully maximize the benefits of gamification.
Downloads
References
[1] S. Yadav, S. Dixit, M. Maurya, and M. Dharwal, “Pattern of productivity in gamification elements research: Bibliometric distributions,” in Proc. 9th Int. Conf. Advanced Computing and Communication Systems (ICACCS), Mar. 2023, pp. 2470–2474, doi: 10.1109/ICACCS57279.2023.10112903.
[2] J. Swacha, “State of research on gamification in education: A bibliometric survey,” Educ. Sci., vol. 11, no. 2, p. 69, Feb. 2021, doi: 10.3390/educsci11020069.
[3] G. Lampropoulos, E. Keramopoulos, K. Diamantaras, and G. Evangelidis, “Augmented reality and gamification in education: A systematic literature review of research, applications, and empirical studies,” Appl. Sci., vol. 12, no. 13, p. 6809, Jul. 2022, doi: 10.3390/app12136809.
[4] W. Shun, “Development of music online teaching system based on distributed database search technology,” Mobile Inf. Syst., vol. 2022, pp. 1–10, Aug. 2022, doi: 10.1155/2022/9592393.
[5] L. F. Daghestani, L. F. Ibrahim, R. S. Al-Towirgi, and H. A. Salman, “Adapting gamified learning systems using educational data mining techniques,” Comput. Appl. Eng. Educ., vol. 28, no. 3, pp. 568–589, May 2020, doi: 10.1002/cae.22227.
[6] J. van Biljon and R. van der Merwe, “Trends, drivers and barriers influencing cloud computing services for mobile interactions in teaching and learning,” in Proc. Conf. Inf. Commun. Technol. Soc. (ICTAS), 2018.
[7] L. A. Tomei, “Top technologies for integrating online instruction,” Int. J. Online Pedagogy Course Des., vol. 1, no. 1, pp. 12–28, Jan. 2011, doi: 10.4018/ijopcd.2011010102.
[8] F. S. D. Steven, The LMS Guidebook: Learning Management Systems Demystified. Alexandria, VA, USA: ASTD Press.
[9] A. M. Al-Rahmi, W. M. Al-Rahmi, U. Alturki, A. Aldraiweesh, S. Almutairy, and A. S. Al-Adwan, “Acceptance of mobile technologies and m-learning by university students,” Educ. Inf. Technol., vol. 27, no. 6, pp. 7805–7826, Jul. 2022, doi: 10.1007/s10639-022-10934-8.
[10] T. Neo and M. Neo, “Classroom innovation: Engaging students in interactive multimedia learning,” Campus-Wide Inf. Syst., vol. 21, no. 3, pp. 118–124, Jul. 2004, doi: 10.1108/10650740410544018.
[11] A. O. O., I. S. A., A. A. O., and A. Chigozirim, “Overcoming learning challenges associated with COVID-19 pandemic using PWA development approach,” IJERCSE, vol. 9, no. 3, pp. 7–12, Mar. 2022, doi: 10.36647/IJERCSE/09.03.Art002.
[12] P. Pornpongtechavanich and P. Wannapiroon, “Intelligent interactive learning platform for seamless learning ecosystem,” Int. J. Emerg. Technol. Learn., vol. 16, no. 14, p. 232, Jul. 2021, doi: 10.3991/ijet.v16i14.22675.
[13] H. Wijaya and R. A. Abbas, “Animation effectiveness for e-learning with progressive web app approach,” Int. J. Eng. Technol., vol. 7, no. 4.11, p. 112, Oct. 2018, doi: 10.14419/ijet.v7i4.11.20785.
[14] D. M. Case, C. Steeve, and M. Woolery, “Progressive web apps are a game-changer,” in Proc. 51st ACM Tech. Symp. Comput. Sci. Educ., Feb. 2020, p. 1396, doi: 10.1145/3328778.3367007.
[15] A. B. Assetbekov, “Progressive web applications capabilities to become an alternative to mobile applications,” Bull. Nat. Eng. Acad. Repub. Kazakhstan, vol. 85, no. 3, pp. 17–27, Sep. 2022, doi: 10.47533/2020.1606-146X.173.
[16] Mozilla Developer Network, “Progressive web apps,” Accessed: Dec. 7, 2022. [Online]. Available: https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps
[17] K. Behl and G. Raj, “Architectural pattern of progressive web and background synchronization,” in Proc. Int. Conf. Advances in Computing and Communication Engineering (ICACCE), Jun. 2018, pp. 366–371, doi: 10.1109/ICACCE.2018.8441701.
[18] C. J. Gómez-Sierra, “Design and development of a PWA,” IOP Conf. Ser.: Mater. Sci. Eng., vol. 1154, no. 1, p. 012047, Jun. 2021, doi: 10.1088/1757-899X/1154/1/012047.
[19] D. Sauble, Offline First Web Development. Birmingham, U.K.: Packt Publishing, 2015.
[20] G. Pantelakis, P. Papadopoulos, N. Kourtellis, and E. Markatos, “Be daring to push your ads forward,” arXiv preprint, 2021.
[21] J. Lee, H. Kim, J. Park, I. Shin, and S. Son, “Pride and prejudice in progressive web apps,” in Proc. ACM SIGSAC Conf. Comput. Commun. Secur., Oct. 2018, pp. 1731–1746, doi: 10.1145/3243734.3243867.
[22] S. Deterding, M. Sicart, L. Nacke, K. O’Hara, and D. Dixon, “Gamification: Using game-design elements in non-gaming contexts,” in CHI ’11 Extended Abstracts, May 2011, pp. 2425–2428, doi: 10.1145/1979742.1979575.
[23] S. Shrivastava and P. Shrivastava, “Gamification in medical education,” J. Sci. Soc., vol. 50, no. 1, p. 10, 2023, doi: 10.4103/jss.jss_113_21.
[24] A. Antonaci, R. Klemke, and M. Specht, “The effects of gamification in online learning environments,” Informatics, vol. 6, no. 3, p. 32, Aug. 2019, doi: 10.3390/informatics6030032.
[25] V. But and A. Horozhankina, “Implementation of gamification elements in online learning using LMS Moodle,” APSE, no. 2, pp. 230–235, Jun. 2022, doi: 10.18372/2786-5487.1.16694.
[26] S. D. Krishnan, H. Norman, and M. M. Yunus, “English language teachers’ professional competencies enhanced through online gamified learning,” in Proc. Tenth Pan-Commonwealth Forum on Open Learning, Sep. 2022, doi: 10.56059/pcf10.9852.
[27] H. Nurhikmah et al., “Students’ response, engagement, and achievement of gamification in online learning,” in Proc. 8th Int. Conf. Education and Technology (ICET), Oct. 2022, pp. 218–221, doi: 10.1109/ICET56879.2022.9990899.
[28] S. H. Aldulaimi et al., “Critical challenges of virtual learning environments,” in Proc. ASU Int. Conf. Emerging Technologies for Sustainability and Intelligent Systems (ICETSIS), Jun. 2022, pp. 29–36, doi: 10.1109/ICETSIS55481.2022.9888945.
[29] A. Novaković, “The functionality of interactive digital platforms in online teaching,” Nastava i Vaspitanje, vol. 70, no. 1, pp. 105–125, 2021, doi: 10.5937/nasvas2101105N.
[30] N. Kumarasamy et al., “Factors affecting students’ actual use behaviour of VLEs,” Int. J. Mod. Educ. Comput. Sci., vol. 15, no. 3, pp. 1–15, Jun. 2023, doi: 10.5815/ijmecs.2023.03.01.
[31] X. Zhao and C. D. McClure, “Gather.Town,” RELC J., May 2022, doi: 10.1177/00336882221097216.
[32] J. I. Rivas-García and M. Magadán-Díaz, “Gamified learning in online teaching,” in Commun. Comput. Inf. Sci., vol. 1595, Cham, Switzerland: Springer, 2022, pp. 3–20, doi: 10.1007/978-3-031-08890-2_1.
[33] H. F. Hasan, M. Nat, and V. Z. Vanduhe, “Gamified collaborative environment in Moodle,” IEEE Access, vol. 7, pp. 89833–89844, 2019, doi: 10.1109/ACCESS.2019.2926622.
[34] S. Lüking, S. Wünsche, and M. Wilde, “The effect of basic psychological needs on flow experience,” Front. Psychol., vol. 14, p. 1256350, Sep. 2023, doi: 10.3389/fpsyg.2023.1256350.
[35] Y. An, “Designing effective gamified learning experiences,” Int. J. Technol. Educ., vol. 3, no. 2, p. 62, Feb. 2020, doi: 10.46328/ijte.v3i2.27.
[36] E. G. Saavedra, “Chilean student teachers’ willingness to learn with gamified systems,” Preprints, Sep. 2023, doi: 10.20944/preprints202309.0516.v1.
[37] F. Khaddage, C. Lattemann, and H. Crompton, “Towards a persuasive design pattern for a gamified m-learning environment,” 2020.
[38] A. Pakinee and K. Puritat, “Designing a gamified e-learning environment,” Educ. Inf. Technol., vol. 26, no. 4, pp. 4049–4067, 2021, doi: 10.1007/s10639-021-10456-9.
[39] M. A. Alkhawalde and M. A. S. Khasawneh, “Designing gamified assistive apps,” Int. J. Data Netw. Sci., vol. 8, no. 1, pp. 53–60, 2024, doi: 10.5267/j.ijdns.2023.10.018.
[40] H. M. Tzamaras et al., “Fun and games,” Proc. Int. Symp. Human Factors Ergonomics Healthcare, vol. 65, no. 1, pp. 267–271, Sep. 2021, doi: 10.1177/1071181321651108.
[41] A. Shipepe and A. Peters, “Designing an interactive career guidance learning system,” in Proc. 2nd African Conf. Human–Computer Interaction, Dec. 2018, pp. 1–4, doi: 10.1145/3283458.3283481.
[42] F. Bektas et al., “Towards a multilingual platform for gamified morphology learning,” in Proc. 7th Int. Conf. Computer Science and Engineering (UBMK), Sep. 2022, pp. 222–227, doi: 10.1109/UBMK55850.2022.9919484.
[43] Mozilla Developer Network, “JavaScript,” Accessed: Dec. 7, 2022. [Online]. Available: https://developer.mozilla.org/en-US/docs/Web/JavaScript
[44] R. N. V. Diniz-Junior et al., “Evaluating the performance of web rendering technologies,” in Proc. Latin American Computer Conf. (CLEI), Oct. 2022, pp. 1–9, doi: 10.1109/CLEI56649.2022.9959901.
[45] D. I. Samudio and T. D. LaToza, “Barriers in front-end web development,” in Proc. IEEE Symp. Visual Languages and Human-Centric Computing (VL/HCC), Sep. 2022, pp. 1–11, doi: 10.1109/VL/HCC53370.2022.9833127.
[46] R. Ollila, N. Mäkitalo, and T. Mikkonen, “Modern web frameworks,” J. Web Eng., Mar. 2022, doi: 10.13052/jwe1540-9589.21311.
[47] Meta Platforms, “React,” Accessed: Dec. 7, 2023. [Online]. Available: https://react.dev/
[48] Dapi Labs, “react-nice-avatar,” GitHub Repository, Dec. 2023. [Online]. Available: https://github.com/dapi-labs/react-nice-avatar
[49] Chakra UI, “Chakra UI,” Accessed: Dec. 7, 2023. [Online]. Available: https://chakra-ui.com
[50] “React icons,” Accessed: Dec. 7, 2023. [Online]. Available: https://react-icons.github.io/react-icons/
[51] “NestJS,” Accessed: Dec. 7, 2023. [Online]. Available: https://nestjs.com/
[52] “Laravel,” Accessed: Dec. 7, 2023. [Online]. Available: https://laravel.com/
[53] “Django,” Django Project, Accessed: Dec. 7, 2023. [Online]. Available: https://www.djangoproject.com/
[54] “Firebase,” Google, Accessed: Dec. 7, 2023. [Online]. Available: https://firebase.google.com/
[55] “Supabase,” Accessed: Dec. 7, 2023. [Online]. Available: https://supabase.com/
[56] Amazon Web Services, “AWS Amplify,” Accessed: Dec. 7, 2023. [Online]. Available: https://aws.amazon.com/amplify/
Downloads
Published
How to Cite
Issue
Section
License
Copyright (c) 2025 Ivan Dwi Fibrian, Teguh Priyo Utomo, Indra Lukmana, Zainal Muttaqin
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.
Please find the rights and licenses in Register: Jurnal Ilmiah Teknologi Sistem Informasi. By submitting the article/manuscript of the article, the author(s) agree with this policy. No specific document sign-off is required.
1. License
The non-commercial use of the article will be governed by the Creative Commons Attribution license as currently displayed on Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.
2. Author(s)' Warranties
The author warrants that the article is original, written by stated author(s), has not been published before, contains no unlawful statements, does not infringe the rights of others, is subject to copyright that is vested exclusively in the author and free of any third party rights, and that any necessary written permissions to quote from other sources have been obtained by the author(s).
3. User/Public Rights
Register's spirit is to disseminate articles published are as free as possible. Under the Creative Commons license, Register permits users to copy, distribute, display, and perform the work for non-commercial purposes only. Users will also need to attribute authors and Register on distributing works in the journal and other media of publications. Unless otherwise stated, the authors are public entities as soon as their articles got published.
4. Rights of Authors
Authors retain all their rights to the published works, such as (but not limited to) the following rights;
Copyright and other proprietary rights relating to the article, such as patent rights,
The right to use the substance of the article in own future works, including lectures and books,
The right to reproduce the article for own purposes,
The right to self-archive the article (please read out deposit policy),
The right to enter into separate, additional contractual arrangements for the non-exclusive distribution of the article's published version (e.g., post it to an institutional repository or publish it in a book), with an acknowledgment of its initial publication in this journal (Register: Jurnal Ilmiah Teknologi Sistem Informasi).
5. Co-Authorship
If the article was jointly prepared by more than one author, any authors submitting the manuscript warrants that he/she has been authorized by all co-authors to be agreed on this copyright and license notice (agreement) on their behalf, and agrees to inform his/her co-authors of the terms of this policy. Register will not be held liable for anything that may arise due to the author(s) internal dispute. Register will only communicate with the corresponding author.
6. Royalties
Being an open accessed journal and disseminating articles for free under the Creative Commons license term mentioned, author(s) aware that Register entitles the author(s) to no royalties or other fees.
7. Miscellaneous
Register will publish the article (or have it published) in the journal if the article’s editorial process is successfully completed. Register's editors may modify the article to a style of punctuation, spelling, capitalization, referencing and usage that deems appropriate. The author acknowledges that the article may be published so that it will be publicly accessible and such access will be free of charge for the readers as mentioned in point 3.
