Gain insights into Progressive Web Apps. Delve into service workers, caching strategies, and their advantages. Learn about real-world Angular projects and deploying PWAs using Firebase. Optimize your web solutions efficiently.

angular.tar.gz

appId

authDomain

projectId

appKey

Angular-copy

Angular

Angular-deploy

Offline_page

Angular-prod-build

Progressive Web Applications are the state of modern web solutions. With the proper strategies, it is possible to drastically improve the overall performance and providing data even without a network connection. 
In an increasingly mobile-first world, optimising the time to load web pages can be our business's success. 

We will start by describing what PWAs are and their advantages over native and plain web applications. We then go deeper analysing fundamental concepts like service workers, caching strategies and when to use them in different scenarios. 

Aside from generic, framework-agnostic code samples, there will be an entire "hands-on" section dedicated to Angular, where we will create a complete, real-world PWA project from scratch.

Finally, we will learn how to deploy our PWAs to the cloud with different providers, describing in detail the approach with the Firebase platform. Thus, concluding our journey in the PWAs world.

Optimize your web projects with Progressive Web Apps

<br>

## What is Lighthouse?
Lighthouse is an excellent tool that is constantly evolving and upgrading its offered set of features. We can use it for auditing any web page, even if it requires authentication.

There are different audits categories we can choose from:

- Performance
- Accessibility
- SEO
- Best practices
- Progressive web apps

It is also possible to run Lighthouse in different contexts. The simplest one is from Chrome DevTools, but it is also possible from the command line or as a Node module.

Once the page analysis process is finished, the output becomes a series of audits, passed or not, providing warnings and suggestions based on best practices to improve our web app under different aspects. Each suggestion point comes with a reference to Google documentation about a topic so we can learn more details about it.

In this lesson, we will describe Lighthouse from the Chrome DevTools. This is the easiest way to analyze a PWA during and after we develop it.

<br>

## Lighthouse interface
Pressing the F12 key in Chrome opens the DevTools:
 



<br>

# What is Lighthouse?
Lighthouse is an excellent tool that is constantly evolving and upgrading its offered set of features. We can use it for auditing any web page, even if it requires authentication.

There are different audits categories we can choose from:

- Performance
- Accessibility
- SEO
- Best practices
- Progressive web apps

It is also possible to run Lighthouse in different contexts. The simplest one is from Chrome DevTools, but it is also possible from the command line or as a Node module.

Once the page analysis process is finished, the output becomes a series of audits, passed or not, providing warnings and suggestions based on best practices to improve our web app under different aspects. Each suggestion point comes with a reference to Google documentation about a topic so we can learn more details about it.

In this lesson, we will describe Lighthouse from the Chrome DevTools. This is the easiest way to analyze a PWA during and after we develop it.

<br>

# Lighthouse interface
Pressing the F12 key in Chrome opens the DevTools:
 



Lighthouse is a tool from Google that helps developers improve web applications quality. It offers an audit category for PWAs, providing focused suggestions.

Introduction

The Progressive Approach

Install a PWA on a Device

Service Workers

Caching Strategies

PWA Tools and Libraries

Angular PWA

Deploying our PWA

Wrap up

Google Lighthouse

What is Lighthouse?