<?xml version="1.0" encoding="UTF-8"?><?xml-model type="application/xml-dtd" href="http://jats.nlm.nih.gov/publishing/1.1d3/JATS-journalpublishing1.dtd"?>
<!DOCTYPE article PUBLIC "-//NLM//DTD JATS (Z39.96) Journal Publishing DTD v1.1d3 20150301//EN" "http://jats.nlm.nih.gov/publishing/1.1d3/JATS-journalpublishing1.dtd">
<article xmlns:ali="http://www.niso.org/schemas/ali/1.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:mml="http://www.w3.org/1998/Math/MathML" dtd-version="1.1d3" specific-use="Marcalyc 1.2" article-type="research-article" xml:lang="es">
<front>
<journal-meta>
<journal-id journal-id-type="redalyc">3442</journal-id>
<journal-title-group>
<journal-title specific-use="original" xml:lang="es">TecnoLógicas</journal-title>
</journal-title-group>
<issn pub-type="ppub">0123-7799</issn>
<issn pub-type="epub">2256-5337</issn>
<publisher>
<publisher-name>Instituto Tecnológico Metropolitano</publisher-name>
<publisher-loc>
<country>Colombia</country>
<email>tecnologicas@itm.edu.co</email>
</publisher-loc>
</publisher>
</journal-meta>
<article-meta>
<article-id pub-id-type="art-access-id" specific-use="redalyc">344265925016</article-id>
<article-id pub-id-type="doi">https://doi.org/10.22430/22565337.1892</article-id>
<article-categories>
<subj-group subj-group-type="heading">
<subject>Artículos de investigación</subject>
</subj-group>
</article-categories>
<title-group>
<article-title xml:lang="es">Análisis comparativo para medir la eficiencia de desempeño entre una aplicación web tradicional y una aplicación web progresiva</article-title>
<trans-title-group>
<trans-title xml:lang="en">Comparative Analysis of the Performance Efficiency of a Traditional vs a Progressive Web Application</trans-title>
</trans-title-group>
</title-group>
<contrib-group>
<contrib contrib-type="author" corresp="no">
<contrib-id contrib-id-type="orcid">https://orcid.org/0000-0002-9676-8449</contrib-id>
<name name-style="western">
<surname>Llamuca-Quinaloa</surname>
<given-names>Jhonatan</given-names>
</name>
<xref ref-type="aff" rid="aff1"/>
<email>jhonatan.llamuca5258@utc.edu.ec</email>
</contrib>
<contrib contrib-type="author" corresp="no">
<contrib-id contrib-id-type="orcid">https://orcid.org/0000-0002-1577-7061</contrib-id>
<name name-style="western">
<surname>Vera-Vincent</surname>
<given-names>Yasmani</given-names>
</name>
<xref ref-type="aff" rid="aff2"/>
<email>yasmani.vera1583@utc.edu.ec</email>
</contrib>
<contrib contrib-type="author" corresp="no">
<contrib-id contrib-id-type="orcid">https://orcid.org/0000-0002-5338-7814</contrib-id>
<name name-style="western">
<surname>Tapia-Cerda</surname>
<given-names>Verónica</given-names>
</name>
<xref ref-type="aff" rid="aff3"/>
<email>veronica.tapia@utc.edu.ec</email>
</contrib>
</contrib-group>
<aff id="aff1">
<institution content-type="original">Universidad Técnica de Cotopaxi, Latacunga-Ecuador, jhonatan.llamuca5258@utc.edu.ec</institution>
<institution content-type="orgname">Universidad Técnica de Cotopaxi</institution>
<country country="EC">Ecuador</country>
</aff>
<aff id="aff2">
<institution content-type="original">Universidad Técnica de Cotopaxi, Latacunga-Ecuador, yasmani.vera1583@utc.edu.ec</institution>
<institution content-type="orgname">Universidad Técnica de Cotopaxi</institution>
<country country="EC">Ecuador</country>
</aff>
<aff id="aff3">
<institution content-type="original">Universidad Técnica de Cotopaxi, Latacunga-Ecuador, veronica.tapia@utc.edu.ec</institution>
<institution content-type="orgname">Universidad Técnica de Cotopaxi</institution>
<country country="EC">Ecuador</country>
</aff>
<pub-date pub-type="epub-ppub">
<season>Mayo-Septiembre</season>
<year>2021</year>
</pub-date>
<volume>24</volume>
<elocation-id>e1892</elocation-id>
<issue>51</issue>
<history>
<date date-type="received" publication-format="dd mes yyyy">
<day>26</day>
<month>02</month>
<year>2021</year>
</date>
<date date-type="accepted" publication-format="dd mes yyyy">
<day>21</day>
<month>06</month>
<year>2021</year>
</date>
<date date-type="pub" publication-format="dd mes yyyy">
<day>12</day>
<month>07</month>
<year>2021</year>
</date>
</history>
<permissions>
<copyright-year>2019</copyright-year>
<copyright-holder>Instituto Tecnológico Metropolitano</copyright-holder>
<ali:free_to_read/>
<license xlink:href="https://creativecommons.org/licenses/by-nc-sa/4.0/">
<ali:license_ref>https://creativecommons.org/licenses/by-nc-sa/4.0/</ali:license_ref>
<license-p>Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-CompartirIgual 4.0 Internacional.</license-p>
</license>
</permissions>
<abstract xml:lang="es">
<title>Resumen</title>
<p>El desarrollo de esta investigación tuvo por objetivo comparar dos tipos de tecnología de aplicaciones web: aplicación web tradicional y aplicación web progresiva, para determinar el tipo de tecnología que tiene un mejor desempeño con respecto al atributo de calidad de rendimiento. Para este fin, primero se desarrolló una aplicación web tradicional, para luego configurarla y convertirla en una aplicación web progresiva; de esta manera se obtuvieron dos tipos de aplicaciones que permitieron medir su cualidad de rendimiento. El análisis comparativo utiliza el estándar ISO/IEC 25010 para la elección de la característica de eficiencia de desempeño (rendimiento), el estándar ISO/IEC 25040, establece un proceso de cinco actividades para evaluar cada aplicación, y el estándar ISO/IEC 25023, define las características de rendimiento con sus respectivas métricas y fórmulas. El estudio también mostró el comportamiento que tienen las aplicaciones en navegadores compatibles con trabajadores de servicio: Chrome, Firefox, Opera y Edge. Las herramientas utilizadas para medir las métricas de rendimiento fueron: page load time, load time, el administrador de tareas y las herramientas de desarrollo, todas estas integradas en los navegadores. Los resultados mostraron discrepancias en el comportamiento de las aplicaciones, pero fueron similares en métricas como: comportamiento en el tiempo y la capacidad del software. Con respecto a las métricas de utilización de recursos, la aplicación web progresiva presentó un elevado consumo. Sin embargo, esta aplicación brinda una mejor experiencia al usuario, pero el almacenamiento en caché y el soporte de los navegadores puede ser una limitante para su correcto funcionamiento.</p>
</abstract>
<trans-abstract xml:lang="en">
<title>Abstract</title>
<p>This study compares two types of web application (traditional and progressive) to determine the kind of technology that achieves a better performance quality. For that purpose, a traditional web application was developed, then configured and converted into a progressive web application. As a result, two types of application were obtained in order to measure their performance quality. This comparative analysis used the ISO/IEC 25010 standard to select the performance efficiency characteristic. In addition, it implemented the ISO/IEC 25040 standard, which establishes a process of five activities to evaluate each application, and the ISO/IEC 25023 standard, which defines performance characteristics with their respective metrics and formulas. This paper also examines the behavior of the applications in browsers compatible with service workers: Chrome, Firefox, Opera, and Edge. Several tools were used to measure the performance metrics: page load time, load time, the task manager, and development tools (all of them integrated into the browsers). The results show discrepancies in the behavior of the applications, although they presented similar metrics in terms of behavior over time and software capacity. Regarding resource utilization metrics, the progressive web application presented a higher consumption. This type of application provides a better user experience but caching and browser support can be limitations for its correct operation.</p>
</trans-abstract>
<kwd-group xml:lang="es">
<title>Palabras clave</title>
<kwd>Aplicación web progresiva</kwd>
<kwd>aplicación web tradicional</kwd>
<kwd>análisis comparativo</kwd>
<kwd>trabajador de servicio</kwd>
<kwd>almacenamiento en caché</kwd>
</kwd-group>
<kwd-group xml:lang="en">
<title>Keywords</title>
<kwd>Progressive web application</kwd>
<kwd>traditional web application</kwd>
<kwd>comparative analysis</kwd>
<kwd>service worker</kwd>
<kwd>cache storage</kwd>
</kwd-group>
<counts>
<fig-count count="20"/>
<table-count count="9"/>
<equation-count count="0"/>
<ref-count count="27"/>
</counts>
<custom-meta-group>
<custom-meta>
<meta-name>Cómo citar / How to cite</meta-name>
<meta-value>J. Llamuca-Quinaloa; Y. Vera-Vincent; V. Tapia-Cerda, “Análisis comparativo para medir la eficiencia de desempeño entre una aplicación web tradicional y una aplicación web progresiva”,<italic> TecnoLógicas</italic>, vol. 24, nro. 51, e1892, 2021. <ext-link ext-link-type="uri" xlink:href="https://doi.org/10.22430/22565337.1892">https://doi.org/10.22430/22565337.1892</ext-link>
</meta-value>
</custom-meta>
</custom-meta-group>
</article-meta>
</front>
<body>
<sec>
<title>
<bold>1. INTRODUCCIÓN</bold>
</title>
<p>Entre 1990 y 1995, los sitios web eran un conjunto de archivos de hipertexto vinculados con contenido de texto y gráfico limitado [<xref ref-type="bibr" rid="redalyc_344265925016_ref1">1</xref>]. Internet es una de las tecnologías recientes que más rápido se está desarrollando [<xref ref-type="bibr" rid="redalyc_344265925016_ref2">2</xref>]. Con su crecimiento, los sitios web se han expandido en diferentes áreas, generando soluciones efectivas ante diferentes problemáticas.</p>
<p>Las páginas web, a lo largo del tiempo han evolucionado, facilitando a las personas realizar diversas tareas cruciales como vender y comprar bienes, realizar tareas breves, controlar casas inteligentes y administrar cuentas bancarias [<xref ref-type="bibr" rid="redalyc_344265925016_ref3">3</xref>]. Para 2020 había más de 1800 millones de sitios web en internet [<xref ref-type="bibr" rid="redalyc_344265925016_ref4">4</xref>]. Esta evolución también se ha asociado a la aparición de nuevos lenguajes de programación, herramientas y metodologías para el desarrollo de aplicaciones web [<xref ref-type="bibr" rid="redalyc_344265925016_ref2">2</xref>]. La evolución de la web es un claro ejemplo de cómo la sociedad ha progresado con el uso de la tecnología, pasando de visualizar información estática a interactuar con sitios web dinámicos.</p>
<p>Una aplicación web (web-based application) es un tipo especial de aplicación cliente/servidor [<xref ref-type="bibr" rid="redalyc_344265925016_ref5">5</xref>]. Funcionan bajo un navegador con conexión a Internet, ya que deben comunicarse con un servidor para cumplir con sus funcionalidades. Las aplicaciones web utilizan tres tecnologías básicas para su desarrollo: HTML, CSS y JavaScript.</p>
<p>La evolución constante de nuevas tecnologías en las páginas web ha ido creando diversas formas más sencillas, eficientes y seguras de navegar, brindando una mejor experiencia para el usuario. Recientemente ha surgido una nueva alternativa para el desarrollo de aplicaciones web móviles denominada aplicaciones web progresivas (PWA, por sus siglas en inglés) [<xref ref-type="bibr" rid="redalyc_344265925016_ref6">6</xref>].</p>
<p>Las PWA son aplicaciones web desarrolladas con una serie de tecnologías específicas y patrones estándar que les permiten aprovechar las funciones de las aplicaciones nativas y web [<xref ref-type="bibr" rid="redalyc_344265925016_ref7">7</xref>]. Esta tecnología funciona del lado del cliente y utiliza la interfaz de programación de aplicaciones (API, por sus siglas en inglés) para conectarse a diferentes recursos de los dispositivos. Utilizan el protocolo HTTPS y no dependen de la conectividad a Internet, ya que el navegador ejecuta los <italic>service workers</italic> en segundo plano, permitiendo que las aplicaciones funcionen en redes de baja calidad o incluso sin conectividad [<xref ref-type="bibr" rid="redalyc_344265925016_ref8">8</xref>]. Es necesario tener una conexión a Internet la primera vez que se instala la aplicación y haber navegado previamente en la misma para que se puedan registrar los <italic>service workers</italic>.</p>
<p>Para evaluar un producto software es necesario seguir un modelo de evaluación que permita medir su nivel de calidad. La ISO/IEC 25040 es un modelo de referencia para la evaluación [<xref ref-type="bibr" rid="redalyc_344265925016_ref9">9</xref>] que permitió evaluar las dos tecnologías mediante un proceso de cinco actividades. Por su parte, la ISO/IEC 25023 permite medir cuantitativamente la calidad de un <italic>software</italic> [<xref ref-type="bibr" rid="redalyc_344265925016_ref10">10</xref>] a través de un conjunto de métricas que se basan en la ISO/IEC 25010 [<xref ref-type="bibr" rid="redalyc_344265925016_ref11">11</xref>]. Las métricas utilizadas forman parte de la característica de calidad del rendimiento, las cuales son: comportamiento en el tiempo, utilización de recursos y capacidad [<xref ref-type="bibr" rid="redalyc_344265925016_ref12">12</xref>].</p>
<p>La evaluación también se ejecuta en navegadores compatibles con trabajadores de servicio: Chrome, Firefox, Opera y Edge. Es importante tener en cuenta diferentes escenarios para realizar pruebas de rendimiento, ya que es probable que los usuarios interactúen de forma diferente con sitios web y aplicaciones en su vida cotidiana [<xref ref-type="bibr" rid="redalyc_344265925016_ref13">13</xref>]. Este tipo de estudio comparativo permite obtener resultados que muestran las diferencias en cómo un usuario utiliza una aplicación y cómo esta le responde [<xref ref-type="bibr" rid="redalyc_344265925016_ref13">13</xref>]; además, estos resultados muestran la importancia que tiene el uso adecuado del almacenamiento en caché y la correcta configuración de los trabajadores de servicio para que la PWA pueda tener un rendimiento eficiente.</p>
<p>Para la evaluación de las métricas de rendimiento se utilizaron herramientas integradas en cada navegador, estas herramientas son: page load time en Chrome, Opera y Edge, y load time en Firefox utilizados para medir las métricas de comportamiento en el tiempo; el administrador de tareas para verificar la utilización de recursos de cada aplicación; y las herramientas de desarrollo para verificar el almacenamiento en caché de la PWA y el comportamiento que tienen las aplicaciones a través de la red.</p>
<p>El presente estudio evalúa dos versiones de una aplicación web para <italic>delivery</italic>: una aplicación web tradicional y una aplicación web progresiva. Se utilizó el modelo de desarrollo iterativo-incremental para agilizar los procesos de desarrollo y obtener las dos versiones propuestas. Además, se muestran las arquitecturas de estas aplicaciones, la configuración de la PWA, el proceso utilizado por los trabajadores de servicio para almacenar y responder con información almacenada en la caché y los navegadores, y sistemas operativos compatibles con esta tecnología.</p>
</sec>
<sec>
<title>
<bold>2. METODOLOGÍA</bold>
</title>
<p>El proceso metodológico se inicia con la consulta de fuentes bibliográficas que ayudaron a definir un modelo de evaluación para productos de <italic>software </italic>y establecer el rendimiento como único atributo de calidad a evaluar. Además, ayudó a definir las métricas de rendimiento con sus respectivas fórmulas y las herramientas informáticas de evaluación que permitieron generar los resultados comparativos.</p>
<p>Este estudio permite verificar el desempeño que tienen las aplicaciones con base en pruebas que monitorean su funcionamiento y dan a conocer las similitudes, diferencias o discrepancias que existen al compararlas. Una de las importancias que tiene el estudio es que obtiene resultados relevantes que permiten a otros investigadores usarlos para sus respectivas investigaciones.</p>
<p>En los estudios, [<xref ref-type="bibr" rid="redalyc_344265925016_ref14">14</xref>]-[<xref ref-type="bibr" rid="redalyc_344265925016_ref16">16</xref>] realizaron un análisis de las características de las PWA para unificar el desarrollo de las aplicaciones nativas, híbridas, móviles y web, sus análisis se enfocaron en la portabilidad, usabilidad y accesibilidad, sin embargo, no tomaron muy en cuenta el rendimiento; por tal motivo, este estudio comparativo se centra únicamente en el rendimiento de aplicaciones web para demostrar el desempeño que tienen las aplicaciones bajo estas métricas.</p>
<p>Este análisis comparativo utiliza la familia de normas ISO/IEC 25000 para establecer la característica de calidad a evaluar en cada aplicación y el modelo de referencia para la evaluación; su finalidad es garantizar la calidad de un producto <italic>software</italic> con base en un marco de trabajo común [<xref ref-type="bibr" rid="redalyc_344265925016_ref17">17</xref>].</p>
<p>El estándar ISO/IEC 25040 establece un proceso de cinco actividades [<xref ref-type="bibr" rid="redalyc_344265925016_ref9">9</xref>] que fueron tomadas en cuenta para establecer las métricas de evaluación, describir el proceso de configuración de la PWA, identificar el comportamiento de la aplicación con el uso de herramientas de <italic>software</italic> y obtener resultados que contribuyan a la toma de decisiones de desarrolladores web.</p>
<sec>
<title>
<bold>2.1 Métricas para evaluar el rendimiento de aplicaciones</bold>
</title>
<p>El análisis comparativo utiliza el estándar ISO/IEC 25010 que describe ocho características para evaluar el <italic>software</italic> [<xref ref-type="bibr" rid="redalyc_344265925016_ref11">11</xref>], para lo cual se utilizó solo una característica de calidad: eficiencia de desempeño (rendimiento). Los motivos se presentan a continuación:</p>
<p>Una aplicación web tiene diferentes atributos y métricas que debe seguir para ser considerado un producto de calidad, por lo que no es posible abarcar todos los atributos para un sistema [<xref ref-type="bibr" rid="redalyc_344265925016_ref18">18</xref>] en una sola evaluación.</p>
<p>En [<xref ref-type="bibr" rid="redalyc_344265925016_ref18">18</xref>] se menciona que, según una encuesta elaborada por Capgemini, Sogeti y Hewlett Packard (HP), el rendimiento es uno de los atributos de calidad más importantes, y este debe ser considerado en una evaluación de software, ya que permite medir la eficiencia que tiene al interactuar con los usuarios. En la <xref ref-type="table" rid="gt1">Tabla 1</xref> se observan las subcaracterísticas de rendimiento y sus respectivas métricas.</p>
<p>
<table-wrap id="gt1">
<label>Tabla 1.</label>
<caption>
<title>Subcaracterísticas de rendimiento con sus respectivas métricas.</title>
</caption>
<alt-text>Tabla 1.  Subcaracterísticas de rendimiento con sus respectivas métricas.</alt-text>
<alternatives>
<graphic xlink:href="344265925016_gt2.png" position="anchor" orientation="portrait"/>
<table style="border-collapse:collapse;border:none;  " id="gt2-526564616c7963">
<tbody>
<tr style="   height:13.85pt">
<td style="width:209.05pt;border-top:solid #7F7F7F 1.0pt;   border-left:   none;border-bottom:solid windowtext 1.0pt;border-right:none;padding:0cm 5.4pt 0cm 5.4pt;   height:13.85pt">Subcaracterística de rendimiento</td>
<td style="width:236.3pt;border-top:solid #7F7F7F 1.0pt;border-left:none;border-bottom:solid windowtext 1.0pt;   border-right:none;   padding:0cm 5.4pt 0cm 5.4pt;height:13.85pt">Métricas</td>
</tr>
<tr style="height:13.85pt">
<td style="width:209.05pt;border:none;   padding:0cm 5.4pt 0cm 5.4pt;height:13.85pt">Comportamiento en el tiempo</td>
<td style="width:236.3pt;border:none;   padding:0cm 5.4pt 0cm 5.4pt;height:13.85pt">Tiempo de respuesta Tiempo de espera Rendimiento</td>
</tr>
<tr style="height:13.85pt">
<td style="width:209.05pt;border:none;padding:0cm 5.4pt 0cm 5.4pt;   height:13.85pt">Utilización de recursos</td>
<td style="width:236.3pt;border:none;padding:0cm 5.4pt 0cm 5.4pt;   height:13.85pt">Utilización de CPU Utilización de memoria Utilización de dispositivos de Entrada y Salida (E/S)</td>
</tr>
<tr style="height:13.85pt">
<td style="width:209.05pt;border:none;border-bottom:solid #7F7F7F 1.0pt;         padding:0cm 5.4pt 0cm 5.4pt;height:13.85pt">Capacidad</td>
<td style="width:236.3pt;border:none;border-bottom:solid #7F7F7F 1.0pt;         padding:0cm 5.4pt 0cm 5.4pt;height:13.85pt">Número de peticiones en línea Número de accesos simultáneos Sistemas de transmisión de ancho de banda</td>
</tr>
</tbody>
</table>
</alternatives>
<attrib>Fuente: [<xref ref-type="bibr" rid="redalyc_344265925016_ref11">11</xref>],[<xref ref-type="bibr" rid="redalyc_344265925016_ref19">19</xref>].</attrib>
</table-wrap>
</p>
</sec>
<sec>
<title>
<bold>2.2 Descripción del producto software</bold>
</title>
<p>La aplicación web que hace posible el presente estudio comparativo, consiste en una plataforma web para <italic>delivery</italic> llamada VeciEntrega. Las tecnologías utilizadas para su desarrollo fueron: el <italic>framework</italic> de desarrollo web Django, el sistema gestor de base de datos PostgreSQL, HTML, CSS, JavaScript y tecnología PWA para una nueva versión de la aplicación. En la <xref ref-type="fig" rid="gf1">Figura 1</xref> se observa la versión de la aplicación web tradicional y en la <xref ref-type="fig" rid="gf2">Figura 2</xref>, la versión de la PWA.</p>
<p>
<fig id="gf1">
<label>Figura 1.</label>
<caption>
<title>Aplicación web tradicional.</title>
</caption>
<alt-text>Figura 1.  Aplicación web tradicional.</alt-text>
<graphic xlink:href="344265925016_gf2.png" position="anchor" orientation="portrait"/>
<attrib>Fuente: elaboración propia.</attrib>
</fig>
</p>
<p>
<fig id="gf2">
<label>Figura 2.</label>
<caption>
<title>Aplicación web progresiva.</title>
</caption>
<alt-text>Figura 2.  Aplicación web progresiva.</alt-text>
<graphic xlink:href="344265925016_gf3.png" position="anchor" orientation="portrait"/>
<attrib>Fuente: elaboración propia.</attrib>
</fig>
</p>
<p>Se optó por desarrollar este tipo de aplicación debido a que durante la COVID-19 las personas empezaron a utilizar con mayor frecuencia canales electrónicos por motivos como: temor de contagiarse y restricciones de movilidad. En [<xref ref-type="bibr" rid="redalyc_344265925016_ref20">20</xref>] se presenta un estudio realizado en Ecuador vinculado al comportamiento de los canales de compra, donde las aplicaciones de adquisición y <italic>delivery</italic> ocupan el segundo lugar con un 44 %</p>
<p>Al ser un tipo de aplicación de mayor auge, este debe presentar un alto rendimiento a la hora de atender las peticiones del usuario [<xref ref-type="bibr" rid="redalyc_344265925016_ref21">21</xref>], al cumplir con esta característica el resultado será una aplicación más fluida y con tiempos de acceso menores.</p>
</sec>
<sec>
<title>
<bold>2.3 Arquitectura de una aplicación web tradicional y una PWA</bold>
</title>
<p>Una aplicación web tradicional debe tener una conexión a Internet para realizar peticiones y obtener respuestas por parte del servidor web; el tiempo de respuesta dependerá de la velocidad de internet. En la <xref ref-type="fig" rid="gf3">Figura 3</xref> se observa la arquitectura de este tipo de aplicaciones.</p>
<p>
<fig id="gf3">
<label>Figura 3.</label>
<caption>
<title>Arquitectura de una aplicación web tradicional.</title>
</caption>
<alt-text>Figura 3.  Arquitectura de una aplicación web tradicional.</alt-text>
<graphic xlink:href="344265925016_gf4.png" position="anchor" orientation="portrait"/>
<attrib>Fuente: elaboración propia.</attrib>
</fig>
</p>
<p>Una PWA es una tecnología basada en la web tradicional que aprovecha recursos del navegador y de las API modernas para mejorar la experiencia del usuario. Entre sus características están: funcionamiento sin internet, actualizada, acceso a recursos del dispositivo e instalable, entre otros. La fórmula obtenida en [<xref ref-type="bibr" rid="redalyc_344265925016_ref22">22</xref>] define la arquitectura de una PWA: HTTPS + trabajador de servicio + manifiesto de aplicación web = aplicación web progresiva.</p>
<p>El trabajador de servicio es un archivo de JavaScript de instrucciones que se ejecutan en segundo plano en el navegador, el cual permite almacenar datos en caché para seguir utilizando la aplicación sin internet. El manifiesto de aplicación web consiste en un conjunto de propiedades como: el nombre de la aplicación, el tema y el icono, entre otros, que indican a los navegadores web y a los dispositivos móviles cómo mostrar la aplicación. En la <xref ref-type="fig" rid="gf4">Figura 4</xref> se observa la arquitectura de una PWA.</p>
<p>
<fig id="gf4">
<label>Figura 4.</label>
<caption>
<title>Arquitectura de una PWA.</title>
</caption>
<alt-text>Figura 4. Arquitectura de una PWA.</alt-text>
<graphic xlink:href="344265925016_gf5.png" position="anchor" orientation="portrait"/>
<attrib>Fuente: elaboración propia.</attrib>
</fig>
</p>
</sec>
<sec>
<title>
<bold>2.4 Implementación de la PWA</bold>
</title>
<p>El paquete utilizado para la implementación de una PWA en Django es: django-progressive-web-app==0.1.1. El archivo que intercepta las peticiones hechas por el cliente es el trabajador de servicio, y contiene código JavaScript que ejecuta instrucciones en segundo plano, este permitirá almacenar en caché: imágenes, código HTML, CSS y JavaScript. En la <xref ref-type="fig" rid="gf5">Figura 5</xref> se muestra el fragmento de código que define el nombre y las URL que se guardan en caché.</p>
<p>
<fig id="gf5">
<label>Figura 5.</label>
<caption>
<title>Archivos para almacenar en caché.</title>
</caption>
<alt-text>Figura 5. Archivos para almacenar en caché.</alt-text>
<graphic xlink:href="344265925016_gf6.png" position="anchor" orientation="portrait"/>
<attrib>Fuente: elaboración propia.</attrib>
</fig>
</p>
<p>Cuando el usuario accede por primera vez a la aplicación, los archivos que se guardan en caché son los presentes en la variable: urls_cache. El código de la <xref ref-type="fig" rid="gf6">Figura 6</xref> contiene los eventos “install”, que se encarga de instalar el trabajador de servicio, y “fetch”, el cual se activa cuando se intenta recuperar archivos del caché, por lo que se encarga de interceptar, almacenar y responder.</p>
<p>
<fig id="gf6">
<label>Figura 6.</label>
<caption>
<title>Evento “install” y “fetch”.</title>
</caption>
<alt-text>Figura 6. Evento “install” y “fetch”.</alt-text>
<graphic xlink:href="344265925016_gf7.png" position="anchor" orientation="portrait"/>
<attrib>Fuente: elaboración propia.</attrib>
</fig>
</p>
<p>Ahora bien, existen archivos, como las imágenes, que son dinámicos y para mejorar el mantenimiento de la aplicación se agregó en el evento “fetch” el código que permite instalar trabajadores de servicio por cada página accedida y almacenar todos estos archivos en caché.</p>
<p>Finalmente, en la <xref ref-type="fig" rid="gf7">Figura 7</xref> se muestra el archivo settings.py con la ruta que permite reconocer el trabajador de servicio y el código que representa al manifiesto de la aplicación.</p>
<p>
<fig id="gf7">
<label>Figura 7.</label>
<caption>
<title>Ruta del trabajador de servicio y manifiesto de la aplicación.</title>
</caption>
<alt-text>Figura 7.  Ruta del trabajador de servicio y manifiesto de la aplicación.</alt-text>
<graphic xlink:href="344265925016_gf8.png" position="anchor" orientation="portrait"/>
<attrib>Fuente: elaboración propia.</attrib>
</fig>
</p>
</sec>
<sec>
<title>
<bold>2.5 Navegadores compatibles con el trabajador de servicio</bold>
</title>
<p>El trabajador de servicio es un archivo fundamental para integrar funcionalidades avanzadas a una PWA, sin embargo, no todos los navegadores soportan la instalación de estos archivos. En la <xref ref-type="table" rid="gt2">Tabla 2</xref> se observan los navegadores y los sistemas operativos compatibles.</p>
<p>
<table-wrap id="gt2">
<label>Tabla 2.</label>
<caption>
<title>Navegadores y sistemas operativos compatibles con los trabajadores de servicio.</title>
</caption>
<alt-text>Tabla 2.  Navegadores y sistemas operativos compatibles con los trabajadores de servicio.</alt-text>
<alternatives>
<graphic xlink:href="344265925016_gt3.png" position="anchor" orientation="portrait"/>
<table style="border-collapse:collapse;border:none;  " id="gt3-526564616c7963">
<tbody>
<tr style="   height:14.2pt">
<td style="width:99.2pt;border-top:solid #7F7F7F 1.0pt;border-left:none;border-bottom:solid windowtext 1.0pt;   border-right:none;   padding:0cm 5.4pt 0cm 5.4pt;height:14.2pt">Navegador/ Sistema Operativo</td>
<td style="width:2.0cm;border-top:solid #7F7F7F 1.0pt;border-left:none;border-bottom:solid windowtext 1.0pt;   border-right:none;   padding:0cm 5.4pt 0cm 5.4pt;height:14.2pt">Chrome</td>
<td style="width:2.0cm;border-top:solid #7F7F7F 1.0pt;border-left:none;border-bottom:solid windowtext 1.0pt;   border-right:none;   padding:0cm 5.4pt 0cm 5.4pt;height:14.2pt">Safari</td>
<td style="width:2.0cm;border-top:solid #7F7F7F 1.0pt;border-left:none;border-bottom:solid windowtext 1.0pt;   border-right:none;   padding:0cm 5.4pt 0cm 5.4pt;height:14.2pt">Edge</td>
<td style="width:2.0cm;border-top:solid #7F7F7F 1.0pt;border-left:none;border-bottom:solid windowtext 1.0pt;   border-right:none;   padding:0cm 5.4pt 0cm 5.4pt;height:14.2pt">Firefox</td>
<td style="width:2.0cm;border-top:solid #7F7F7F 1.0pt;border-left:none;border-bottom:solid windowtext 1.0pt;   border-right:none;   padding:0cm 5.4pt 0cm 5.4pt;height:14.2pt">Opera</td>
</tr>
<tr style="height:14.2pt">
<td style="width:99.2pt;border:none;   padding:0cm 5.4pt 0cm 5.4pt;height:14.2pt">Android</td>
<td style="width:2.0cm;border:none;   padding:0cm 5.4pt 0cm 5.4pt;height:14.2pt">Sí</td>
<td style="width:2.0cm;border:none;   padding:0cm 5.4pt 0cm 5.4pt;height:14.2pt">---</td>
<td style="width:2.0cm;border:none;   padding:0cm 5.4pt 0cm 5.4pt;height:14.2pt">Sí</td>
<td style="width:2.0cm;border:none;   padding:0cm 5.4pt 0cm 5.4pt;height:14.2pt">Sí</td>
<td style="width:2.0cm;border:none;   padding:0cm 5.4pt 0cm 5.4pt;height:14.2pt">Sí</td>
</tr>
<tr style="height:14.2pt">
<td style="width:99.2pt;border:none;padding:0cm 5.4pt 0cm 5.4pt;   height:14.2pt">Windows</td>
<td style="width:2.0cm;border:none;padding:0cm 5.4pt 0cm 5.4pt;   height:14.2pt">Sí</td>
<td style="width:2.0cm;border:none;padding:0cm 5.4pt 0cm 5.4pt;   height:14.2pt">No</td>
<td style="width:2.0cm;border:none;padding:0cm 5.4pt 0cm 5.4pt;   height:14.2pt">Pronto</td>
<td style="width:2.0cm;border:none;padding:0cm 5.4pt 0cm 5.4pt;   height:14.2pt">Sí</td>
<td style="width:2.0cm;border:none;padding:0cm 5.4pt 0cm 5.4pt;   height:14.2pt">Sí</td>
</tr>
<tr style="height:14.2pt">
<td style="width:99.2pt;border:none;padding:0cm 5.4pt 0cm 5.4pt;   height:14.2pt">iOS</td>
<td style="width:2.0cm;border:none;padding:0cm 5.4pt 0cm 5.4pt;   height:14.2pt">No</td>
<td style="width:2.0cm;border:none;padding:0cm 5.4pt 0cm 5.4pt;   height:14.2pt">Pronto</td>
<td style="width:2.0cm;border:none;padding:0cm 5.4pt 0cm 5.4pt;   height:14.2pt">Pronto</td>
<td style="width:2.0cm;border:none;padding:0cm 5.4pt 0cm 5.4pt;   height:14.2pt">No</td>
<td style="width:2.0cm;border:none;padding:0cm 5.4pt 0cm 5.4pt;   height:14.2pt">---</td>
</tr>
<tr style="height:14.2pt">
<td style="width:99.2pt;border:none;padding:0cm 5.4pt 0cm 5.4pt;   height:14.2pt">OS X</td>
<td style="width:2.0cm;border:none;padding:0cm 5.4pt 0cm 5.4pt;   height:14.2pt">Sí</td>
<td style="width:2.0cm;border:none;padding:0cm 5.4pt 0cm 5.4pt;   height:14.2pt">No</td>
<td style="width:2.0cm;border:none;padding:0cm 5.4pt 0cm 5.4pt;   height:14.2pt">---</td>
<td style="width:2.0cm;border:none;padding:0cm 5.4pt 0cm 5.4pt;   height:14.2pt">Sí</td>
<td style="width:2.0cm;border:none;padding:0cm 5.4pt 0cm 5.4pt;   height:14.2pt">Sí</td>
</tr>
<tr style="height:14.2pt">
<td style="width:99.2pt;border:none;border-bottom:solid #7F7F7F 1.0pt;         padding:0cm 5.4pt 0cm 5.4pt;height:14.2pt">Linux</td>
<td style="width:2.0cm;border:none;border-bottom:solid #7F7F7F 1.0pt;         padding:0cm 5.4pt 0cm 5.4pt;height:14.2pt">Sí</td>
<td style="width:2.0cm;border:none;border-bottom:solid #7F7F7F 1.0pt;         padding:0cm 5.4pt 0cm 5.4pt;height:14.2pt">---</td>
<td style="width:2.0cm;border:none;border-bottom:solid #7F7F7F 1.0pt;         padding:0cm 5.4pt 0cm 5.4pt;height:14.2pt">---</td>
<td style="width:2.0cm;border:none;border-bottom:solid #7F7F7F 1.0pt;         padding:0cm 5.4pt 0cm 5.4pt;height:14.2pt">Sí</td>
<td style="width:2.0cm;border:none;border-bottom:solid #7F7F7F 1.0pt;         padding:0cm 5.4pt 0cm 5.4pt;height:14.2pt">Sí</td>
</tr>
</tbody>
</table>
</alternatives>
<attrib>Fuente: [<xref ref-type="bibr" rid="redalyc_344265925016_ref23">23</xref>].</attrib>
</table-wrap>
</p>
<p>Además, los navegadores integran un conjunto de herramientas para desarrolladores, estas son de gran utilidad para inspeccionar una aplicación web y verificar su comportamiento, almacenamiento, depuración y conexión, entre otros.</p>
<p>Para la evaluación se tomaron en cuenta cuatro navegadores compatibles con esta tecnología en Windows: Chrome, Firefox, Opera y Edge. Al incluir estos navegadores a la evaluación, se podrá identificar el comportamiento de la aplicación web tradicional y de la PWA bajo estos escenarios y obtener resultados que reflejen igualdad o discrepancias entre estos.</p>
</sec>
<sec>
<title>
<bold>2.6 Almacenamiento en caché</bold>
</title>
<p>Para ejecutar las pruebas de rendimiento, previamente se analizaron los archivos generados por la versión PWA. En la <xref ref-type="fig" rid="gf8">Figura 8</xref> se muestra el panel donde se instalan y ejecutan los trabajadores de servicio.</p>
<p>
<fig id="gf8">
<label>Figura 8.</label>
<caption>
<title>Panel de supervisión de trabajadores de servicio.</title>
</caption>
<alt-text>Figura 8.  Panel de supervisión de trabajadores de servicio.</alt-text>
<graphic xlink:href="344265925016_gf9.png" position="anchor" orientation="portrait"/>
<attrib>Fuente: elaboración propia.</attrib>
</fig>
</p>
<p>Este trabajador de servicio intercepta y guarda en caché todos los archivos provenientes del servidor, la configuración se la puede observar en la Figura 5. A medida que el usuario navega, el estado del trabajador de servicio pasará de instalado ha activado, ocasionando de esa manera que el usuario obtenga una respuesta del caché y utilice el servidor únicamente para realizar consultas a la base de datos.</p>
<p>En la<xref ref-type="fig" rid="gf9"> Figura 9</xref> se muestra el almacenamiento en caché, es aquí donde se guardan todos los archivos interceptados por el trabajador de servicio.</p>
<p>
<fig id="gf9">
<label>Figura 9.</label>
<caption>
<title>Almacenamiento en caché.</title>
</caption>
<alt-text>Figura 9.  Almacenamiento en caché.</alt-text>
<graphic xlink:href="344265925016_gf10.png" position="anchor" orientation="portrait"/>
<attrib>Fuente: elaboración propia.</attrib>
</fig>
</p>
<p>Cuando una aplicación almacena en caché es importante tener en cuenta los conceptos y las políticas del almacenamiento en caché web [<xref ref-type="bibr" rid="redalyc_344265925016_ref24">24</xref>]. En la <xref ref-type="fig" rid="gf10">Figura 10</xref> se muestra la sección de almacenamiento, que permite conocer la cuota de almacenamiento y el consumo actual de la aplicación.</p>
<p>
<fig id="gf10">
<label>Figura 10.</label>
<caption>
<title>Capacidad y uso de almacenamiento.</title>
</caption>
<alt-text>Figura 10.  Capacidad y uso de almacenamiento.</alt-text>
<graphic xlink:href="344265925016_gf11.png" position="anchor" orientation="portrait"/>
<attrib>Fuente: elaboración propia.</attrib>
</fig>
</p>
<p>El trabajador de servicio configurado para esta aplicación almacena en cachés archivos dinámicamente, por lo que el uso del almacenamiento en el navegador irá incrementando a medida que el usuario visite las páginas de la aplicación.</p>
<p>Los navegadores permiten diferentes cantidades de almacenamiento. En la <xref ref-type="fig" rid="gf11">Figura 11</xref> se muestra un fragmento de código JavaScript para conocer estos datos.</p>
<p>
<fig id="gf11">
<label>Figura 11.</label>
<caption>
<title>Valores del almacenamiento en caché.</title>
</caption>
<alt-text>Figura 11.  Valores del almacenamiento en caché.</alt-text>
<graphic xlink:href="344265925016_gf12.png" position="anchor" orientation="portrait"/>
<attrib>Fuente: elaboración propia.</attrib>
</fig>
</p>
</sec>
<sec>
<title>
<bold>2.7 Métricas y fórmulas para medir el rendimiento</bold>
</title>
<p>Este tipo de evaluación se la puede realizar durante la etapa de pruebas de desarrollo de <italic>software</italic> [<xref ref-type="bibr" rid="redalyc_344265925016_ref19">19</xref>]; pero, para tener un escenario y resultados confiables, se puso en producción a las dos versiones en Google App Engine. A continuación, se observan las métricas de rendimiento y las fórmulas que serán usadas para la evaluación.</p>
<sec>
<title>
<italic>2.7.1 Comportamiento en el tiempo</italic>
</title>
<p>Estas métricas permiten medir los tiempos en que un<italic> software</italic> tarda en realizar una determinada actividad, desde que se inicia hasta que termina, incluyendo tiempos de prueba y operaciones [<xref ref-type="bibr" rid="redalyc_344265925016_ref19">19</xref>]. En la <xref ref-type="table" rid="gt4">Tabla 3</xref> se observan estas métricas con sus respectivas fórmulas.</p>
<p>
<table-wrap id="gt4">
<label>Tabla 3.</label>
<caption>
<title>Métricas y fórmulas de comportamiento en el tiempo.</title>
</caption>
<alt-text>Tabla 3.  Métricas y fórmulas de comportamiento en el tiempo.</alt-text>
<alternatives>
<graphic xlink:href="344265925016_gt5.png" position="anchor" orientation="portrait"/>
<table style="border-collapse:collapse;border:none;  " id="gt5-526564616c7963">
<tbody>
<tr style="   height:14.2pt">
<td style="width:4.0cm;border-top:solid #7F7F7F 1.0pt;border-left:none;border-bottom:solid windowtext 1.0pt;   border-right:none;   padding:0cm 5.4pt 0cm 5.4pt;height:14.2pt">Métrica</td>
<td style="width:63.8pt;border-top:solid #7F7F7F 1.0pt;border-left:none;border-bottom:solid windowtext 1.0pt;   border-right:none;   padding:0cm 5.4pt 0cm 5.4pt;height:14.2pt">Fórmula</td>
<td style="width:7.0cm;border-top:solid #7F7F7F 1.0pt;border-left:none;border-bottom:solid windowtext 1.0pt;   border-right:none;   padding:0cm 5.4pt 0cm 5.4pt;height:14.2pt">Descripción</td>
</tr>
<tr style="height:14.2pt">
<td style="width:4.0cm;border:none;   padding:0cm 5.4pt 0cm 5.4pt;height:14.2pt">Tiempo de respuesta</td>
<td style="width:63.8pt;border:none;   padding:0cm 5.4pt 0cm 5.4pt;height:14.2pt">X = B-A</td>
<td style="width:7.0cm;border:none;   padding:0cm 5.4pt 0cm 5.4pt;height:14.2pt">A = Tiempo de envío de petición. B = Tiempo en recibir la primera respuesta.</td>
</tr>
<tr style="height:14.2pt">
<td style="width:4.0cm;border:none;padding:0cm 5.4pt 0cm 5.4pt;   height:14.2pt">Tiempo de espera</td>
<td style="width:63.8pt;border:none;padding:0cm 5.4pt 0cm 5.4pt;   height:14.2pt">X = B-A</td>
<td style="width:7.0cm;border:none;padding:0cm 5.4pt 0cm 5.4pt;   height:14.2pt">A = Tiempo cuando se inicia un trabajo. B = Tiempo en completar el trabajo.</td>
</tr>
<tr style="height:14.2pt">
<td style="width:4.0cm;border:none;border-bottom:solid windowtext 1.0pt;   padding:0cm 5.4pt 0cm 5.4pt;   height:14.2pt">Rendimiento</td>
<td style="width:63.8pt;border:none;border-bottom:solid windowtext 1.0pt;   padding:0cm 5.4pt 0cm 5.4pt;   height:14.2pt">X = A/T</td>
<td style="width:7.0cm;border:none;border-bottom:solid windowtext 1.0pt;   padding:0cm 5.4pt 0cm 5.4pt;   height:14.2pt">A = Número de tareas completadas. T = Intervalo de tiempo.</td>
</tr>
</tbody>
</table>
</alternatives>
<attrib>Fuente: [<xref ref-type="bibr" rid="redalyc_344265925016_ref11">11</xref>][<xref ref-type="bibr" rid="redalyc_344265925016_ref19">19</xref>].</attrib>
</table-wrap>
</p>
<p>Tiempo de respuesta y tiempo de espera: estos aspectos se consideraron ya que permiten conocer el comportamiento en el tiempo de la aplicación web para realizar una actividad. El tiempo de respuesta es la duración entre iniciar una tarea y recibir la primera respuesta, y el tiempo de espera es la duración entre iniciar y completar un trabajo [<xref ref-type="bibr" rid="redalyc_344265925016_ref19">19</xref>].</p>
<p>Rendimiento: es el tiempo que le toma al <italic>software</italic> para completar una o varias tareas [<xref ref-type="bibr" rid="redalyc_344265925016_ref19">19</xref>]. Esta métrica permite medir la eficiencia que tiene la aplicación para cumplir con sus actividades propuestas.</p>
</sec>
<sec>
<title>
<italic>2.7.2 Utilización de recursos</italic>
</title>
<p>Estas métricas permiten medir el comportamiento que tienen los recursos utilizados por el <italic>software</italic> [<xref ref-type="bibr" rid="redalyc_344265925016_ref19">19</xref>]. En la <xref ref-type="table" rid="gt5">Tabla 4 </xref>se observan estas métricas con sus respectivas fórmulas.</p>
<p>
<table-wrap id="gt5">
<label>Tabla 4.</label>
<caption>
<title>Métricas y fórmulas de utilización de recursos.</title>
</caption>
<alt-text>Tabla 4.  Métricas y fórmulas de utilización de recursos.</alt-text>
<alternatives>
<graphic xlink:href="344265925016_gt6.png" position="anchor" orientation="portrait"/>
<table style="border-collapse:collapse;border:none;  " id="gt6-526564616c7963">
<tbody>
<tr style="   height:15.25pt">
<td style="width:129.9pt;border-top:solid #7F7F7F 1.0pt;border-left:none;border-bottom:solid windowtext 1.0pt;   border-right:none;   padding:0cm 5.4pt 0cm 5.4pt;height:15.25pt">Métrica</td>
<td style="width:73.05pt;border-top:solid #7F7F7F 1.0pt;border-left:none;border-bottom:solid windowtext 1.0pt;   border-right:none;   padding:0cm 5.4pt 0cm 5.4pt;height:15.25pt">Fórmula</td>
<td style="width:227.3pt;border-top:solid #7F7F7F 1.0pt;border-left:none;border-bottom:solid windowtext 1.0pt;   border-right:none;   padding:0cm 5.4pt 0cm 5.4pt;height:15.25pt">Descripción</td>
</tr>
<tr style="height:15.25pt">
<td style="width:129.9pt;border:none;   padding:0cm 5.4pt 0cm 5.4pt;height:15.25pt">Utilización de CPU</td>
<td style="width:73.05pt;border:none;   padding:0cm 5.4pt 0cm 5.4pt;height:15.25pt">X = A</td>
<td style="width:227.3pt;border:none;   padding:0cm 5.4pt 0cm 5.4pt;height:15.25pt">A = Cantidad de CPU que es usada para realizar una tarea.</td>
</tr>
<tr style="height:15.25pt">
<td style="width:129.9pt;border:none;padding:0cm 5.4pt 0cm 5.4pt;   height:15.25pt">Utilización de memoria</td>
<td style="width:73.05pt;border:none;padding:0cm 5.4pt 0cm 5.4pt;   height:15.25pt">X = A</td>
<td style="width:227.3pt;border:none;padding:0cm 5.4pt 0cm 5.4pt;   height:15.25pt">A = Cantidad de memoria que es usada para realizar una tarea.</td>
</tr>
<tr style="height:15.25pt">
<td style="width:129.9pt;border:none;border-bottom:solid #7F7F7F 1.0pt;         padding:0cm 5.4pt 0cm 5.4pt;height:15.25pt">Utilización de dispositivos de E/S</td>
<td style="width:73.05pt;border:none;border-bottom:solid #7F7F7F 1.0pt;         padding:0cm 5.4pt 0cm 5.4pt;height:15.25pt">X = A/B</td>
<td style="width:227.3pt;border:none;border-bottom:solid #7F7F7F 1.0pt;         padding:0cm 5.4pt 0cm 5.4pt;height:15.25pt">A = Tiempo de operación. B = La cantidad de dispositivo(s) de E/S ocupada para realizar una tarea.</td>
</tr>
</tbody>
</table>
</alternatives>
<attrib>Fuente: [<xref ref-type="bibr" rid="redalyc_344265925016_ref11">11</xref>][<xref ref-type="bibr" rid="redalyc_344265925016_ref19">19</xref>].</attrib>
</table-wrap>
</p>
<p>Utilización de la CPU: este aspecto es muy importante debido a que la CPU se encarga de que las tareas se realicen a una mayor velocidad, por tal motivo su consumo en las páginas web debe ser mínimo para que las personas tengan una mejor experiencia de navegación.</p>
<p>Utilización de memoria: esta métrica permite asignar un espacio de memoria a un proceso. A medida que estos procesos van aumentando, el consumo de memoria de acceso aleatorio (RAM, por sus siglas en inglés) también aumenta.</p>
<p>Utilización de dispositivos de E/S: esta métrica permite medir el tiempo que consumen los dispositivos de E/S para realizar una determinada actividad [<xref ref-type="bibr" rid="redalyc_344265925016_ref19">19</xref>].</p>
</sec>
<sec>
<title>
<italic>2.7.3 Capacidad</italic>
</title>
<p>Estas métricas permiten medir la capacidad de respuesta que tiene un <italic>software</italic> cuando es sometido a límites máximos de funcionamiento [<xref ref-type="bibr" rid="redalyc_344265925016_ref19">19</xref>]. En la <xref ref-type="table" rid="gt6">Tabla 5</xref> se observan estas métricas con sus respectivas fórmulas.</p>
<p>
<table-wrap id="gt6">
<label>Tabla 5.</label>
<caption>
<title>Métricas y fórmulas de capacidad.</title>
</caption>
<alt-text>Tabla 5.  Métricas y fórmulas de capacidad.</alt-text>
<alternatives>
<graphic xlink:href="344265925016_gt7.png" position="anchor" orientation="portrait"/>
<table style="border-collapse:collapse;border:none;  " id="gt7-526564616c7963">
<tbody>
<tr style="   height:14.2pt">
<td style="width:4.0cm;border-top:solid windowtext 1.0pt;   border-left:none;border-bottom:solid windowtext 1.0pt;border-right:none;      padding:0cm 5.4pt 0cm 5.4pt;height:14.2pt">Métrica</td>
<td style="width:63.8pt;border-top:solid windowtext 1.0pt;   border-left:none;border-bottom:solid windowtext 1.0pt;border-right:none;      padding:0cm 5.4pt 0cm 5.4pt;height:14.2pt">Fórmula</td>
<td style="width:233.9pt;border-top:solid windowtext 1.0pt;   border-left:none;border-bottom:solid windowtext 1.0pt;border-right:none;      padding:0cm 5.4pt 0cm 5.4pt;height:14.2pt">Descripción</td>
</tr>
<tr style="height:14.2pt">
<td style="width:4.0cm;border:none;   padding:0cm 5.4pt 0cm 5.4pt;height:14.2pt">Número de peticiones en línea</td>
<td style="width:63.8pt;border:none;   padding:0cm 5.4pt 0cm 5.4pt;height:14.2pt">X = A/T</td>
<td style="width:233.9pt;border:none;   padding:0cm 5.4pt 0cm 5.4pt;height:14.2pt">A = Número máximo de peticiones en línea procesadas. T = Tiempo de operación, T &gt; 0</td>
</tr>
<tr style="height:14.2pt">
<td style="width:4.0cm;border:none;padding:0cm 5.4pt 0cm 5.4pt;   height:14.2pt">Número de accesos simultáneos</td>
<td style="width:63.8pt;border:none;padding:0cm 5.4pt 0cm 5.4pt;   height:14.2pt">X = A/T</td>
<td style="width:233.9pt;border:none;padding:0cm 5.4pt 0cm 5.4pt;   height:14.2pt">A = Número máximo de accesos simultáneos. T = Tiempo de operación, T &gt; 0</td>
</tr>
<tr style="height:14.2pt">
<td style="width:4.0cm;border:none;border-bottom:solid #7F7F7F 1.0pt;         padding:0cm 5.4pt 0cm 5.4pt;height:14.2pt">Sistemas de transmisión de ancho de banda</td>
<td style="width:63.8pt;border:none;border-bottom:solid #7F7F7F 1.0pt;         padding:0cm 5.4pt 0cm 5.4pt;height:14.2pt">X = A/T</td>
<td style="width:233.9pt;border:none;border-bottom:solid #7F7F7F 1.0pt;         padding:0cm 5.4pt 0cm 5.4pt;height:14.2pt">A = Cantidad máxima de transmisión de datos. T = Tiempo de operación, T &gt; 0</td>
</tr>
</tbody>
</table>
</alternatives>
<attrib>Fuente: [<xref ref-type="bibr" rid="redalyc_344265925016_ref11">11</xref>][<xref ref-type="bibr" rid="redalyc_344265925016_ref19">19</xref>].</attrib>
</table-wrap>
</p>
<p>Número de peticiones en línea: permite medir las peticiones que son procesadas bajo un cierto intervalo de tiempo [<xref ref-type="bibr" rid="redalyc_344265925016_ref19">19</xref>].</p>
<p>Número de accesos simultáneos: determina el número máximo de usuarios que acceden al sistema simultáneamente y el tiempo en que demora esta operación [<xref ref-type="bibr" rid="redalyc_344265925016_ref19">19</xref>].</p>
<p>Sistema de transmisión de ancho de banda: mide el valor de transmisión máximo requerido para realizar las actividades en el sistema informático [<xref ref-type="bibr" rid="redalyc_344265925016_ref19">19</xref>].</p>
</sec>
</sec>
<sec>
<title>
<bold>2.8 Herramientas informáticas para medir el rendimiento</bold>
</title>
<p>Las herramientas informáticas utilizadas para la evaluación de las aplicaciones son: la página web MLAB, Novabench, la extensión page load time para Chrome, Opera y Edge, la extensión load time para Firefox, el administrador de tareas y las herramientas de desarrollo.</p>
<p>MLAB: este sitio web permite realizar pruebas de velocidad que proporciona diagnósticos avanzados del rendimiento de la conexión de banda ancha a través de mediciones rápidas. Se dedica a suministrar un ecosistema para la medición abierta y verificable del rendimiento de la red global [<xref ref-type="bibr" rid="redalyc_344265925016_ref25">25</xref>].</p>
<p>Novabench: este <italic>software</italic> es un punto de referencia gratuito que permite realizar pruebas rápidas de rendimiento de componentes informáticos, como la unidad de procesamiento central (CPU), la unidad de procesamiento de gráficos (GPU) , transferencia de RAM y Speed (la velocidad de lectura y escritura del disco duro de la computadora) [<xref ref-type="bibr" rid="redalyc_344265925016_ref26">26</xref>].</p>
<p>Extensión page load time y load time: estas extensiones miden el tiempo de carga de la página y lo muestran en la barra de herramientas [<xref ref-type="bibr" rid="redalyc_344265925016_ref27">27</xref>]. Consiste en la cantidad de tiempo promedio que tarda una página en aparecer en la pantalla. Se calcula desde el inicio (cuando se hace clic en el enlace de una página o se escribe una dirección web) hasta su finalización (cuando la página está completamente cargada en el navegador). Normalmente, el tiempo de carga de la página es medido en segundos.</p>
<p>Administrador de tareas: esta herramienta permite conocer el consumo de recursos como: CPU, memoria y red de los sitios web que están siendo utilizados por el navegador.</p>
<p>Herramientas de desarrollo: este conjunto de herramientas se integra en los navegadores y permiten crear, depurar, evaluar y verificar el comportamiento de aplicaciones web en diferentes métricas como: accesibilidad, rendimiento y almacenamiento, entre otros.</p>
</sec>
<sec>
<title>
<bold>2.9 Condiciones iniciales para la evaluación</bold>
</title>
<p>La velocidad de internet es necesaria para medir la métrica del comportamiento en el tiempo en las aplicaciones web tradicionales; para las PWA esta condición no es relevante, ya que por sus características propias estas mantienen su eficiencia, incluso, en redes de baja calidad. En la <xref ref-type="table" rid="gt7">Tabla 6</xref> se muestran las condiciones iniciales de velocidad de internet.</p>
<p>
<table-wrap id="gt7">
<label>Tabla 6.</label>
<caption>
<title>Datos de MLAB de velocidad de internet.</title>
</caption>
<alt-text>Tabla 6.   Datos de MLAB de velocidad de internet.</alt-text>
<alternatives>
<graphic xlink:href="344265925016_gt8.png" position="anchor" orientation="portrait"/>
<table style="border-collapse:collapse;" id="gt8-526564616c7963">
<tbody>
<tr style="height:14.2pt">
<td style="width:276.1pt;border-top:solid windowtext 1.0pt;   border-left:none;border-bottom:solid windowtext 1.0pt;border-right:none;      padding:0cm 5.4pt 0cm 5.4pt;height:14.2pt" colspan="2">Condiciones iniciales de la prueba de velocidad de internet</td>
</tr>
<tr style="height:14.2pt">
<td style="width:144.95pt;border:none;   padding:0cm 5.4pt 0cm 5.4pt;height:14.2pt">Servidor de prueba</td>
<td style="width:131.1pt;border:none;   padding:0cm 5.4pt 0cm 5.4pt;height:14.2pt">Bogotá, CO</td>
</tr>
<tr style="height:14.2pt">
<td style="width:144.95pt;padding:0cm 5.4pt 0cm 5.4pt;height:14.2pt">Descargar</td>
<td style="width:131.1pt;padding:0cm 5.4pt 0cm 5.4pt;height:14.2pt">4.56 Mb/s</td>
</tr>
<tr style="height:14.2pt">
<td style="width:144.95pt;padding:0cm 5.4pt 0cm 5.4pt;height:14.2pt">Subir</td>
<td style="width:131.1pt;padding:0cm 5.4pt 0cm 5.4pt;height:14.2pt">0.36 Mb/s</td>
</tr>
<tr style="height:14.2pt">
<td style="width:144.95pt;padding:0cm 5.4pt 0cm 5.4pt;height:14.2pt">Latencia</td>
<td style="width:131.1pt;padding:0cm 5.4pt 0cm 5.4pt;height:14.2pt">164 ms</td>
</tr>
<tr style="height:14.2pt">
<td style="width:144.95pt;border:none;border-bottom:solid black 1.0pt;      padding:0cm 5.4pt 0cm 5.4pt;height:14.2pt">Retransmisión</td>
<td style="width:131.1pt;border:none;border-bottom:solid black 1.0pt;      padding:0cm 5.4pt 0cm 5.4pt;height:14.2pt">0.91 %</td>
</tr>
</tbody>
</table>
</alternatives>
<attrib>Fuente: elaboración propia.</attrib>
</table-wrap>
</p>
<p>Para la métrica de utilización de recursos se tomaron en cuenta las características del computador donde se ejecutaron las aplicaciones. En la <xref ref-type="table" rid="gt8">Tabla 7</xref> se observa las condiciones iniciales del computador.</p>
<p>
<table-wrap id="gt8">
<label>Tabla 7.</label>
<caption>
<title>Condiciones iniciales del computador.</title>
</caption>
<alt-text>Tabla 7. Condiciones iniciales del computador.</alt-text>
<alternatives>
<graphic xlink:href="344265925016_gt9.png" position="anchor" orientation="portrait"/>
<table style="border-collapse:collapse;" id="gt9-526564616c7963">
<tbody>
<tr style="height:14.2pt">
<td style="width:347.3pt;border-top:solid windowtext 1.0pt;   border-left:none;border-bottom:solid windowtext 1.0pt;border-right:none;      padding:0cm 5.4pt 0cm 5.4pt;height:14.2pt" colspan="2">Condiciones iniciales del computador</td>
</tr>
<tr style="height:14.2pt">
<td style="width:97.65pt;border:none;   padding:0cm 5.4pt 0cm 5.4pt;height:14.2pt">Sistema Operativo</td>
<td style="width:249.65pt;border:none;   padding:0cm 5.4pt 0cm 5.4pt;height:14.2pt">Microsoft Windows 10 Home Single Languaje 64 bits</td>
</tr>
<tr style="height:14.2pt">
<td style="width:97.65pt;padding:0cm 5.4pt 0cm 5.4pt;height:14.2pt">CPU</td>
<td style="width:249.65pt;padding:0cm 5.4pt 0cm 5.4pt;height:14.2pt">Intel Core i7-8550U – 3.7GHz</td>
</tr>
<tr style="height:14.2pt">
<td style="width:97.65pt;padding:0cm 5.4pt 0cm 5.4pt;height:14.2pt">RAM</td>
<td style="width:249.65pt;padding:0cm 5.4pt 0cm 5.4pt;height:14.2pt">8GB – 10657 MB/s</td>
</tr>
<tr style="height:14.2pt">
<td style="width:97.65pt;padding:0cm 5.4pt 0cm 5.4pt;height:14.2pt">GPU</td>
<td style="width:249.65pt;padding:0cm 5.4pt 0cm 5.4pt;height:14.2pt">Intel UHD Graphics 620</td>
</tr>
<tr style="height:14.2pt">
<td style="width:97.65pt;border:none;border-bottom:solid windowtext 1.0pt;   padding:0cm 5.4pt 0cm 5.4pt;   height:14.2pt">Disco Duro</td>
<td style="width:249.65pt;border:none;border-bottom:solid windowtext 1.0pt;   padding:0cm 5.4pt 0cm 5.4pt;   height:14.2pt">31 (Disco Score) – (Write) 103 MB/s – (Read) 134 MB/s</td>
</tr>
</tbody>
</table>
</alternatives>
<attrib>Fuente: elaboración propia.</attrib>
</table-wrap>
</p>
<p>La evaluación se ejecuta en 4 navegadores compatibles con trabajadores de servicio. En la <xref ref-type="table" rid="gt9">Tabla 8</xref> se observan los navegadores junto a su versión.</p>
<p>
<table-wrap id="gt9">
<label>Tabla 8.</label>
<caption>
<title>Navegadores y su versión.</title>
</caption>
<alt-text>Tabla 8.  Navegadores y su versión.</alt-text>
<alternatives>
<graphic xlink:href="344265925016_gt10.png" position="anchor" orientation="portrait"/>
<table style="border-collapse:collapse;" id="gt10-526564616c7963">
<tbody>
<tr style="height:15.4pt">
<td style="width:259.8pt;border-top:solid windowtext 1.0pt;   border-left:none;border-bottom:solid windowtext 1.0pt;border-right:none;      padding:0cm 5.4pt 0cm 5.4pt;height:15.4pt" colspan="2">Navegadores compatibles con trabajadores de servicio</td>
</tr>
<tr style="height:15.2pt">
<td style="width:93.0pt;border:none;   padding:0cm 5.4pt 0cm 5.4pt;height:15.2pt">Google Chrome</td>
<td style="width:166.75pt;border:none;   padding:0cm 5.4pt 0cm 5.4pt;height:15.2pt">Versión 90.0.4430.93</td>
</tr>
<tr style="height:14.85pt">
<td style="width:93.0pt;padding:0cm 5.4pt 0cm 5.4pt;height:14.85pt">Microsoft Edge</td>
<td style="width:166.75pt;padding:0cm 5.4pt 0cm 5.4pt;height:14.85pt">Versión 90.0.818.56</td>
</tr>
<tr style="height:14.0pt">
<td style="width:93.0pt;padding:0cm 5.4pt 0cm 5.4pt;height:14.0pt">Opera</td>
<td style="width:166.75pt;padding:0cm 5.4pt 0cm 5.4pt;height:14.0pt">Versión 76.0.4017.107</td>
</tr>
<tr style="height:10.9pt">
<td style="width:93.0pt;border:none;border-bottom:solid windowtext 1.0pt;   padding:0cm 5.4pt 0cm 5.4pt;   height:10.9pt">Mozilla Firefox</td>
<td style="width:166.75pt;border:none;border-bottom:solid windowtext 1.0pt;   padding:0cm 5.4pt 0cm 5.4pt;   height:10.9pt">Versión 88.0.1</td>
</tr>
</tbody>
</table>
</alternatives>
<attrib>Fuente: elaboración propia.</attrib>
</table-wrap>
</p>
<p>La evaluación se realizó basándose en la funcionalidad más importante de la aplicación, esta es: realizar un pedido. Para las métricas de comportamiento en el tiempo se evaluaron las aplicaciones desde que el usuario ingresa a la aplicación, lista los locales, lista los productos y realiza un pedido. Para las métricas de utilización de recursos se evalúa el consumo de memoria y CPU al realizar un pedido, y para la utilización de dispositivos de E/S se toma en cuenta el tipo de almacenamiento en caché que utilizan las aplicaciones. Para las métricas de capacidad se identifica el número de peticiones procesadas y el valor máximo de transmisión necesario para hacer un pedido en la aplicación. Debido a que la PWA trabaja de forma local por cada usuario, se consideró evaluar la métrica de accesos simultáneos con un único usuario.</p>
</sec>
</sec>
<sec>
<title>
<bold>3. RESULTADOS Y DISCUSIÓN</bold>
</title>
<p>Al finalizar las pruebas de rendimiento se obtuvieron resultados similares en las métricas de tiempo de respuesta y espera, debido a que la aplicación web tradicional presento otro tipo de almacenamiento similar a los trabajadores de servicio. En las métricas de utilización de recursos, la ejecución de tareas en segundo plano ocasionó que la PWA tuviera un mayor consumo de recursos, además, no almacenó la misma cantidad de información en la caché de los navegadores. En las métricas de capacidad, las dos aplicaciones presentaron comportamientos diferentes al momento de realizar peticiones a través de la red.</p>
<p>Los resultados se representan en gráficas de barras: la barra azul representa a la aplicación web tradicional y la barra roja a la PWA, estos se muestran en función del navegador y el valor obtenido en cada métrica de rendimiento. A continuación, se exponen estos resultados y un análisis en cada uno de ellos.</p>
<sec>
<title>
<bold>3.1 Comportamiento en el tiempo</bold>
</title>
<sec>
<title>
<italic>3.1.1 Tiempo de respuesta</italic>
</title>
<p>En la <xref ref-type="fig" rid="gf12">Figura 12</xref> se observa que a pesar de que la aplicación web tradicional no almacenó información en la caché del navegador y no instaló trabajadores de servicio, esta presenta tiempos de respuesta similares a la PWA. Esto sucede porque la aplicación web tradicional almacenó temporalmente información en la caché de disco y memoria dando como resultado una aplicación igual de eficiente. La PWA respondió a las peticiones del cliente con información almacenada en la caché del navegador, si bien aún realizaba peticiones a la caché de disco y memoria.</p>
<p>
<fig id="gf12">
<label>Figura 12.</label>
<caption>
<title>Tiempo de respuesta de la aplicación web tradicional vs PWA.</title>
</caption>
<alt-text>Figura 12.  Tiempo de respuesta de la aplicación web tradicional vs PWA.</alt-text>
<graphic xlink:href="344265925016_gf13.png" position="anchor" orientation="portrait"/>
<attrib>Fuente: elaboración propia.</attrib>
</fig>
</p>
</sec>
<sec>
<title>
<italic>3.1.2 Tiempo de espera</italic>
</title>
<p>En la <xref ref-type="fig" rid="gf13">Figura 13</xref> se observa un comportamiento parecido. Por lo general, la caché de disco y memoria están habilitadas en todos los navegadores que tienen este soporte; sin embargo, al deshabilitar esta opción mediante las herramientas de desarrollador, se obtuvo como resultado tiempos de respuesta y espera más complejos en la aplicación web tradicional.</p>
<p>
<fig id="gf13">
<label>Figura 13.</label>
<caption>
<title>Tiempo de espera de la aplicación web tradicional vs PWA.</title>
</caption>
<alt-text>Figura 13.   Tiempo de espera de la aplicación web tradicional vs PWA.</alt-text>
<graphic xlink:href="344265925016_gf14.png" position="anchor" orientation="portrait"/>
<attrib>Fuente: elaboración propia.</attrib>
</fig>
</p>
<p>Una de las diferencias entre estos dos almacenamientos es el funcionamiento sin Internet y esto se consigue mediante el trabajador de servicio y su capacidad para guardar y responder con información almacenada en la caché del navegador.</p>
</sec>
<sec>
<title>
<italic>3.1.3 Rendimiento</italic>
</title>
<p>Para esta métrica se tomó en cuenta el número de peticiones que la aplicación hace a través de la red y el tiempo en hacerlas. En la <xref ref-type="fig" rid="gf14">Figura 14</xref> se observa que la aplicación web tradicional realizó menos peticiones, en cambio, la PWA realizó más peticiones, estas provenían de la caché del disco, memoria y trabajador de servicio, por lo que su rendimiento fue mejor.</p>
<p>A pesar de que el almacenamiento en caché es el pilar principal para la escalabilidad web, este no debe descuidarse, ya que su uso indebido puede afectar al comportamiento de la aplicación con la pérdida de eficiencia y escalabilidad [<xref ref-type="bibr" rid="redalyc_344265925016_ref24">24</xref>].</p>
<p>
<fig id="gf14">
<label>Figura 14.</label>
<caption>
<title>Rendimiento de la aplicación web tradicional vs PWA.</title>
</caption>
<alt-text>Figura 14.  Rendimiento de la aplicación web tradicional vs PWA.</alt-text>
<graphic xlink:href="344265925016_gf15.png" position="anchor" orientation="portrait"/>
<attrib>Fuente: elaboración propia.</attrib>
</fig>
</p>
</sec>
</sec>
<sec>
<title>
<bold>3.2 Utilización de recursos</bold>
</title>
<sec>
<title>
<italic>3.2.1 Utilización de memoria</italic>
</title>
<p>En la <xref ref-type="fig" rid="gf15">Figura 15</xref> se observa que existió un elevado consumo de memoria en la PWA. Los trabajadores de servicio permiten a las PWA tener esa eficiencia que les caracteriza, sin embargo, cuando estos permanecían activos, el consumo de memoria fue incrementando; esto se da porque la PWA permanece ejecutando tareas en segundo plano.</p>
<p>
<fig id="gf15">
<label>Figura 15.</label>
<caption>
<title>Utilización de memoria de la aplicación web tradicional vs PWA.</title>
</caption>
<alt-text>Figura 15.  Utilización de memoria de la aplicación web tradicional vs PWA.</alt-text>
<graphic xlink:href="344265925016_gf16.png" position="anchor" orientation="portrait"/>
<attrib>Fuente: elaboración propia.</attrib>
</fig>
</p>
<p>Los resultados obtenidos en la PWA se obtuvieron con tres trabajadores de servicio activos, es por eso que el consumo se duplica y en ocasiones se triplica dependiendo el navegador donde se ejecute.</p>
</sec>
<sec>
<title>
<italic>3.2.2 Utilización del CPU</italic>
</title>
<p>En la <xref ref-type="fig" rid="gf16">Figura 16</xref> se observa que las aplicaciones tuvieron un comportamiento diferente con respecto al consumo del CPU, el consumo también dependió del tipo de navegador.</p>
<p>
<fig id="gf16">
<label>Figura 16.</label>
<caption>
<title>Utilización del CPU de la aplicación web tradicional vs PWA.</title>
</caption>
<alt-text>Figura 16.  Utilización del CPU de la aplicación web tradicional vs PWA.</alt-text>
<graphic xlink:href="344265925016_gf17.png" position="anchor" orientation="portrait"/>
<attrib>Fuente: elaboración propia.</attrib>
</fig>
</p>
<p>Para el desarrollo de aplicaciones, este tipo de consumo debe ser mínimo, ya que si el usuario sospecha que una aplicación le consume demasiados recursos terminara por desinstalarlo.</p>
</sec>
<sec>
<title>
<italic>3.2.3 Utilización de dispositivos de E/S</italic>
</title>
<p>Para esta métrica se tomó en cuenta el tiempo de espera y los tipos de almacenamiento en cada aplicación, la PWA y la aplicación web tradicional utilizaron la caché de disco y memoria, además, la PWA utilizó 3 trabajadores de servicio para el almacenamiento en la caché del navegador. En la <xref ref-type="fig" rid="gf17">Figura 17</xref> se muestra el comportamiento de las aplicaciones bajo esta métrica. La PWA tuvo un mejor desempeño en esta métrica ya que contaba con más dispositivos de E/S para su almacenamiento, no obstante, presentó un comportamiento diferente con respecto al almacenamiento en caché en los distintos navegadores. En la <xref ref-type="table" rid="gt11">Tabla 9 </xref>se observa el almacenamiento ocupado por esta aplicación.</p>
<p>
<fig id="gf17">
<label>Figura 17.</label>
<caption>
<title>Utilización de dispositivos de E/S de la aplicación web tradicional vs PWA</title>
</caption>
<alt-text>Figura 17.  Utilización de dispositivos de E/S de la aplicación web tradicional vs PWA</alt-text>
<graphic xlink:href="344265925016_gf18.png" position="anchor" orientation="portrait"/>
<attrib>Fuente: elaboración propia.</attrib>
</fig>
</p>
<p>
<table-wrap id="gt11">
<label>Tabla 9.</label>
<caption>
<title>Almacenamiento en caché ocupado por la PWA.</title>
</caption>
<alt-text>Tabla 9.  Almacenamiento en caché ocupado por la PWA.</alt-text>
<alternatives>
<graphic xlink:href="344265925016_gt11.png" position="anchor" orientation="portrait"/>
<table style="border-collapse:collapse;border:none;  " id="gt11-526564616c7963">
<tbody>
<tr style="   height:13.85pt">
<td style="width:120.5pt;border-top:solid #7F7F7F 1.0pt;   border-left:   none;border-bottom:solid #7F7F7F 1.0pt;   border-right:none;   padding:0cm 5.4pt 0cm 5.4pt;height:13.85pt">Navegador/<bold/> Almacenamiento</td>
<td style="width:63.8pt;border-top:solid #7F7F7F 1.0pt;   border-left:   none;border-bottom:solid #7F7F7F 1.0pt;   border-right:none;   padding:0cm 5.4pt 0cm 5.4pt;height:13.85pt">Chrome</td>
<td style="width:70.85pt;border-top:solid #7F7F7F 1.0pt;   border-left:   none;border-bottom:solid #7F7F7F 1.0pt;   border-right:none;   padding:0cm 5.4pt 0cm 5.4pt;height:13.85pt">Edge</td>
<td style="width:2.0cm;border-top:solid #7F7F7F 1.0pt;   border-left:   none;border-bottom:solid #7F7F7F 1.0pt;   border-right:none;   padding:0cm 5.4pt 0cm 5.4pt;height:13.85pt">Opera</td>
<td style="width:78.0pt;border-top:solid #7F7F7F 1.0pt;   border-left:   none;border-bottom:solid #7F7F7F 1.0pt;   border-right:none;   padding:0cm 5.4pt 0cm 5.4pt;height:13.85pt">Firefox</td>
</tr>
<tr style="height:14.35pt">
<td style="width:120.5pt;border:none;padding:0cm 5.4pt 0cm 5.4pt;height:14.35pt">Almacenamiento en caché</td>
<td style="width:63.8pt;border:none;padding:0cm 5.4pt 0cm 5.4pt;height:14.35pt">283 MB</td>
<td style="width:70.85pt;border:none;padding:0cm 5.4pt 0cm 5.4pt;height:14.35pt">322 MB</td>
<td style="width:2.0cm;border:none;padding:0cm 5.4pt 0cm 5.4pt;height:14.35pt">317 MB</td>
<td style="width:78.0pt;border:none;padding:0cm 5.4pt 0cm 5.4pt;height:14.35pt">52.48 MB</td>
</tr>
<tr style="height:13.85pt">
<td style="width:120.5pt;border:none;padding:0cm 5.4pt 0cm 5.4pt;   height:13.85pt">Trabajador de servicio</td>
<td style="width:63.8pt;border:none;padding:0cm 5.4pt 0cm 5.4pt;   height:13.85pt">3.9 kB</td>
<td style="width:70.85pt;border:none;padding:0cm 5.4pt 0cm 5.4pt;   height:13.85pt">3.9 kB</td>
<td style="width:2.0cm;border:none;padding:0cm 5.4pt 0cm 5.4pt;   height:13.85pt">3.9 kB</td>
<td style="width:78.0pt;border:none;padding:0cm 5.4pt 0cm 5.4pt;   height:13.85pt">1.8 kB</td>
</tr>
<tr style="height:6.5pt">
<td style="width:120.5pt;border:none;border-bottom:solid #7F7F7F 1.0pt;         padding:0cm 5.4pt 0cm 5.4pt;height:6.5pt">Archivos en caché</td>
<td style="width:63.8pt;border:none;border-bottom:solid #7F7F7F 1.0pt;         padding:0cm 5.4pt 0cm 5.4pt;height:6.5pt">102</td>
<td style="width:70.85pt;border:none;border-bottom:solid #7F7F7F 1.0pt;         padding:0cm 5.4pt 0cm 5.4pt;height:6.5pt">100</td>
<td style="width:2.0cm;border:none;border-bottom:solid #7F7F7F 1.0pt;         padding:0cm 5.4pt 0cm 5.4pt;height:6.5pt">100</td>
<td style="width:78.0pt;border:none;border-bottom:solid #7F7F7F 1.0pt;         padding:0cm 5.4pt 0cm 5.4pt;height:6.5pt">48</td>
</tr>
</tbody>
</table>
</alternatives>
<attrib>Fuente: elaboración propia.</attrib>
</table-wrap>
</p>
</sec>
</sec>
<sec>
<title>
<bold>3.3 Capacidad</bold>
</title>
<sec>
<title>
<italic>3.3.1 Número de peticiones en línea</italic>
</title>
<p>Al estar las dos aplicaciones con conexión a Internet, estas realizaban peticiones al servidor para cumplir con la funcionalidad propuesta, las dos aplicaciones obtuvieron resultados similares en esta métrica, aunque, en Firefox, las peticiones de la PWA fueron mínimas, ya que únicamente realizaron peticiones a los trabajadores de servicio y al servidor para guardar el pedido. En la <xref ref-type="fig" rid="gf18">Figura 18</xref> se muestra este comportamiento de las aplicaciones.</p>
<p>
<fig id="gf18">
<label>Figura 18.</label>
<caption>
<title>Número de peticiones en línea de la aplicación web tradicional vs PWA.</title>
</caption>
<alt-text>Figura 18.  Número de peticiones en línea de la aplicación web tradicional vs PWA.</alt-text>
<graphic xlink:href="344265925016_gf19.png" position="anchor" orientation="portrait"/>
<attrib>Fuente: elaboración propia.</attrib>
</fig>
</p>
</sec>
<sec>
<title>
<italic>3.3.2 Número de accesos simultáneos</italic>
</title>
<p>En la<xref ref-type="fig" rid="gf19"> Figura 19</xref> se observa que las aplicaciones presentaron resultados similares en los cuatro navegadores y las PWA trabajan de forma local por cada usuario, por lo que solo se evaluó a uno y se tomó en cuenta el tiempo de espera mencionado en las primeras métricas.</p>
<p>
<fig id="gf19">
<label>Figura 19.</label>
<caption>
<title>Número de accesos simultáneos de la aplicación web tradicional vs PWA</title>
</caption>
<alt-text>Figura 19. Número de accesos simultáneos de la aplicación web tradicional vs PWA</alt-text>
<graphic xlink:href="344265925016_gf20.png" position="anchor" orientation="portrait"/>
<attrib>Fuente: elaboración propia.</attrib>
</fig>
</p>
<p>Probablemente los resultados aumentarían equitativamente si se evalúan las aplicaciones con más de un usuario, aun así, esto dependerá de las configuraciones que tenga la aplicación a evaluar.</p>
</sec>
<sec>
<title>
<italic>3.3.3 Sistema de transmisión de ancho de banda</italic>
</title>
<p>En la <xref ref-type="fig" rid="gf20">Figura 20</xref> se observa que ambas aplicaciones transfirieron muy poca memoria a través de la red, sin embargo, el consumo de la PWA es ligeramente menor. Esto se da gracias a la caché de disco y memoria; si no existiera este tipo de caché, las aplicaciones web tradicionales tuvieran un rendimiento sumamente bajo, en cambio, las PWA no se ven afectadas, ya que su consumo proviene de la caché del navegador.</p>
<p>
<fig id="gf20">
<label>Figura 20.</label>
<caption>
<title>Cantidad de datos transferidos a través de la red de la aplicación web tradicional vs PWA</title>
</caption>
<alt-text>Figura 20.  Cantidad de datos transferidos a través de la red de la aplicación web tradicional vs PWA</alt-text>
<graphic xlink:href="344265925016_gf21.png" position="anchor" orientation="portrait"/>
<attrib>Fuente: elaboración propia.</attrib>
</fig>
</p>
<p>Con estos resultados se observa que ambas aplicaciones tienen distintos comportamientos en los navegadores utilizados. Se observa la eficiencia que presenta la PWA en métricas como: comportamiento en el tiempo y capacidad; la tecnología de los trabajadores de servicio permite que una PWA tenga ciertas ventajas con respecto a las webs tradicionales, tales como: funcionamiento similar a una aplicación nativa, navegación sin Internet y uso de sensores de los dispositivos, entre otros.</p>
<p>Los resultados mencionados deben ser tomados en cuenta por los desarrolladores web, ya que, si las configuraciones de la PWA no son adecuadas, estas podrían afectar al comportamiento de la aplicación [<xref ref-type="bibr" rid="redalyc_344265925016_ref24">24</xref>]; además, es importante considerar que cada usuario tendrá preferencias al ejecutar una aplicación web con respecto a los dispositivos y navegadores, por lo que se considera necesario poner a prueba una PWA en distintos escenarios antes de ponerla en producción.</p>
</sec>
</sec>
</sec>
<sec>
<title>
<bold>4. CONCLUSIONES</bold>
</title>
<p>Al finalizar la evaluación, los resultados muestran el comportamiento que tiene una PWA y una aplicación web tradicional bajo métricas de rendimiento y en navegadores compatibles con trabajadores de servicio. Estos datos permitirán a los desarrolladores web identificar la viabilidad que tiene el desarrollo con tecnología PWA y tomar precauciones con el almacenamiento en caché, ya que como se mencionó anteriormente, una mala configuración en los trabajadores de servicio puede ocasionar inestabilidad en el funcionamiento de la aplicación web.</p>
<p>Durante las pruebas de rendimiento se pudo verificar que una PWA no solo realizaba peticiones a los trabajadores de servicio, sino que también consultaba la caché de disco y memoria. Este consumo le dio un mejor rendimiento, si bien la ejecución de tareas en segundo plano generó un consumo mayor de recursos del computador. Una de las características que presenta la PWA es la de simular ser una aplicación nativa para brindarle una mejor experiencia al usuario, pese a ello, no todos los navegadores tienen el mismo soporte, por lo que esto puede limitar el funcionamiento multiplataforma.</p>
<p>Los trabajadores de servicio son archivos fundamentales para el funcionamiento de una PWA. Para esta aplicación su función fue interceptar, almacenar y responder con información del caché, aún así se pudo observar que la PWA también almacenaba en caché información personal del usuario, por lo que una mala configuración del trabajador de servicio comprometió esta información, afectando de esa manera la seguridad de la aplicación web.</p>
<p>Para finalizar se concluye que el rendimiento de una PWA variará dependiendo del tipo de configuración que presenten los trabajadores de servicio y de las herramientas de software que se utilicen para el desarrollo web; además, su comportamiento dependerá del tipo de dispositivo y navegador en el que se ejecute la aplicación. Estas y otras métricas deben ser consideradas por los desarrolladores web para que una PWA tenga un funcionamiento eficiente y pueda reemplazar a un desarrollo nativo, siendo este último uno de los principales objetivos de esta tecnología.</p>
</sec>
</body>
<back>
<ack>
<title>Agradecimientos</title>
<p>A la Universidad Técnica de Cotopaxi por promover la investigación científica y tecnológica. El artículo no está financiado por ninguna entidad.</p>
</ack>
<ref-list>
<title>REFERENCIAS</title>
<ref id="redalyc_344265925016_ref1">
<label>[1]</label>
<mixed-citation>[1] O. Pinzon, K. Rodríguez, “Ingeniería Web: Una Metodología para el Desarrollo de Aplicaciones Web Escalables y Sostenibles”, en <italic>The Fifteen LACCEI International Multi-Conference for Engineering, Education Technology, </italic>Boca Raton, Florida - US7ygthA, pp. 19–21, 2017. <ext-link ext-link-type="uri" xlink:href="http://www.laccei.org/LACCEI2017-BocaRaton/student_Papers/SP277.pdf">http://www.laccei.org/LACCEI2017-BocaRaton/student_Papers/SP277.pdf</ext-link>
</mixed-citation>
<element-citation publication-type="journal">
<person-group person-group-type="author">
<name>
<surname>Pinzon</surname>
<given-names>O.</given-names>
</name>
<name>
<surname>Rodríguez</surname>
<given-names>K.</given-names>
</name>
</person-group>
<article-title>Ingeniería Web: Una Metodología para el Desarrollo de Aplicaciones Web Escalables y Sostenibles</article-title>
<source>The Fifteen LACCEI International Multi-Conference for Engineering, Education Technology</source>
<year>2017</year>
</element-citation>
</ref>
<ref id="redalyc_344265925016_ref2">
<label>[2]</label>
<mixed-citation>[2] M. R. Valarezo Pardo, J. A. Honores Tapia, A. S. Gómez Moreno, L. F. Vinces Sánchez, “Comparación de tendencias tecnológicas en aplicaciones web”, <italic>3C Tecnología</italic>, vol. 7, no. 3, pp. 28–49, 2018. <ext-link ext-link-type="uri" xlink:href="http://dx.doi.org/10.17993/3ctecno.2018.v7n3e27.28-49/">http://dx.doi.org/10.17993/3ctecno.2018.v7n3e27.28-49/</ext-link>
</mixed-citation>
<element-citation publication-type="journal">
<person-group person-group-type="author">
<name>
<surname>Valarezo Pardo</surname>
<given-names>M. R.</given-names>
</name>
<name>
<surname>Honores Tapia</surname>
<given-names>J. A.</given-names>
</name>
<name>
<surname>Gómez Moreno</surname>
<given-names>A. S.</given-names>
</name>
<name>
<surname>Vinces Sánchez</surname>
<given-names>L. F.</given-names>
</name>
</person-group>
<article-title>Comparación de tendencias tecnológicas en aplicaciones web</article-title>
<source>3C Tecnología</source>
<year>2018</year>
</element-citation>
</ref>
<ref id="redalyc_344265925016_ref3">
<label>[3]</label>
<mixed-citation>[3] F. Shahzad, “Modern and Responsive Mobile-enabled Web Applications”, <italic>Procedia Comput. Sci.</italic>, vol. 110, pp. 410–415, 2017. http://dx.doi.org/10.1016/j.procs.2017.06.105</mixed-citation>
<element-citation publication-type="journal">
<person-group person-group-type="author">
<name>
<surname>Shahzad</surname>
<given-names>F.</given-names>
</name>
</person-group>
<article-title>Modern and Responsive Mobile-enabled Web Applications</article-title>
<source>Procedia Comput. Sci.</source>
<year>2017</year>
</element-citation>
</ref>
<ref id="redalyc_344265925016_ref4">
<label>[4]</label>
<mixed-citation>“Live Stats”, 2020. https://www.internetlivestats.com/</mixed-citation>
<element-citation publication-type="webpage">
<person-group person-group-type="author">
<collab>Live Stats</collab>
</person-group>
<source>https://www.internetlivestats.com/</source>
<year>2020</year>
</element-citation>
</ref>
<ref id="redalyc_344265925016_ref5">
<label>[5]</label>
<mixed-citation>[5] J. I. Xool-Clavel, H. F. Buenfil-Paredes, M. E. Dzul-Canche, “Desarrollo e implementación de un sistema web para el proceso de estadía”, <italic>Revista de Tecnologías de la Información y Comunicaciones</italic>, vol. 2, no. 3, pp. 8–19, Mar. 2018. <ext-link ext-link-type="uri" xlink:href="https://www.ecorfan.org/spain/researchjournals/Tecnologias_de_la_Informacion_y_Comunicaciones/vol2num3/Revista_de_Tecnologia_de_la_Informacion_y_Comunicaciones_V2_N3_2.pdf">https://www.ecorfan.org/spain/researchjournals/Tecnologias_de_la_Informacion_y_Comunicaciones/vol2num3/Revista_de_Tecnologia_de_la_Informacion_y_Comunicaciones_V2_N3_2.pdf</ext-link>
</mixed-citation>
<element-citation publication-type="journal">
<person-group person-group-type="author">
<name>
<surname>Xool-Clavel</surname>
<given-names>J. I.</given-names>
</name>
<name>
<surname>Buenfil-Paredes</surname>
<given-names>H. F.</given-names>
</name>
<name>
<surname>Dzul-Canche</surname>
<given-names>M. E.</given-names>
</name>
</person-group>
<article-title>Desarrollo e implementación de un sistema web para el proceso de estadía</article-title>
<source>Revista de Tecnologías de la Información y Comunicaciones</source>
<year>2018</year>
</element-citation>
</ref>
<ref id="redalyc_344265925016_ref6">
<label>[6]</label>
<mixed-citation>[6] V. Aguirre et al., “PWA para unificar el desarrollo Desktop, Web y Mobile”, en <italic>XXV Congreso Argentino de Ciencias de la Computación (CACIC),</italic> Córdoba, 2019, pp. 778–786. <ext-link ext-link-type="uri" xlink:href="http://sedici.unlp.edu.ar/handle/10915/90541">http://sedici.unlp.edu.ar/handle/10915/90541</ext-link>
</mixed-citation>
<element-citation publication-type="confproc">
<person-group person-group-type="author">
<name>
<surname>Aguirre</surname>
<given-names>V.</given-names>
</name>
</person-group>
<source>XXV Congreso Argentino de Ciencias de la Computación (CACIC)</source>
<year>2019</year>
</element-citation>
</ref>
<ref id="redalyc_344265925016_ref7">
<label>[7]</label>
<mixed-citation>[7] Mozilla and individual contributors, “Introducción a aplicaciones web progresivas”, 2020. <ext-link ext-link-type="uri" xlink:href="https://developer.mozilla.org/es/docs/Web/Progressive_web_apps/Introduction">https://developer.mozilla.org/es/docs/Web/Progressive_web_apps/Introduction</ext-link>
</mixed-citation>
<element-citation publication-type="webpage">
<person-group person-group-type="author">
<collab>Mozilla and individual contributors</collab>
</person-group>
<source>Introducción a aplicaciones web progresivas</source>
<year>2020</year>
</element-citation>
</ref>
<ref id="redalyc_344265925016_ref8">
<label>[8]</label>
<mixed-citation>[8] P. Loreto, J. Braga, H. Peixoto, J. Machado, A. Abelha, “Step towards progressive web development in obstetrics”,<italic> Procedia Comput. Sci.</italic>, vol. 141, pp. 525–530, 2018. <ext-link ext-link-type="uri" xlink:href="https://doi.org/10.1016/j.procs.2018.10.131">https://doi.org/10.1016/j.procs.2018.10.131</ext-link>
</mixed-citation>
<element-citation publication-type="journal">
<person-group person-group-type="author">
<name>
<surname>Loreto</surname>
<given-names>P.</given-names>
</name>
<name>
<surname>Braga</surname>
<given-names>J.</given-names>
</name>
<name>
<surname>Peixoto</surname>
<given-names>H.</given-names>
</name>
<name>
<surname>Machado</surname>
<given-names>J.</given-names>
</name>
<name>
<surname>Abelha</surname>
<given-names>A.</given-names>
</name>
</person-group>
<article-title>Step towards progressive web development in obstetrics</article-title>
<source>Procedia Comput.</source>
<year>2018</year>
</element-citation>
</ref>
<ref id="redalyc_344265925016_ref9">
<label>[9]</label>
<mixed-citation>[9] P. A. Roa, C. Morales, P. Gutiérrez, “Norma ISO/IEC 25000”, <italic>Tecnol. Investig. y Acad.</italic>, vol. 3, no. 2, pp. 26–32, Dec. 2015. https://revistas.udistrital.edu.co/index.php/tia/article/view/8373</mixed-citation>
<element-citation publication-type="journal">
<person-group person-group-type="author">
<name>
<surname>Roa</surname>
<given-names>P. A.</given-names>
</name>
<name>
<surname>Morales</surname>
<given-names>C.</given-names>
</name>
<name>
<surname>Gutiérrez</surname>
<given-names>P.</given-names>
</name>
</person-group>
<article-title>Norma ISO/IEC 25000</article-title>
<source>Tecnol. Investig. y Acad.</source>
<year>2015</year>
</element-citation>
</ref>
<ref id="redalyc_344265925016_ref10">
<label>[10]</label>
<mixed-citation>[10] ISO/IEC 25023, “Systems and software engineering — Systems and software Quality Requirements and Evaluation (SQuaRE) — Measurement of system and software product quality”, 2016. <ext-link ext-link-type="uri" xlink:href="https://www.iso.org/standard/35747.html">https://www.iso.org/standard/35747.html</ext-link>
</mixed-citation>
<element-citation publication-type="webpage">
<person-group person-group-type="author">
<collab>ISO/IEC 25023</collab>
</person-group>
<source>Systems and software engineering — Systems and software Quality Requirements and Evaluation (SQuaRE) — Measurement of system and software product quality</source>
<year>2016</year>
</element-citation>
</ref>
<ref id="redalyc_344265925016_ref11">
<label>[11]</label>
<mixed-citation>[11] ISO/IEC 25010, “Systems and software engineering — Systems and software Quality Requirements and Evaluation (SQuaRE) — System and software quality models”, 2011. <ext-link ext-link-type="uri" xlink:href="https://www.iso.org/standard/35733.html">https://www.iso.org/standard/35733.html</ext-link>
</mixed-citation>
<element-citation publication-type="webpage">
<person-group person-group-type="author">
<collab>ISO/IEC 25010</collab>
</person-group>
<source>Systems and software engineering — Systems and software Quality Requirements and Evaluation (SQuaRE) — System and software quality models</source>
<year>2011</year>
</element-citation>
</ref>
<ref id="redalyc_344265925016_ref12">
<label>[12]</label>
<mixed-citation>[12] ISO/IEC 25000, “Systems and software engineering — Systems and software Quality Requirements and Evaluation (SQuaRE) — Guide to SQuaRE”, 2014. <ext-link ext-link-type="uri" xlink:href="https://www.iso.org/standard/64764.html">https://www.iso.org/standard/64764.html</ext-link>
</mixed-citation>
<element-citation publication-type="webpage">
<person-group person-group-type="author">
<collab>ISO/IEC 25000</collab>
</person-group>
<source>Systems and software engineering — Systems and software Quality Requirements and Evaluation (SQuaRE) — Guide to SQuaRE</source>
<year>2014</year>
</element-citation>
</ref>
<ref id="redalyc_344265925016_ref13">
<label>[13]</label>
<mixed-citation>[13] L. G. Morrison et al., “Comparing usage of a web and app stress management intervention: An observational study”,<italic> Internet Interv.</italic>, vol. 12, pp. 74–82, Jun. 2018. <ext-link ext-link-type="uri" xlink:href="https://doi.org/10.1016/j.invent.2018.03.006">https://doi.org/10.1016/j.invent.2018.03.006</ext-link>
</mixed-citation>
<element-citation publication-type="journal">
<person-group person-group-type="author">
<name>
<surname>Morrison</surname>
<given-names>L. G.</given-names>
</name>
</person-group>
<article-title>Comparing usage of a web and app stress management intervention: An observational study</article-title>
<source>Internet Interv.</source>
<year>2018</year>
</element-citation>
</ref>
<ref id="redalyc_344265925016_ref14">
<label>[14]</label>
<mixed-citation>[14] S. Tandel, A. Jamadar, “Impact of Progressive Web Apps on Web App Development”, <italic>Int. J. Innov. Res. Sci. Eng. Technol.</italic>, vol. 7, no. 9, pp. 9439–9444, Sep. 2018. <ext-link ext-link-type="uri" xlink:href="https://www.researchgate.net/publication/330834334_Impact_of_Progressive_Web_Apps_on_Web_App_Development">https://www.researchgate.net/publication/330834334_Impact_of_Progressive_Web_Apps_on_Web_App_Development</ext-link>
</mixed-citation>
<element-citation publication-type="journal">
<person-group person-group-type="author">
<name>
<surname>Tandel</surname>
<given-names>S.</given-names>
</name>
<name>
<surname>Jamadar</surname>
<given-names>A.</given-names>
</name>
</person-group>
<article-title>Impact of Progressive Web Apps on Web App Development</article-title>
<source>Int. J. Innov. Res. Sci. Eng. Technol.</source>
<year>2018</year>
</element-citation>
</ref>
<ref id="redalyc_344265925016_ref15">
<label>[15]</label>
<mixed-citation>[15] A. Biørn-Hansen, T. A. Majchrzak, T. M. Grønli, “Progressive web apps: The possible web-native unifier for mobile development”, en <italic>Proceedings of the 13th International Conference on Web Information Systems and Technologies</italic>, Porto, 2017, pp. 344–351. <ext-link ext-link-type="uri" xlink:href="http://dx.doi.org/10.5220/0006353703440351">http://dx.doi.org/10.5220/0006353703440351</ext-link>
</mixed-citation>
<element-citation publication-type="confproc">
<person-group person-group-type="author">
<name>
<surname>Biørn-Hansen</surname>
<given-names>A.</given-names>
</name>
<name>
<surname>Majchrzak</surname>
<given-names>T. A.</given-names>
</name>
<name>
<surname>Grønli</surname>
<given-names>T. M.</given-names>
</name>
</person-group>
<source>Proceedings of the 13th International Conference on Web Information Systems and Technologies</source>
<year>2017</year>
</element-citation>
</ref>
<ref id="redalyc_344265925016_ref16">
<label>[16]</label>
<mixed-citation>[16] T. A. Majchrzak, A. Biørn-Hansen, T.-M. Grønli, “Progressive Web Apps: the Definite Approach to Cross-Platform Development?”, en <italic>Proceedings of the 51st Hawaii International Conference on System Sciences</italic>, Hawaii, 2018, pp. 5735–5744. <ext-link ext-link-type="uri" xlink:href="http://dx.doi.org/10.24251/HICSS.2018.718">http://dx.doi.org/10.24251/HICSS.2018.718</ext-link>
</mixed-citation>
<element-citation publication-type="confproc">
<person-group person-group-type="author">
<name>
<surname>Majchrzak</surname>
<given-names>T. A.</given-names>
</name>
<name>
<surname>Biørn-Hansen</surname>
<given-names>A.</given-names>
</name>
<name>
<surname>Grønli</surname>
<given-names>T.-M.</given-names>
</name>
</person-group>
<source>Proceedings of the 51st Hawaii International Conference on System Sciences</source>
<year>2018</year>
</element-citation>
</ref>
<ref id="redalyc_344265925016_ref17">
<label>[17]</label>
<mixed-citation>[17] ISO 25000, “La familia de normas ISO/IEC 25000”, s.f. <ext-link ext-link-type="uri" xlink:href="https://iso25000.com/index.php/normas-iso-25000">https://iso25000.com/index.php/normas-iso-25000</ext-link>
</mixed-citation>
<element-citation publication-type="webpage">
<person-group person-group-type="author">
<collab>ISO 25000</collab>
</person-group>
<source>La familia de normas ISO/IEC 25000</source>
<year>2014</year>
</element-citation>
</ref>
<ref id="redalyc_344265925016_ref18">
<label>[18]</label>
<mixed-citation>[18] A. J. Durán Sanjuán, J. L. Peinado Rodríguez, A. A. Rosado Gomez, “Comparación de dos tecnologías de desarrollo de aplicaciones móviles desde la perspectiva de los atributos de calidad”, <italic>Sci. Tech.</italic>, vol. 20, no. 1, pp. 81–87, Mar. 2015. <ext-link ext-link-type="uri" xlink:href="https://doi.org/10.22517/23447214.9278">https://doi.org/10.22517/23447214.9278</ext-link>
</mixed-citation>
<element-citation publication-type="journal">
<person-group person-group-type="author">
<name>
<surname>Durán Sanjuán</surname>
<given-names>A. J.</given-names>
</name>
<name>
<surname>Peinado Rodríguez</surname>
<given-names>J. L.</given-names>
</name>
<name>
<surname>Rosado Gomez</surname>
<given-names>A. A.</given-names>
</name>
</person-group>
<article-title>Comparación de dos tecnologías de desarrollo de aplicaciones móviles desde la perspectiva de los atributos de calidad</article-title>
<source>Sci. Tech.</source>
<year>2015</year>
</element-citation>
</ref>
<ref id="redalyc_344265925016_ref19">
<label>[19]</label>
<mixed-citation>[19] E. F. Maila Maila, “Evaluación de herramientas Open Source para pruebas de fiabilidad y rendimiento de aplicaciones web”, (Tesis de grado), Facultad de Ingeniería de Sistemas, Escuela Politécnica Nacional, 2018. <ext-link ext-link-type="uri" xlink:href="http://bibdigital.epn.edu.ec/handle/15000/19947">http://bibdigital.epn.edu.ec/handle/15000/19947</ext-link>
</mixed-citation>
<element-citation publication-type="thesis">
<person-group person-group-type="author">
<name>
<surname>Maila Maila</surname>
<given-names>E. F.</given-names>
</name>
</person-group>
<source>Evaluación de herramientas Open Source para pruebas de fiabilidad y rendimiento de aplicaciones web</source>
<year>2018</year>
</element-citation>
</ref>
<ref id="redalyc_344265925016_ref20">
<label>[20]</label>
<mixed-citation>[20] K. G. Rodriguez, O. J. Ortiz, A. I. Quiroz, M. L. Parrales, “El e-commerce y las Mipymes en tiempos de Covid-19”, <italic>Espacios,</italic> vol. 41, no. 42, pp. 100–118, 2020. <ext-link ext-link-type="uri" xlink:href="https://doi.org/10.48082/espacios-a20v41n42p09">https://doi.org/10.48082/espacios-a20v41n42p09</ext-link>
</mixed-citation>
<element-citation publication-type="journal">
<person-group person-group-type="author">
<name>
<surname>Rodriguez</surname>
<given-names>K. G.</given-names>
</name>
<name>
<surname>Ortiz</surname>
<given-names>O. J.</given-names>
</name>
<name>
<surname>Quiroz</surname>
<given-names>A. I.</given-names>
</name>
<name>
<surname>Parrales</surname>
<given-names>M. L.</given-names>
</name>
</person-group>
<article-title>El e-commerce y las Mipymes en tiempos de Covid-19</article-title>
<source>Espacios</source>
<year>2020</year>
</element-citation>
</ref>
<ref id="redalyc_344265925016_ref21">
<label>[21]</label>
<mixed-citation>[21] D. Palacios, J. Guamán, S. Contento, “Análisis del rendimiento de librerías de componentes Java Server Faces en el desarrollo de aplicaciones web”, <italic>Novasinergia Rev. Digit. Ciencia, Ing. Y Tecnol.</italic>, vol. 1, no. 2, pp. 54–59, 2018. https://doi.org/10.37135/unach.ns.001.02.06</mixed-citation>
<element-citation publication-type="journal">
<person-group person-group-type="author">
<name>
<surname>Palacios</surname>
<given-names>D.</given-names>
</name>
<name>
<surname>Guamán</surname>
<given-names>J.</given-names>
</name>
<name>
<surname>Contento</surname>
<given-names>S.</given-names>
</name>
</person-group>
<article-title>Análisis del rendimiento de librerías de componentes Java Server Faces en el desarrollo de aplicaciones web</article-title>
<source>Novasinergia Rev. Digit. Ciencia, Ing. Y Tecnol.</source>
<year>2018</year>
</element-citation>
</ref>
<ref id="redalyc_344265925016_ref22">
<label>[22]</label>
<mixed-citation>[22] J. Keith, “HTTPS + service worker + web app manifest = progressive web app”, 2018. <ext-link ext-link-type="uri" xlink:href="https://adactio.com/journal/13884">https://adactio.com/journal/13884</ext-link>
</mixed-citation>
<element-citation publication-type="webpage">
<person-group person-group-type="author">
<name>
<surname>Keith</surname>
<given-names>J.</given-names>
</name>
</person-group>
<source>HTTPS + service worker + web app manifest = progressive web app”.</source>
<year>2018</year>
</element-citation>
</ref>
<ref id="redalyc_344265925016_ref23">
<label>[23]</label>
<mixed-citation>[23] M. Santoni, “Las Progressive Web Apps: compatibilidad de las funcionalidades en función de los navegadores”, GoodBarber, 2018. <ext-link ext-link-type="uri" xlink:href="https://es.goodbarber.com/blog/las-progressive-web-apps-compatibilidad-de-las-funcionalidades-en-funcion-de-los-navegadores-a592/">https://es.goodbarber.com/blog/las-progressive-web-apps-compatibilidad-de-las-funcionalidades-en-funcion-de-los-navegadores-a592/</ext-link>
</mixed-citation>
<element-citation publication-type="webpage">
<person-group person-group-type="author">
<name>
<surname>Santoni</surname>
<given-names>M.</given-names>
</name>
</person-group>
<source>Las Progressive Web Apps: compatibilidad de las funcionalidades en función de los navegadores</source>
<year>2018</year>
</element-citation>
</ref>
<ref id="redalyc_344265925016_ref24">
<label>[24]</label>
<mixed-citation>[24] H. V. Nguyen, L. Lo Iacono, H. Federrath, “Systematic Analysis of Web Browser Caches”, WS.2 2018:<italic> Proceedings of the 2nd International Conference on Web Studies</italic>, Paris, 2018, pp. 64–71. <ext-link ext-link-type="uri" xlink:href="https://doi.org/10.1145/3240431.3240443">https://doi.org/10.1145/3240431.3240443</ext-link>
</mixed-citation>
<element-citation publication-type="confproc">
<person-group person-group-type="author">
<name>
<surname>Nguyen</surname>
<given-names>H. V.</given-names>
</name>
<name>
<surname>Iacono</surname>
<given-names>L. Lo</given-names>
</name>
<name>
<surname>Federrath</surname>
<given-names>H.</given-names>
</name>
</person-group>
<source>Systematic Analysis of Web Browser Caches</source>
<year>2018</year>
</element-citation>
</ref>
<ref id="redalyc_344265925016_ref25">
<label>[25]</label>
<mixed-citation>[25] Measurement Lab, “Test Your Speed”, 2021. <ext-link ext-link-type="uri" xlink:href="https://speed.measurementlab.net/#/">https://speed.measurementlab.net/#/</ext-link>
</mixed-citation>
<element-citation publication-type="webpage">
<person-group person-group-type="author">
<collab>Measurement Lab</collab>
</person-group>
<source>Test Your Speed</source>
<year>2021</year>
</element-citation>
</ref>
<ref id="redalyc_344265925016_ref26">
<label>[26]</label>
<mixed-citation>[26] Novabench, “Your computer at its best”, 2007. <ext-link ext-link-type="uri" xlink:href="https://novabench.com/">https://novabench.com/</ext-link>
</mixed-citation>
<element-citation publication-type="webpage">
<person-group person-group-type="author">
<collab>Novabench</collab>
</person-group>
<source>Your computer at its best</source>
<year>2007</year>
</element-citation>
</ref>
<ref id="redalyc_344265925016_ref27">
<label>[27]</label>
<mixed-citation>[27] A. Vykhodtsev, “Page load time”, 2021. https://chrome.google.com/webstore/detail/page-load-time/fploionmjgeclbkemipmkogoaohcdbig?hl=es</mixed-citation>
<element-citation publication-type="webpage">
<person-group person-group-type="author">
<name>
<surname>Vykhodtsev</surname>
<given-names>A.</given-names>
</name>
</person-group>
<source>Page load time</source>
<year>2021</year>
</element-citation>
</ref>
</ref-list>
<fn-group>
<title>Notas</title>
<fn id="fn12" fn-type="other">
<label>-</label>
<p>
<bold> CONFLICTOS DE INTERÉS </bold>
</p>
<p>Los autores no presentan conflictos de interés.</p>
</fn>
<fn id="fn13" fn-type="other">
<label>-</label>
<p>
<bold> CONTRIBUCIÓN DE LOS AUTORES </bold>
</p>
<p>Jhonatan Llamuca-Quinaloa: desarrollo de las dos versiones de aplicaciones web, ejecución de pruebas de rendimiento, análisis de resultados y redacción del documento.</p>
<p>Yasmani Vera-Vincent: desarrollo de las dos versiones de aplicaciones web, ejecución de pruebas de rendimiento, análisis de resultados y redacción del documento.</p>
<p>Verónica Tapia-Cerda: revisión y corrección del documento.</p>
</fn>
</fn-group>
</back>
</article>