Dynamic Caching Micro-frontends with Service Workers
Tegegne, Mesfin (2025)
2025
All rights reserved. This publication is copyrighted. You may download, display and print it for Your own personal use. Commercial use is prohibited.
Julkaisun pysyvä osoite on
https://urn.fi/URN:NBN:fi:amk-2025061623115
https://urn.fi/URN:NBN:fi:amk-2025061623115
Tiivistelmä
This thesis studies how service workers can work with micro-frontend architectures to improve web application performance through dynamic caching. The main goal is to help developers and small business owners, like Mon’adi Ravintola, create fast and reliable websites. It focuses on practical solutions for better user experience and offline functionality.
The study includes a case study where Mon’adi’s website was redesigned using React and TypeScript in a micro-frontend structure. Service workers were added to manage caching, which made the website load faster and work offline. Tools like Webpack 5 and performance metrics, such as Time to Interactive and First Contentful Paint, were used to measure improvements.
The theoretical section examines modern web development techniques, highlighting micro-frontend architectural concepts and the foundational elements of Progressive Web Applications, with particular attention to service workers and their associated caching mechanisms.
Findings indicate that integrating service workers within a micro-frontend architecture significantly enhances web application performance, achieving a 52% faster page load times and full offline support. The study concludes that adopting service workers in micro-frontend architectures offers substantial benefits, including improved performance and scalability. However, challenges such as implementation complexity and coordination between frontend modules are acknowledged.
The study includes a case study where Mon’adi’s website was redesigned using React and TypeScript in a micro-frontend structure. Service workers were added to manage caching, which made the website load faster and work offline. Tools like Webpack 5 and performance metrics, such as Time to Interactive and First Contentful Paint, were used to measure improvements.
The theoretical section examines modern web development techniques, highlighting micro-frontend architectural concepts and the foundational elements of Progressive Web Applications, with particular attention to service workers and their associated caching mechanisms.
Findings indicate that integrating service workers within a micro-frontend architecture significantly enhances web application performance, achieving a 52% faster page load times and full offline support. The study concludes that adopting service workers in micro-frontend architectures offers substantial benefits, including improved performance and scalability. However, challenges such as implementation complexity and coordination between frontend modules are acknowledged.