Progressive web applications Delivering native-like Performance

1. Progressive Web Applications:
Delivering Native-Like Performance
GUIDED BY,
Jithu johnson
Assistant Professor
Dept of Computer science
JPM ARTS AND SCIENCE COLLEGE
LABBAKADA
PRESENTED BY,
MELBIN ANTONY
210021089595

2. OVERVIEW
● PWA is a term for web-based applications that use the latest web technologies to provide a native app-like
experience.
● They are designed to work on any device or platform that uses a standards-compliant browser, including
desktop and mobile devices.
● These apps can be installed on a user's home screen, just like a native app, and can be accessed offline.
● PWAs are designed to be fast, reliable, and engaging, and can provide a better user experience than traditional
web applications.
● Progressive Web Apps use a combination of technologies, including Service Workers, App Shell, and Web
App Manifest, to provide features such as push notifications, background synchronization, and offline
support.
● PWAs are supported by major browsers, including Chrome, Firefox, and Safari, and are becoming
increasingly popular among developers and users alike.

3. INTRODUCTION
● Native Web involves using plain text files with HTML or XHTML instructions.
● Website technology has evolved to create responsive designs for various screen sizes.
● In 2016, a significant portion of web searches was done on mobile devices.
● Progressive Web Apps (PWAs) leverage modern web technologies to mimic native apps.
● The performance of PWAs, Native Web, and Mobile Web can be measured using tools like GTMetrix,
Lighthouse, and Chrome DevTools.

4. PWAs: Delivering Native-Like Experiences
● Service Workers: PWAs employ Service Workers, which are background scripts capable of managing tasks
such as caching, push notifications, and background synchronization.
● App Shell: PWA adopts an App Shell architecture, effectively decoupling the user interface from the content.
This separation enables swift loading and ensures a seamless user interaction.
● Offline Support: PWAs can operate offline through the utilization of Service Workers, which cache content
and ensure a smooth user experience even in the absence of an internet connection.
● Web App Manifest: PWAs rely on a Web App Manifest, a JSON file containing essential information about
the application, such as its name, icon, and theme color. This allows users to install the application on their
home screen and enjoy a native app-like experience.
● Responsive Design: PWA incorporates responsive design principles, enabling the application to dynamically
adjust to varying screen sizes and orientations.

5. DATA COLLECTION
● Data collection was performed using the newsapi.org API, gathering news data in JSON format, totaling 539
data points.
● The data collection process utilized the newsapi.org API Key for authentication.
● The collected data was subsequently employed to evaluate the performance of each simulation application.

6. TESTING TOOLS
● GTMetrix: Used to test and monitor your page's performance
● Lighthouse: Is automated tool for improving the performance, quality, and correctness of your web apps
● Chrome DevTools: Is a set of web developer tools built directly into the Google Chrome browser.

7. TESTING
● GTMetrix Testing
○ Parameters assessed: Page Speed, YSlow, Fully Loaded Time, Total Page Size, Number of Requests.
○ Testing conducted in sequential stages.
○ URL addresses of simulation applications entered for GTMetrix testing.
○ Measurement of performance based on GTMetrix site parameters.
○ Performance measurements scrutinized for each simulation application.

8. TESTING
● Lighthouse Testing
○ Parameters aligned with official Google Developer website guidelines.
○ Parameters include Performance, Accessibility, Best Practices, SEO, and PWA implementation.
○ Each parameter rated on a scale of 0-100.
○ Lighthouse testing initiated by entering simulation application URLs.
○ Lighthouse tool assigns individual scores for each parameter.
○ Overall score calculated as an average of all parameters.
■ 0-49: Considered slow (Red).
■ 50-89: Standard or average (Orange).
■ 90-100: Fast or very good (Green).

9. TESTING
● Chrome DevTools Testing
○ Conducted in stages or periodic assessments.
○ Utilized Chrome DevTools' Network Panel feature.
○ Displays file details: name, HTTP status, format, size, access time, and waterfall file display.
○ Chrome DevTools employed to gauge the number of file pages' impact, especially on PWA
performance.
○ Comprehensive analysis of Chrome DevTools testing findings.
○ Detailed examination of performance measurements for each simulated application.

10. RESULTS
● Results indicated compliance with PWA criteria, including secure https usage, add-to-home-screen
functionality, and offline accessibility.
● Across various testing scenarios, the simulation application demonstrated superior performance compared to
Native Web and Mobile Web counterparts.
● The advantage in performance became more evident with repeated testing.
● While the simulation application showed performance superiority, there was a slight performance gap
compared to other applications.
● The study offers valuable insights into the performance of different web-based applications.
● It underscores the potential of Progressive Web App technology to enhance web application performance.

11. CONCLUSION
● Advantages of PWA technology include faster response times, enhanced user experiences, and offline
accessibility.
● The potential of PWA for developing high-performance web-based applications capable of rivaling native
apps.
● Acknowledgment of performance disparities with native applications, particularly in areas like graphics and
animations.
● Study's contribution in providing valuable insights into web-based application performance.
● Emphasis on the potential of Progressive Web App technology within the web application landscape.

12. THANK YOU