{"id":26021097,"url":"https://github.com/omarheviaarbana/angular_progresive_web_app","last_synced_at":"2026-05-01T22:34:45.122Z","repository":{"id":271553304,"uuid":"913811522","full_name":"OmarHeviaArbana/Angular_Progresive_web_app","owner":"OmarHeviaArbana","description":"Progressive Web App (PWA) that consumes a public API","archived":false,"fork":false,"pushed_at":"2025-03-02T11:07:12.000Z","size":249,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-02T11:32:00.341Z","etag":null,"topics":["angular","angular-material","lighthouse-audits","manifest-json","pwa-apps","scss","service-worker","typescript"],"latest_commit_sha":null,"homepage":"https://dragonball-pwa.netlify.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/OmarHeviaArbana.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-01-08T11:55:58.000Z","updated_at":"2025-03-02T11:07:16.000Z","dependencies_parsed_at":"2025-01-10T05:57:13.328Z","dependency_job_id":null,"html_url":"https://github.com/OmarHeviaArbana/Angular_Progresive_web_app","commit_stats":null,"previous_names":["omarheviaarbana/angular_dragonball_pwa"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/OmarHeviaArbana/Angular_Progresive_web_app","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OmarHeviaArbana%2FAngular_Progresive_web_app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OmarHeviaArbana%2FAngular_Progresive_web_app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OmarHeviaArbana%2FAngular_Progresive_web_app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OmarHeviaArbana%2FAngular_Progresive_web_app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/OmarHeviaArbana","download_url":"https://codeload.github.com/OmarHeviaArbana/Angular_Progresive_web_app/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OmarHeviaArbana%2FAngular_Progresive_web_app/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":27553924,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-12-06T02:00:06.463Z","response_time":60,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular-material","lighthouse-audits","manifest-json","pwa-apps","scss","service-worker","typescript"],"created_at":"2025-03-06T08:33:27.554Z","updated_at":"2025-12-06T22:00:57.239Z","avatar_url":"https://github.com/OmarHeviaArbana.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Angular Progresive Web App Dragonball\n\n## Descripción\n\nProgressive Web App (PWA) que consume una api pública y que puede ser instalada en un dispositivo móvil como si fuera una aplicación nativa.\n\n## Link\n\nhttps://dragonball-pwa.netlify.app/\n\n## Funcionalidades\n\n- Configuración del fichero manifest.json es un fichero de configuración JSON el cual contiene información de la aplicación.\n- Integrar y modificar todo lo necesario del service worker para que pueda instalarse y funcionar sin internet, dando lugar al concepto de offline first web.\n- Estrategias de cache para que la apliación funcione en base a los recursos disponibles en cada momento.\n- Consumo de una API pública.\n- Utilizción de componentes de Angular Material para un listado y vista detalle.\n- Lighthouse es una herramienta para auditar la PWA y se genera un reporte completo.\n  \n\u003cbr\u003e\n  \n\u003cdiv align=\"center\"\u003e\n  \u003cimage style=\"box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; margin-bottom: 30px ; border-radius: 10px ; border: 20px solid white ; width: 300px\" src=\"src/assets/miniatura_one.png\" alt=\"Vista principal\"\u003e\n  \u003cimage style=\"box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; margin-bottom: 30px ; border-radius: 10px ; border: 20px solid white; width: 300px\" src=\"src/assets/miniatura_two.png\" alt=\"Vista listado\"\u003e\n  \u003cimage style=\"box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; margin-bottom: 30px ; border-radius: 10px ; border: 20px solid white; width: 300px\" src=\"src/assets/miniatura_three.png\" alt=\"Vista Detalle\"\u003e\n  \u003cimage style=\"box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; margin-bottom: 30px ; border-radius: 10px ; border: 20px solid white; width: 300px;\" src=\"src/assets/miniatura_five.png\" alt=\"App icon \"\u003e\n\u003c/div\u003e\n  \n## Informe Lighthouse\n\nLa herramienta LightHouse proporciona un análisis detallado del rendimiento, accesibilidad, mejores prácticas y SEO de una aplicación web.\n\nEl informe destaca áreas optimización bastante claras en términos de rendimiento, desde la mejora de recursos multimedia hasta la reducción de scripts innecesarios. Implementando estas mejoras, se pueden reducir significativamente los tiempos de carga y mejorar la experiencia del usuario.\n  \n#### First Contentful Paint (FCP)\n\nIndica cuánto tiempo transcurre hasta que el primer contenido es renderizado en pantalla. Un tiempo elevado afecta negativamente la percepción del usuario sobre la velocidad de carga. Esto es debido a recursos pesados como imágenes grandes y scripts no optimizados.\n\n#### Largest Contentful Paint (LCP)\n\nMide el tiempo hasta que el mayor elemento visible en pantalla (usualmente una imagen o texto destacado) está completamente renderizado. En este caso,  nos encontramos con LCP elevado (6940 ms), en parte debido a imágenes grandes sin precargar.\n\nEn este link se pueden ver los resultados y los puntos de mejora para próximos evolutivos y que son los siguientes: https://pagespeed.web.dev/analysis/https-dragonball-pwa-netlify-app/modgsu44hn?hl=es\u0026form_factor=mobile\n  \n\u003cimage style=\"box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; margin-bottom: 30px ; border-radius: 10px ; border: 20px solid white\" src=\"src/assets/miniatura_four.png\" alt=\"Detalle informe de rendimiento Lighthouse\"\u003e\n\n**Autor:** Omar Hevia Arbana\n**Fecha:** Diciembre 2024\n\n---\n\n# Angular Progresive Web App Dragonball\n\n## Description\n\nProgressive Web App (PWA) that consumes a public API and can be installed on a mobile device as if it were a native application.\n\n## Features\n\n- Configuration of the `manifest.json` file, a JSON configuration file that contains information about the application.\n- Integration and modification of everything necessary in the service worker to allow installation and offline functionality, following the offline-first web concept.\n- Caching strategies to ensure the application works based on the available resources at any given time.\n- Consumption of a public API.\n- Use of Angular Material components for a list and detail view.\n- Lighthouse is a tool for auditing the PWA, generating a complete report.\n\n## Lighthouse Report\n\nThe Lighthouse tool provides a detailed analysis of the performance, accessibility, best practices, and SEO of a web application.\n\nThe report highlights clear optimization areas in terms of performance, from improving multimedia resources to reducing unnecessary scripts. By implementing these improvements, loading times can be significantly reduced, enhancing the user experience.\n\n#### First Contentful Paint (FCP)\n\nIndicates how much time elapses until the first content is rendered on the screen. A high time negatively affects the user's perception of loading speed. This is due to heavy resources such as large images and unoptimized scripts.\n\n#### Largest Contentful Paint (LCP)\n\nMeasures the time until the largest visible element on the screen (usually an image or highlighted text) is fully rendered. In this case, we encounter a high LCP (6940 ms), partly due to large images that are not preloaded.\n\nAt this link, you can see the results and the improvement points for future updates:  \nhttps://pagespeed.web.dev/analysis/https-dragonball-pwa-netlify-app/modgsu44hn?hl=en\u0026form_factor=mobile\n\n**Author:** Omar Hevia Arbana\n**Date:** December 2024\n\n---\n\n## Development server\n\nRun `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.\n\n## Code scaffolding\n\nRun `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.\n\n## Build\n\nRun `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.\n\n## Running unit tests\n\nRun `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).\n\n## Running end-to-end tests\n\nRun `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.\n\n## Further help\n\nTo get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fomarheviaarbana%2Fangular_progresive_web_app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fomarheviaarbana%2Fangular_progresive_web_app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fomarheviaarbana%2Fangular_progresive_web_app/lists"}