Progressive Web Application for Storytelling Therapy Support

Storytelling therapy with children is a therapeutic approach that harnesses the power of narratives to facilitate emotional expression, promote self-discovery, and foster resilience in young minds (Westerveld and Gillon, 2008). Through the art of storytelling, children can explore and communicate their thoughts, feelings, and experiences in a safe and imaginative space. This therapeutic method not only helps children make sense of challenging situations but also enhances their cognitive and emotional development (Ochs et al., 1992) (Isbell et al., 2004) (Skinner and Zimmer‐Gembeck, 2007). By engaging in the creation and sharing of stories, children gain valuable insights into their own strengths and coping mechanisms. This approach proves to be especially beneficial for children facing various emotional and behavioural challenges, as it provides them with a creative outlet for self-expression, encourages problem-solving skills, and ultimately contributes to their overall mental well-being.

This article presents an innovative application that seeks to merge therapy through popular stories and myths with the emerging technologies provided by the irruption of Progressive Web Applications (WebDev, 2024) (PWA). The proposed system allows users to create stories from a set of characters and events, according to their own criteria. Once created, the story is summarized and the user is guided by a therapist in the process of reflection and drawing conclusions. This approach assists one of the techniques used in a local association “Escuela de Cuentoterapia de Albacete”, integrating it into a solution that leverages the features of PWAs. Our proposal represents a significant step in combining traditional therapies with emerging digital technologies, providing a valuable tool for the association, which is dedicated to conducting therapies, mainly with children, using popular stories and myths.

The application has been designed following the guidelines indicated by experts from the association and the final prototype has been evaluated with a group of participants, some of them experts in Storytelling Therapy.

The article is organized as follows. The background of this work is divided into two sections. Section 2 presents basic concepts about Storytelling Therapy and Section 3 is devoted to explaining the Progressive Web Application technology. Section 4 describes the software architecture designed for this prototype. Section 5 describes the CuentoterApp application, including the main functionalities. The usability evaluation is presented in section 6. Finally, section 7 summarizes the conclusions and future work.

Vladimir Yákovlevich Propp, Russian anthropologist and linguist; and Joseph John Campbell, American mythologist, writer and professor, carried out an analysis of the stories and myths (respectively) from the entire history of humanity and many different cultures (Propp, 1998) (Campbell, 2020). After this analysis, they concluded that there is a set of fixed patterns that all of them meet so that we have a set of ”actants” (characters) and a set of ”functions”, which are the different events that can happen in the story, as:

• •

  “Estrangement from the family”: the hero of the story separates from his family for some reason.

• •

  “Deception”: the antagonist manages to deceive the protagonist for his benefit.

From these functions, a pattern of similarity emerges across 31 distinct functions. While not all functions are present in every story or myth, a subset invariably exists and maintains a consistent order within the set of 31.

Starting from these concepts, Giovanni “Gianni” Rodari, an Italian educational writer and journalist (specialized in children’s and youth literature), devised a card game based on the creation of stories using the concepts of functions and actants (Rodari, 2002).

“Storytherapy” is based on doing different dynamics and workshops related to stories, each one with different characteristics and objectives, but with therapeutic purposes (Calderón, 2021). For this research, the aim is to emulate and work on one in particular.

”Storytelling therapy” has been used as a resource aimed at children between 0 and 6 years old in cases such as hospitalization due to illness to alleviate their pedagogical maladjustment (Cabrera Muñoz et al., 2022). An example where ”storytelling therapy” has been used is in the study carried out by Mohammed et al., this study consisted of the treatment of cases of anxiety and depression in 137 patients between 9 and 13 years old who had cancer, giving results that in the context where the study was carried out, it was a success to use storytelling therapy, although it should be mentioned that they also used writing therapy (Mohammed et al., 2022).

This article, mainly applicable to children aged 0-6 and 9-13, emphasizes the method for those aged 6+. It uses Rodari’s game, where participants choose characters and craft narratives using cards. The therapist aids in this process. This aligns with Mohammed et al.’s findings on the therapeutic benefits of story writing, which builds on prior research showing anxiety reduction through creative practices like drawing and writing (Altay et al., 2017).

The objective of the dynamic is not to give a moral or explanation to the child, but rather to assist him in reflecting on the ideas that he has chosen in these different situations; but always with the focus of drawing his reflections.

In the context of this research study, it is pertinent to acknowledge the representation of Storytherapy in Spain, embodied by the ‘Asociación Iberoamericana de Cuentoterapia’. This association, established in 2010, is dedicated to the promotion of Storytelling and its pedagogical principles, in addition to accrediting teachers and institutions in the field of storytelling therapy.

We are privileged to have established a connection with an expert affiliated with the ‘Escuela de Cuentoterapia’ in Albacete. This association is also engaged in conducting workshops centered around the dynamics of Storytelling Therapy. The expert in question has been instrumental in shaping the proposal and has provided invaluable information that forms the foundation of this study.

In this context, attention is also given to its digital representation through various applications that embody the principles discussed, providing insights into its potential in the digital realm. Such is the example of Storyjumper, a web application, facilitates story creation and creativity, offering publishing capabilities through a user-generated library. Central to our discussion is its story development editor, an interactive tool supporting image, text, and sound integration on each page (BAGUA SHUGULI, [n. d.]) (Fitriyani et al., 2023). It features a template character creator and allows for both application-provided and personal images. Finished works are downloadable or re-editable.

Another group of researchers, Garzotto et al., devised a comparable setting known as FaTe2, an edutainment web based environment for children that incorporates storytelling, hypertext, games, collaborative learning, and social interaction (Garzotto and Forfori, 2006).

Carter et al.’s findings indicate that using these templates for character creation shows no age-related style preferences (Carter et al., 2016). However, a limitation is the incompatibility with Android devices, restricting use to iPads and computers. Furthermore, the editor’s design and layout are not optimized for smaller screens, such as smartphones.

BookTraps (Inc., [n. d.]) is a children’s app for creating mini-books primarily through drawings, available only on Android and iOS, not as a browser application. Its user interface is specifically tailored for mobile devices. PicaBook (Fortune, [n. d.]) also a mobile-only app, offers a broader story creation platform, supporting text, images, stickers, sound, and a publishing library in addition to drawing.

This review underscores the absence of an application comparable to our proposed one, especially one leveraging PWA (Progressive Web App) technology.

Traditionally, mobile apps were written in Android and iOS native languages, requiring more effort but fully utilizing device capabilities. Mobile web development, while similar to regular web page creation, lacked the full OS access of native apps.

Over the years, different approaches have been addressed to try to unify the development effort for all platforms, but without losing the capabilities of each device. For example: (a) Electron.js: an open-source framework for creating desktop applications with code in JavaScript, HTML and CSS; (b) Apache Cordova or Capacitor: frameworks that compile code in JavaScript, HTML and CSS, and wrap it in native containers for each platform, so that it is written with those languages and generates the corresponding native application; and (c) Progressive Web App: a philosophy and set of technologies to unify native and web.

PWA, are a type of application that aims to be a middle ground between web and native apps. Native apps have the advantage of taking better advantage of the device’s features, making better use of the operating system, being able to work with them offline (Albertos-Marco et al., 2017) or being able to access features such as the USB port or a camera. PWA also made possible the unification for the end-user app experience, including, but not limited to, installable and native-looking web apps (Biørn-Hansen et al., 2017), which make them an affordable alternative to a native application that may be considered (Ng et al., 2022). Also, as mobile devices are limited concerning battery capacity, developers should keep the energy footprint of a mobile app as low as possible. As Huber et. al. pointed out (Huber et al., 2022), PWAs can be considered a viable alternative in terms of energy efficiency to other mobile cross-platform development approaches.

A PWA’s progressiveness is determined by its fulfilled characteristics: Detectability, Installability, Linkability, Progressive Enhancement Support, Network Independence, Responsive Design, and Security. Next, essential features like Service Worker, Installability, and testing tools like Lighthouse are explained.

Service Workers

To support the features of being able to work offline or push notifications, service workers are used. These are virtual proxies that act as an intermediary between the browser and the network, intercepting requests and deciding whether to handle them from some local algorithm or from the network (WebDev, [n. d.]) (MDN, 2023b).

They operate on a different thread than the program and must be registered first, and they only act on the resources that you specify them to act on. In this way the program continues to run or at least part of its functions, when there is no internet connection or outages occur. Not only do they allow offline, but also features such as push notifications or perform very expensive algorithms in a different thread so as not to compromise the normal execution thread. However, being so powerful, they have a disadvantage and that is that their security cannot be compromised, which is why they only work in a secure connection context such as HTTPS (MDN, 2023b).

Installation capability

PWAs possess the capability to install themselves, a feature that significantly enhances the user experience. For the user, the web application ceases to be a tab in the browser and becomes a normal application on the home screen of the mobile as he is accustomed to. In order to use this feature it will be necessary to have service workers and a secure connection as already explained, and it is also necessary to elaborate the Web Manifest. The Web Manifest is a file in ”.json” format that lists all the information of the application. Information such as the title, icons of different sizes, background colour for the loading and startup screens… (MDN, 2023a).

Upon meeting all requirements and with browser support, an installation option for the application appears when the browser configuration button is clicked. Post-installation, the website presents as a standard app without a URL.

Lighthouse

”Lighthouse” is a tool of the Chrome development tools. This can be run from the browser on any website and serves to improve the quality of web applications. The tool is responsible for passing a series of tests and generating a report with what meets and fails on the web and how to improve it. Among these tests is one that measures what percentage of the application is progressive and what are the features with which it complies. It also justifies why these tests should be there and the advantages they provide.

It was decided to implement a solution with a Single-Page Application (SPA) model, but with the particularities of PWA, which has been previously used in mobile and e-learning scenarios (Albertos Marco et al., 2015). A SPA application is defined by having the control logic on the client side and communicating with the server at the beginning so that it loads in part and from the client it is processed and displayed as needed.

You can also have asynchronous communications from time to time to retrieve some data in JSON format and update reactively. This approach is advantageous since it provides a better user experience since it does not have to be reloaded with every action and also loads faster.

In the case of PWA, it works in a very similar way, except that in this case, we will also have a service worker (which acts as a virtual proxy) in the middle, which intercepts and manages the client’s requests, so that it allows features such as offline use or installation. The offline case allows it since it has a cache and internal browser databases. A diagram of the structure to be used in the proposal is shown in Figure 1.

Generally, the client will communicate with the server as a last option, before checking if the necessary information is in local. To carry out this structure we will use Angular (Google, [n. d.]), a framework and development platform for the creation of SPAs and Ionic, a software development kit for the creation of hybrid applications (Ionic, [n. d.]), which has libraries to work with PWA. Next, it will be shown which PWA features are interesting for the application.

The next step is to analyze and select the desirable features of PWA to assist in Storytelling Therapy.

Initially the use of the application will be in workshops or therapy dynamics and will be carried out in spaces such as schools, libraries or association halls, not knowing the available material or internet connection in these places. Therefore, each PWA characteristic should be analyzed to decide whether or not is included in our prototype:

• •

  Detectable: this is a desirable feature as it facilitates access to the application and aids its dissemination, but it is not entirely necessary operation.

• •

  Installable: this feature is absolutely necessary as it allows us to leverage all the features of PWA, enhances the user experience, and simplifies its use for individuals such as children.

• •

  Linkable: this feature is also completely necessary so that in the context of a workshop the system can be easily shared.

• •

  Progressive enhancement support: mandatory feature as we do not know what devices are available in these dynamics and workshops. Therefore, it must work on the largest number of available devices, regardless of their capabilities.

• •

  Re-engageable: this feature is not desirable as the context of use will typically be in the workshop. Consequently, there is no need to be notified to re-enter the application outside this context. However, if the project’s needs scale, it could become interesting.

• •

  Network independent: this feature is also completely mandatory as we cannot guarantee that there will be a Wi-Fi connection or even coverage in the spaces used. Therefore, the functionalities, or at least part of them, must work in a context without an internet connection.

• •

  ”Responsive” design: like progressive enhancement support this is also necessary since it is necessary that the system works regardless of the device resolution. However, it is arguable that it currently makes no sense to create a web application without a responsive design, as most of the devices used today are mobile.

• •

  Secure: with what is currently proposed, it does not seem a desirable feature since sensitive information will not be handled. However, if the project’s needs scale, it may become necessary.

After this list of desirable features, we can argue that the use of PWA is very convenient for a project with these characteristics, besides the features defined as desirable will be used as a measure of the quality of the project and as a requirement that it is ”done”.

The final development, as already mentioned in the previous chapter, consists of a SPA solution together with the explained particularities offered by PWA, so that an initial request is made to the server through the ”service worker” and from there either the local storage is consulted or requests are made to the server, depending on whether the information exists or not (locally). A more visual example of this situation can be seen in the activity diagram in Figure 2.

In this case, we can check how the internal logic works depending on whether the data is available or not for the case of choosing the initial situation for the story. Thus, if the data is available and there is no internet connection, the user should not notice it and everything should work normally. In the example above (see Figure 2) a specific component is shown, but for the rest it works in a very similar way.

Local persistence is developed using ”IndexedDb”. This is a NoSQL database hosted in the browser and whose storage depends on the capacity of the device as well as the browser.

In this development the logic part has been developed in the client, this is possible thanks to using the ”Angular 15” framework, which allows a component-oriented development, where in these components the view parts and the logic that manages them can be hosted. In addition, another framework that works on Angular is used for the view, this is ”Ionic 6”, which provides components that facilitate the development of a more compatible interface for mobile devices.

Finally, a library, ”Dexie.js” (Fahlander, [n. d.]), is used to facilitate the use of IndexedDb and the API ”Web Speech API” (Mozilla, 2023), which provides an interface to recognize and translate from voice to text the microphone on the web. The deployment is done through ”Firebase”, a platform for free web hosting that belongs to Google, thanks to this you get hosting with HTTPS protocol, in the deployment diagram in figure 3 can be seen in a more representative way.

It should be noted that the web browser can be on different platforms such as Windows, Mac OS, Android or iOS.

CuentoterApp is a solution that allows the creation of stories imitating the procedure of one of the therapies of the ’Escuela de Cuentoterapia’ of Albacete, from an initial situation and some chosen characters, you can go writing the story fragment by fragment, where each fragment has a thematic framework.

Once the story is finished, the user has the option of downloading it in PDF format or saving it in a ”Library”, a local storage of all the stories written by the author.

The solution is intended to support this therapy process so that it replaces the traditional way in which the story is recorded. It is intended to strengthen the user’s creativity, highlight the importance of stories, show the virtues of a PWA approach and take advantage of its benefits.

In this section we explain how the system works from the user’s point of view, explaining it step by step with illustrative images.

The first thing you see when entering the address mentioned in the previous section is a welcome page (Figure 4(a)). At this point there are two possibilities, install the application or use it directly from the browser. Suppose it is the case of installing it. In that case, either a browser message may appear indicating if we want to add the web to the home page (Figure 4(b)) or it may not appear. We must go directly to the browser options and if it is compatible, an option to ”install the application” should appear here (Figure 4(c)).

After this to follow the basic flow of the system (create story), it will be necessary to click on the ”NEXT” button, this will lead to a series of pages with a welcome and explanatory text. It is necessary to click the button until the last one is reached (Figure 5(a)).

If you click on the ”PREVIOUS” button, you will go back in these pages and to start the process of creating the story, click on the ”START” button. When you click on it, you will go to the page for choosing the initial situation (Figure 5(b)), here several cards appear with a photo, title and description, and by clicking on them you can choose the one you want as the context for the story.

Next, the character selection screen will appear (Figure 5(c)), click on all the character names you want to add (the selected ones are marked in green), and then press the ”CONTINUE” button.

Below is the page where the story is written based on the functions (Figure 6(a)). Each of these functions is represented by a card with its title and a brief explanation of what it represents. Two buttons appear on the card: ”WRITE” and ”REJECT”. If you choose to reject, the current function is simply skipped and the process moves on to the next one. However, if accepted, the card undergoes a transformation, revealing a text box for writing and a new set of buttons as shown in figure 6(b). The ‘Microphone’ button activates voice recognition, recording everything spoken aloud into the text box. Pressing it again turns off the voice recognition. The ‘Trash’ button deletes the text box. The ‘OK’ button saves the content written for that function and proceeds to the next one. The ‘Reject’ button reverts to the view displaying the description of the function (Figure 6(a)).

When you have finished with all the cards, a screen appears where you are asked to enter the title for the story (see 6(c)). In addition, there is a ”View result” button that takes us to the next step.

Upon clicking this button, you are directed to the result page of the story, depicted in Figure 7(a). This page allows you to read the written content and provides you with several options through a set of buttons. The ‘Exit’ button takes you back to the home screen, shown in Figure 4(a). The ‘Download PDF’ button enables an automatic download of a pdf file containing the story’s content. Lastly, the ‘Save in Library’ button not only saves the story but also redirects you to the ‘Library’ page.

In the Library page (Figure 7(b)) we can see a list of the stories saved in the local storage, they can be deleted by clicking on the trash can button and you can click on the title to open a page (Figure 7(c)) where you can read the story and where we have the same option above to download pdf.

At any given moment, you can press the button located at the top left of the application header to reveal a drop-down menu with various options. The ‘Home’ option navigates you to the home page, as shown in figure 4(a). The ‘Library’ option leads you to the library page, depicted in figure 7(b). The ‘Instructions’ option directs you to the instructions page.

The evaluation of the system is carried out following the ISO/IEC 25000 (ISO4, [n. d.]) standards, this groups a set of ISO standards for the evaluation and quality requirements of the software and system. Specifically, those related to performing a quality assessment in the use of the system: a) The quality in-use model defined in ISO/IEC 25010 (ISO3, [n. d.]) is used to obtain the characteristics and subcharacteristics to be measured. b) The metrics defined for the previous characteristics in ISO/IEC 25022 (ISO2, [n. d.]) are used. c) The Common Industrial Format (CIF) included in ISO/IEC 25062 (ISO1, [n. d.]) is used for the presentation of results.

The structure of this section will correspond to the different sections defined by the ISO/IEC 25062 ICF.

This article presents the development of a Progressive Web Application for the support of Storytelling Therapy that we have called CuentoterApp, which allows the creation of personalized stories with assistance and their storage.

Throughout the article we have evaluated and studied the applicability of PWA to a real project, collecting which features can be really useful, which brings a lot of knowledge about progressive web applications, their advantages and disadvantages and how to implement them. This knowledge was used in developing the PWA CuentoterApp.

The article includes a validation with real end users who have provided numerous ideas for the development of future improvements. The evaluation provides relevant information on the usability of the CuentoterApp application.

Regarding the PWA technology used, an application is not a PWA in terms of ”yes” or ”no” but is progressive in a range, depending on the number of PWA characteristics it fulfils. These features have been defined and it has been discussed which ones were desirable.

Of those that were explained as desirable, the ability to be installed and the ability to be linkable have been met. In the case of the feature of being network independent, it is fulfilled if at least one first time the system is traversed connected to the internet, this is so due to the nature of the PWA is not limited only to the objectives of this application.

The responsive design generally adapts to all screen types, but it is primarily designed for mobile devices.

As for future work, the following improvements are noted: improving the creation of the story, working with a database as a service (cloud services); having an online library where to leave the stories; and integrating Fooocus an open-source artificial intelligence, capable of generating images with a multitude of styles from inputs, thus facilitating the generation of stories (lllyasviel et al., 2024).