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

## Objective
At the bottom of this lesson is a copy of the Angular PWA we saw in the previous chapter. We will use it to test the Firebase commands and deploy our project to the Firebase platform.

 

## Create a Firebase project
Before proceeding further, we must create a new Firebase project using the [Firebase console](https://console.firebase.google.com/).

 

## Setup the Angular project

### Firebase config. object
As you previously learned, we need to add the configuration object to our project. This object contains all the keys required by Firebase to bind with our project.

The object keys look like the following (of course, your project will produce completely different values):

{
  apiKey: "SyAK3jHFQdpF7xS42AxJ7Gh2wSBChs2svvcJ",
  authDomain: "educative-pwa.firebaseapp.com",
  databaseURL: "https://educative-pwa.firebaseio.com",
  projectId: "educative-pwa",
  storageBucket: "educative-pwa.appspot.com",
  messagingSenderId: "3364045128815",
  appId: "1:3364045128815:web:h37d2810a4bdr99j14e251"
}

We are free to store the keys wherever we want in our project. For our demo, I stored them in a `firebaseConfig` object, inside the *environment.ts* and *environment.prod.ts* files (within the `src` folder). In the widget below, I omitted the keys related to unused features, like `storageBucket` or `databaseURL`, for instance. For your convenience, you can enter the values of your keys in the relative fields just above the widget. These values are then automatically taken inside the `firebaseConfig` object.

> ⚠️ **Note:** Never commit files with private keys to any public repository! 

 

### Import firebase packages
The `firebase` and `@angular/fire` dependencies are already downloaded in the widget and initialized in the `app.module.ts` file.

# Objective
At the bottom of this lesson is a copy of the Angular PWA we saw in the previous chapter. We will use it to test the Firebase commands and deploy our project to the Firebase platform.

 

# Create a Firebase project
Before proceeding further, we must create a new Firebase project using the [Firebase console](https://console.firebase.google.com/).

 

# Setup the Angular project

## Firebase config. object
As you previously learned, we need to add the configuration object to our project. This object contains all the keys required by Firebase to bind with our project.

The object keys look like the following (of course, your project will produce completely different values):

We are free to store the keys wherever we want in our project. For our demo, I stored them in a `firebaseConfig` object, inside the *environment.ts* and *environment.prod.ts* files (within the `src` folder). In the widget below, I omitted the keys related to unused features, like `storageBucket` or `databaseURL`, for instance. For your convenience, you can enter the values of your keys in the relative fields just above the widget. These values are then automatically taken inside the `firebaseConfig` object.

> ⚠️ **Note:** Never commit files with private keys to any public repository! 

 

## Import firebase packages
The `firebase` and `@angular/fire` dependencies are already downloaded in the widget and initialized in the `app.module.ts` file.

Practice what you learned in the previous lesson and deploy the PWA demo app in Firebase.

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

Deploy our PWA to Firebase

Objective

Create a Firebase project

Setup the Angular project

Firebase config. object