The application I built uses these Firebase products for web apps:

Firebase Authentication to easily allow your users to sign into your app.

Cloud Firestore to save structured data on the cloud and get instant notification when data changes.

Cloud Storage for Firebase to save files in the cloud.

Firebase Hosting to host and serve your assets.

Firebase Cloud Messaging to send push notifications and display browser popup notifications; and

Firebase Performance Monitoring to collect user performance data for your app.

Instructions are available:

https://firebase.google.com/codelabs/firebase-web

I started by cloning the codelab-friendlychat-web repository

I created a Firebase project

https://console.firebase.google.com

Add a web app

I added a Firebase web app to the Firebase project

Enable Google sign-in for Firebase Authentication

To allow users to sign in to the web app with their Google accounts, I selected the Google sign-in method

Enable Cloud Firestore

The web app uses Cloud Firestore to save chat messages and receive new chat messages.

Enable Cloud Storage

The web app uses Cloud Storage for Firebase to store, upload, and share pictures.

Installing the Firebase command-line interface

npm install -g firebase-tools

firebase --version

firebase login

Run the starter app locally

firebase serve --only hosting

Import the Firebase SDK

I navigated to the web-start directory

I ran npm install to download the Firebase SDK

I ran npm run start to start Webpack.

Configure Firebase

I copied the config object snippet and added it to /web-start/src/firebase-config.js.

Authenticate users with Google Sign-In

In the app, when a user clicks the Sign in with Google button, the signIn function is triggered.

Add messages to Cloud Firestore

A user clicking the SEND button the app adds a message object to the Cloud Firestore. The add() method adds a new document with an automatically generated ID to the collection.

Synchronize messages

To read messages in the app, I added listeners that trigger when data changes and then create a UI element that shows new messages.

Save images to Cloud Storage

After selecting a file, the saveImageMessage function is called.

Add a Firebase Cloud Messaging service worker

The app will notify users when new messages are posted in the chat.

Get Firebase Cloud Messaging device tokens

When notifications have been enabled on a device or browser, you'll be given a device token. This device token is what we use to send a notification to a particular device or particular browser.

Request permissions to show notifications

When the user has not yet granted your app permission to show notifications, you won't be given a device token. In this case, we call the firebase.messaging().requestPermission() method, which will display a browser dialog asking for this permission ( in supported browsers).

Send a notification to your device

Now that you have your device token, you can send a notification using the Cloud Messaging tab of the Firebase console.

Database security rules

Cloud Firestore uses a specific rules language to define access rights, security, and data validations.

Storage security rules

Cloud Storage for Firebase uses a specific rules language to define access rights, security, and data validations.

Collect performance data

You can use the Performance Monitoring SDK to collect real-world performance data from your app and then review and analyze that data in the Firebase console.

Measure first input delay

First input delay starts when the user first interacts with an element on the page, like clicking a button or hyperlink. It stops immediately after the browser is able to respond to the input, meaning that the browser isn't busy loading or parsing your page's content.

Deploy the app using Firebase Hosting

I deployed the app files to Firebase Hosting using the Firebase CLI.

I needed to specify in the firebase.json file which local files should be deployed.