Food Festival

(Progressive Web Applications (PWA) project)

• Convert a web application to a PWA, optimize the app's assets for performance, set up webpack in a front-end project, and use service workers to cache assets for offline functionality.

Deployed Site

https://pamelac21.github.io/Food-Festival/

ISSUES

• Improve website load time
• Add offline functionality
• Allow users to download the application as if it were a phone app

skills:

• Use service workers to cache assets for offline functionality.

• Convert an existing web application to a PWA.

• Add a web manifest to your application.

NEW:

Identify performance bottlenecks in web applications.

Explain how performance can be measured in web applications.

Explain the five main categories measured in a Lighthouse audit.

Optimize CSS, JavaScript, and media assets for performance.

Set up webpack in a new front-end project.

Use service workers to cache assets for offline functionality.

Convert an existing web application to a PWA.

Deets:

To address these performance issues, Progressive Web Applications, or PWAs, blend the benefits of a traditional browser experience with those of a mobile application. PWAs can ensure applications work without an internet connection by using the Service Worker and Cache APIs to cache assets and API responses.

You’ll use Chrome DevTools and Google Lighthouse to measure web application performance. DevTools allows you to monitor network traffic and inspect the size of resources downloaded to the browser, like HTML, CSS, JavaScript, and images. Lighthouse provides a performance scoring system based on metrics like application bundle size, time to interaction, time to first meaningful paint, and more.

To deliver smaller application bundle sizes to the client, you'll perform several optimizations that involve compressing assets—from minifying JavaScript and CSS files to compressing images. You’ll also use a technique called lazy loading to defer loading certain assets until they're needed by the application.

We'll conclude with an overview of webpack, a module bundler for JavaScript. webpack simplifies front-end web development by automating many of the aforementioned optimizations.

Steps

Here is an example of a plan we can take:

Perform a high-level analysis of the app.

Deploy the app on GitHub Pages.

Investigate performance issues.

Run a Lighthouse audit.

Optimize files and assets.

Deploy the optimized application.