本頁面由 Cloud Translation API 翻譯而成。

Switch to English

Firebase 網絡代碼實驗室

一、概述

在此 Codelab 中，您將學習如何使用Firebase通過使用 Firebase 產品和服務實施和部署聊天客戶端來輕鬆創建 Web 應用程序。

你會學到什麼

使用 Cloud Firestore 和 Cloud Storage for Firebase 同步數據。
使用 Firebase 身份驗證對您的用戶進行身份驗證。
在 Firebase 託管上部署您的網絡應用。
使用 Firebase 雲消息傳遞發送通知。
收集您的網絡應用程序的性能數據。

你需要什麼

您選擇的 IDE/文本編輯器，例如WebStorm 、 Atom 、 Sublime或VS Code
包管理器npm ，通常與Node.js一起提供
一個終端/控制台
您選擇的瀏覽器，例如 Chrome
codelab示例代碼（代碼獲取方式見codelab下一步）

2.獲取示例代碼

從命令行克隆代碼實驗室的GitHub 存儲庫：

git clone https://github.com/firebase/codelab-friendlychat-web

或者，如果您沒有安裝 git，您可以將存儲庫下載為 ZIP 文件。

導入入門應用

使用您的 IDE，從克隆的存儲庫中打開或導入 📁 web-start目錄。這個 📁 web-start目錄包含代碼實驗室的起始代碼，這將是一個功能齊全的聊天網絡應用程序。

3. 創建並設置一個 Firebase 項目

創建一個 Firebase 項目

登錄到Firebase 。
在 Firebase 控制台中，單擊添加項目，然後將您的 Firebase 項目命名為FriendlyChat 。記住您的 Firebase 項目的項目 ID。
取消選中為此項目啟用 Google Analytics
單擊創建項目。

我們要構建的應用程序使用可用於網絡應用程序的 Firebase 產品：

Firebase 身份驗證可讓您的用戶輕鬆登錄您的應用。
Cloud Firestore將結構化數據保存在雲端，並在數據發生變化時獲得即時通知。
Cloud Storage for Firebase用於將文件保存在雲端。
Firebase Hosting用於託管和服務您的資產。
Firebase Cloud Messaging發送推送通知和顯示瀏覽器彈出通知。
Firebase Performance Monitoring為您的應用收集用戶性能數據。

其中一些產品需要特殊配置或需要使用 Firebase 控制台啟用。

將 Firebase 網絡應用程序添加到項目

單擊網絡圖標創建一個新的 Firebase 網絡應用程序。
使用暱稱Friendly Chat註冊應用程序，然後選中Also set up Firebase Hosting for this app旁邊的框。單擊註冊應用程序。
在下一步中，您將看到一個配置對象。僅將 JS 對象（而不是周圍的 HTML）複製到firebase-config.js

註冊網絡應用截圖

為了允許用戶使用他們的 Google 帳戶登錄 Web 應用程序，我們將使用Google登錄方法。

您需要啟用Google登錄：

在 Firebase 控制台中，找到左側面板中的構建部分。
單擊Authentication ，然後單擊Sign-in method選項卡（或單擊此處直接轉到那裡）。
啟用Google登錄提供商，然後點擊保存。
將您的應用程序的面向公眾的名稱設置為Friendly Chat ，然後從下拉菜單中選擇項目支持電子郵件。
在Google Cloud Console中配置您的 OAuth 同意屏幕並添加徽標：

啟用 Cloud Firestore

該 Web 應用使用Cloud Firestore保存聊天消息和接收新的聊天消息。

您需要啟用 Cloud Firestore：

在 Firebase 控制台的構建部分中，單擊Firestore 數據庫。
單擊 Cloud Firestore 窗格中的創建數據庫。

選擇Start in test mode選項，然後在閱讀有關安全規則的免責聲明後單擊Next 。

測試模式保證了我們在開發過程中可以自由寫入數據庫。稍後在此 Codelab 中，我們將使我們的數據庫更加安全。

設置 Cloud Firestore 數據的存儲位置。您可以將其保留為默認值或選擇離您較近的區域。單擊“完成”以配置 Firestore。

啟用雲存儲

該 Web 應用程序使用 Cloud Storage for Firebase 來存儲、上傳和共享圖片。

您需要啟用雲存儲：

在 Firebase 控制台的構建部分中，單擊存儲。
如果沒有開始按鈕，則表示雲存儲已經啟用，您無需執行以下步驟。
單擊開始。
閱讀有關您的 Firebase 項目安全規則的免責聲明，然後單擊下一步。

使用默認安全規則，任何經過身份驗證的用戶都可以向 Cloud Storage 寫入任何內容。稍後在此 Codelab 中，我們將使我們的存儲更加安全。

預選的 Cloud Storage 位置與您為 Cloud Firestore 數據庫選擇的區域相同。單擊完成以完成設置。

4.安裝Firebase命令行界面

Firebase 命令行界面 (CLI) 允許您使用 Firebase 託管在本地為您的 Web 應用程序提供服務，以及將您的 Web 應用程序部署到您的 Firebase 項目。

通過運行以下 npm 命令安裝 CLI：

npm -g install firebase-tools

通過運行以下命令驗證 CLI 是否已正確安裝：

firebase --version

確保 Firebase CLI 的版本為 v4.1.0 或更高版本。

通過運行以下命令授權 Firebase CLI：

firebase login

我們已經設置了 Web 應用程序模板，以從應用程序的本地目錄（您之前在代碼實驗室中克隆的存儲庫）中提取應用程序的 Firebase 託管配置。但是要提取配置，我們需要將您的應用程序與您的 Firebase 項目相關聯。

確保您的命令行正在訪問您應用程序的本地web-start目錄。
通過運行以下命令將您的應用與 Firebase 項目相關聯：

firebase use --add

出現提示時，選擇您的Project ID ，然後為您的 Firebase 項目指定一個別名。

如果您有多個環境（生產、暫存等），別名很有用。但是，對於此 Codelab，我們只使用default的別名。

按照命令行上的其餘說明進行操作。

5. 在本地運行入門應用

現在您已經導入並配置了您的項目，您已準備好首次運行 Web 應用程序。

在web-start目錄的控制台中，運行以下 Firebase CLI 命令：

firebase serve --only hosting

您的命令行應顯示以下響應：

✔  hosting: Local server: http://localhost:5000

我們正在使用Firebase 託管模擬器在本地提供我們的應用程序。 Web 應用程序現在應該可以從http://localhost:5000獲得。提供位於public子目錄下的所有文件。

使用您的瀏覽器，在http://localhost:5000打開您的應用程序。

您應該會看到您的 FriendlyChat 應用程序的 UI，它（還沒有！）正在運行：

該應用程序現在無法執行任何操作，但在您的幫助下它很快就會執行！到目前為止，我們只為您佈置了 UI。

現在讓我們建立一個實時聊天！

6.導入並配置Firebase

導入 Firebase SDK

我們需要將 Firebase SDK 導入到應用程序中。如我們的文檔中所述，有多種方法可以做到這一點。例如，您可以從我們的 CDN 導入庫。或者您可以使用 npm 在本地安裝它，如果您使用 Browserify，則將其打包到您的應用程序中。

我們將從 npm 獲取 Firebase SDK 並使用Webpack來捆綁我們的代碼。我們這樣做是為了讓 Webpack 可以刪除任何不必要的代碼，使我們的 JS 包大小保持較小，以確保我們的應用程序盡快加載。對於此 Codelab，我們已經創建了一個包含 Firebase SDK 作為依賴項的web-start/package.json文件，並在web-start/src/index.js的頂部導入了所需的函數。

包.json

"dependencies": {
  "firebase": "^9.0.0"
}

索引.js

import { initializeApp } from 'firebase/app';
import {
  getAuth,
  onAuthStateChanged,
  GoogleAuthProvider,
  signInWithPopup,
  signOut,
} from 'firebase/auth';
import {
  getFirestore,
  collection,
  addDoc,
  query,
  orderBy,
  limit,
  onSnapshot,
  setDoc,
  updateDoc,
  doc,
  serverTimestamp,
} from 'firebase/firestore';
import {
  getStorage,
  ref,
  uploadBytesResumable,
  getDownloadURL,
} from 'firebase/storage';
import { getMessaging, getToken, onMessage } from 'firebase/messaging';
import { getPerformance } from 'firebase/performance';

在此 Codelab 中，我們將使用 Firebase Authentication、Cloud Firestore、Cloud Storage、Cloud Messaging 和 Performance Monitoring，因此我們將導入它們的所有庫。在您未來的應用程序中，請確保您只導入您需要的 Firebase 部分，以縮短應用程序的加載時間。

安裝 Firebase SDK 並開始構建 Webpack

我們需要運行一些命令來構建我們的應用程序。

打開一個新的終端窗口
讓運行firebase serve終端保持打開狀態。這仍然是我們將用來在本地託管應用程序的內容
確保你在web-start目錄中
運行npm install下載 Firebase SDK
運行npm run start以啟動 Webpack。 Webpack 現在將繼續為 Codelab 的其餘部分重建我們的源代碼。

配置火力地堡

我們還需要配置 Firebase SDK 以告知它我們正在使用哪個 Firebase 項目。

轉到Firebase 控制台中的項目設置
在“您的應用”卡片中，選擇您需要配置對象的應用的暱稱。
從 Firebase SDK 片段窗格中選擇“配置”。
複製配置對象片段，然後將其添加到web-start/src/firebase-config.js 。

firebase-config.js

const config = {
  apiKey: "API_KEY",
  authDomain: "PROJECT_ID.firebaseapp.com",
  databaseURL: "https://PROJECT_ID.firebaseio.com",
  projectId: "PROJECT_ID",
  storageBucket: "PROJECT_ID.appspot.com",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID",
  measurementId: "G-MEASUREMENT_ID",
};

現在，轉到web-start/src/index.js的底部並初始化 Firebase：

索引.js

const firebaseAppConfig = getFirebaseConfig();
initializeApp(firebaseAppConfig);

7.設置用戶登錄

Firebase SDK 現在應該可以使用了，因為它已在index.js中導入和初始化。我們現在要使用Firebase Authentication實現用戶登錄。

在應用程序中，當用戶單擊“使用 Google 登錄”按鈕時，會觸發signIn功能。（我們已經為您設置好！）對於此 Codelab，我們希望授權 Firebase 使用 Google 作為身份提供者。我們將使用彈出窗口，但 Firebase 提供了其他幾種方法。

在web-start目錄的子目錄src/中，打開index.js 。
找到函數signIn 。
用以下代碼替換整個函數。

索引.js

// Signs-in Friendly Chat.
async function signIn() {
  // Sign in Firebase using popup auth and Google as the identity provider.
  var provider = new GoogleAuthProvider();
  await signInWithPopup(getAuth(), provider);
}

signOut函數在用戶點擊Sign out按鈕時被觸發。

返回文件src/index.js 。
找到函數signOutUser 。
用以下代碼替換整個函數。

索引.js

// Signs-out of Friendly Chat.
function signOutUser() {
  // Sign out of Firebase.
  signOut(getAuth());
}

跟踪身份驗證狀態

要相應地更新我們的 UI，我們需要一種方法來檢查用戶是登錄還是註銷。使用 Firebase 身份驗證，您可以在身份驗證狀態上註冊觀察者，每次身份驗證狀態更改時都會觸發該觀察者。

返回文件src/index.js 。
找到函數initFirebaseAuth 。
用以下代碼替換整個函數。

索引.js

// Initialize firebase auth
function initFirebaseAuth() {
  // Listen to auth state changes.
  onAuthStateChanged(getAuth(), authStateObserver);
}

上面的代碼將函數authStateObserver註冊為身份驗證狀態觀察器。它會在每次身份驗證狀態更改時觸發（當用戶登錄或註銷時）。此時，我們將更新 UI 以顯示或隱藏登錄按鈕、註銷按鈕、已登錄用戶的個人資料圖片等。所有這些 UI 部分都已實現。

顯示登錄用戶的信息

我們想在我們應用的頂部欄中顯示登錄用戶的個人資料圖片和用戶名。在 Firebase 中，已登錄用戶的數據始終在currentUser對像中可用。早些時候，我們將authStateObserver函數設置為在用戶登錄時觸發，以便我們的 UI 相應更新。觸發時它將調用getProfilePicUrl和getUserName 。

返回文件src/index.js 。
找到函數getProfilePicUrl和getUserName 。
用以下代碼替換這兩個函數。

索引.js

// Returns the signed-in user's profile Pic URL.
function getProfilePicUrl() {
  return getAuth().currentUser.photoURL || '/images/profile_placeholder.png';
}

// Returns the signed-in user's display name.
function getUserName() {
  return getAuth().currentUser.displayName;
}

如果用戶在未登錄時嘗試發送消息，我們會顯示一條錯誤消息。（不過你可以試試！）因此，我們需要檢測用戶是否確實已登錄。

返回文件src/index.js 。
找到函數isUserSignedIn 。
用以下代碼替換整個函數。

索引.js

// Returns true if a user is signed-in.
function isUserSignedIn() {
  return !!getAuth().currentUser;
}

測試登錄應用程序

如果您的應用程序仍在提供服務，請在瀏覽器中刷新您的應用程序。否則，在命令行上運行firebase serve --only hosting以從http://localhost:5000開始為應用程序提供服務，然後在瀏覽器中打開它。
使用登錄按鈕和您的 Google 帳戶登錄應用程序。如果您看到一條錯誤消息，指出auth/operation-not-allowed ，請檢查以確保您在 Firebase 控制台中啟用了 Google Sign-in 作為身份驗證提供程序。
登錄後，應顯示您的個人資料圖片和用戶名：

8. 向 Cloud Firestore 寫入消息

在本部分中，我們將向 Cloud Firestore 寫入一些數據，以便我們可以填充應用的界面。這可以通過Firebase 控制台手動完成，但我們將在應用程序本身中完成，以演示基本的 Cloud Firestore 寫入。

數據模型

Cloud Firestore 數據分為集合、文檔、字段和子集合。我們將聊天的每條消息作為文檔存儲在名為messages的頂級集合中。

將消息添加到 Cloud Firestore

為了存儲用戶編寫的聊天消息，我們將使用Cloud Firestore 。

在本節中，您將為用戶添加將新消息寫入數據庫的功能。用戶點擊發送按鈕將觸發下面的代碼片段。它將包含消息字段內容的消息對象添加到messages集合中的 Cloud Firestore 實例。 add()方法將具有自動生成的 ID 的新文檔添加到集合中。

返回文件src/index.js 。
找到函數saveMessage 。
用以下代碼替換整個函數。

索引.js

// Saves a new message to Cloud Firestore.
async function saveMessage(messageText) {
  // Add a new message entry to the Firebase database.
  try {
    await addDoc(collection(getFirestore(), 'messages'), {
      name: getUserName(),
      text: messageText,
      profilePicUrl: getProfilePicUrl(),
      timestamp: serverTimestamp()
    });
  }
  catch(error) {
    console.error('Error writing new message to Firebase Database', error);
  }
}

測試發送消息

如果您的應用程序仍在提供服務，請在瀏覽器中刷新您的應用程序。否則，在命令行上運行firebase serve --only hosting以從http://localhost:5000開始為應用程序提供服務，然後在瀏覽器中打開它。
登錄後，輸入一條消息，例如“Hey there!”，然後單擊“發送” 。這會將消息寫入 Cloud Firestore。但是，您還不會在實際的 Web 應用程序中看到數據，因為我們仍然需要實現數據檢索（代碼實驗室的下一部分）。
您可以在 Firebase 控制台中看到新添加的消息。打開您的 Firebase 控制台。在構建部分下，單擊Firestore 數據庫（或單擊此處並選擇您的項目），您應該會看到包含新添加消息的消息集合：

9.閱讀消息

同步消息

要在應用程序中讀取消息，我們需要添加在數據更改時觸發的偵聽器，然後創建一個顯示新消息的 UI 元素。

我們將添加代碼來偵聽來自應用程序的新添加消息。在此代碼中，我們將註冊偵聽數據更改的偵聽器。我們將只顯示聊天的最後 12 條消息，以避免在加載時顯示很長的歷史記錄。

返回文件src/index.js 。
找到函數loadMessages 。
用以下代碼替換整個函數。

索引.js

// Loads chat messages history and listens for upcoming ones.
function loadMessages() {
  // Create the query to load the last 12 messages and listen for new ones.
  const recentMessagesQuery = query(collection(getFirestore(), 'messages'), orderBy('timestamp', 'desc'), limit(12));
  
  // Start listening to the query.
  onSnapshot(recentMessagesQuery, function(snapshot) {
    snapshot.docChanges().forEach(function(change) {
      if (change.type === 'removed') {
        deleteMessage(change.doc.id);
      } else {
        var message = change.doc.data();
        displayMessage(change.doc.id, message.timestamp, message.name,
                      message.text, message.profilePicUrl, message.imageUrl);
      }
    });
  });
}

為了監聽數據庫中的消息，我們通過使用collection函數來指定我們想要監聽的數據在哪個集合中來創建一個集合查詢。在上面的代碼中，我們正在監聽messages中的變化集合，這是存儲聊天消息的地方。我們還通過使用.limit(12)僅收聽最後 12 條消息並使用orderBy('timestamp', 'desc')按日期對消息進行排序來應用限制以獲取 12 條最新消息。

onSnapshot函數將查詢作為其第一個參數，並將回調函數作為其第二個參數。當與查詢匹配的文檔發生任何更改時，將觸發回調函數。如果消息被刪除、修改或添加，可能會出現這種情況。您可以在Cloud Firestore 文檔中閱讀更多相關信息。

測試同步消息

如果您的應用程序仍在提供服務，請在瀏覽器中刷新您的應用程序。否則，在命令行上運行firebase serve --only hosting以從http://localhost:5000開始為應用程序提供服務，然後在瀏覽器中打開它。
您之前創建到數據庫中的消息應該顯示在 FriendlyChat UI 中（見下文）。隨意寫新消息；他們應該立即出現。
（可選）您可以嘗試直接在 Firebase 控制台的數據庫部分手動刪除、修改或添加新消息；任何更改都應反映在用戶界面中。

恭喜！您正在您的應用中閱讀 Cloud Firestore 文檔！

10.發送圖片

我們現在將添加一個共享圖像的功能。

Cloud Firestore 適合存儲結構化數據，而 Cloud Storage 更適合存儲文件。 Cloud Storage for Firebase是一種文件/blob 存儲服務，我們將使用它來存儲用戶使用我們的應用程序共享的任何圖像。

將圖像保存到雲存儲

對於此 Codelab，我們已經為您添加了一個可觸發文件選擇器對話框的按鈕。選擇文件後，調用saveImageMessage函數，可以獲取到所選文件的引用。 saveImageMessage函數完成以下操作：

在聊天提要中創建“佔位符”聊天消息，以便用戶在我們上傳圖片時看到“正在加載”動畫。
將圖像文件上傳到雲存儲到此路徑： /<uid>/<messageId>/<file_name>
為圖像文件生成一個公開可讀的 URL。
使用新上傳的圖像文件的 URL 代替臨時加載圖像更新聊天消息。

現在您將添加發送圖像的功能：

返回文件src/index.js 。
找到函數saveImageMessage 。
用以下代碼替換整個函數。

索引.js

// Saves a new message containing an image in Firebase.
// This first saves the image in Firebase storage.
async function saveImageMessage(file) {
  try {
    // 1 - We add a message with a loading icon that will get updated with the shared image.
    const messageRef = await addDoc(collection(getFirestore(), 'messages'), {
      name: getUserName(),
      imageUrl: LOADING_IMAGE_URL,
      profilePicUrl: getProfilePicUrl(),
      timestamp: serverTimestamp()
    });

    // 2 - Upload the image to Cloud Storage.
    const filePath = `${getAuth().currentUser.uid}/${messageRef.id}/${file.name}`;
    const newImageRef = ref(getStorage(), filePath);
    const fileSnapshot = await uploadBytesResumable(newImageRef, file);
    
    // 3 - Generate a public URL for the file.
    const publicImageUrl = await getDownloadURL(newImageRef);

    // 4 - Update the chat message placeholder with the image's URL.
    await updateDoc(messageRef,{
      imageUrl: publicImageUrl,
      storageUri: fileSnapshot.metadata.fullPath
    });
  } catch (error) {
    console.error('There was an error uploading a file to Cloud Storage:', error);
  }
}

測試發送圖片

如果您的應用程序仍在提供服務，請在瀏覽器中刷新您的應用程序。否則，在命令行上運行firebase serve --only hosting以從http://localhost:5000開始為應用程序提供服務，然後在瀏覽器中打開它。
登錄後點擊圖片上傳按鈕並使用文件選擇器選擇圖像文件。如果您正在尋找圖片，請隨意使用這張漂亮的咖啡杯圖片。
一條新消息應該會出現在應用程序的 UI 中，其中包含您選擇的圖片：

如果您嘗試在未登錄的情況下添加圖像，您應該會看到一條 Toast 通知，告訴您必須登錄才能添加圖像。

11.顯示通知

我們現在將添加對瀏覽器通知的支持。該應用程序將在聊天中發布新消息時通知用戶。 Firebase 雲消息傳遞(FCM) 是一種跨平台消息傳遞解決方案，可讓您免費可靠地傳遞消息和通知。

添加 FCM 服務工作者

Web 應用程序需要一個service worker來接收和顯示 web 通知。

在web-start目錄的src目錄中，打開firebase-messaging-sw.js 。
將以下內容添加到該文件。

firebase-messaging-sw.js

// Import and configure the Firebase SDK
import { initializeApp } from 'firebase/app';
import { getMessaging } from 'firebase/messaging/sw';
import { getFirebaseConfig } from './firebase-config';

const firebaseApp = initializeApp(getFirebaseConfig());
getMessaging(firebaseApp);
console.info('Firebase messaging service worker is set up');

Service Worker 只需加載和初始化 Firebase Cloud Messaging SDK，它將負責顯示通知。

獲取 FCM 設備令牌

在設備或瀏覽器上啟用通知後，您將獲得一個設備令牌。這個設備令牌是我們用來向特定設備或特定瀏覽器發送通知的。

當用戶登錄時，我們調用saveMessagingDeviceToken函數。這就是我們從瀏覽器獲取FCM 設備令牌並將其保存到 Cloud Firestore 的地方。

返回文件src/index.js 。
找到函數saveMessagingDeviceToken 。
用以下代碼替換整個函數。

索引.js

// Saves the messaging device token to Cloud Firestore.
async function saveMessagingDeviceToken() {
  try {
    const currentToken = await getToken(getMessaging());
    if (currentToken) {
      console.log('Got FCM device token:', currentToken);
      // Saving the Device Token to Cloud Firestore.
      const tokenRef = doc(getFirestore(), 'fcmTokens', currentToken);
      await setDoc(tokenRef, { uid: getAuth().currentUser.uid });

      // This will fire when a message is received while the app is in the foreground.
      // When the app is in the background, firebase-messaging-sw.js will receive the message instead.
      onMessage(getMessaging(), (message) => {
        console.log(
          'New foreground notification from Firebase Messaging!',
          message.notification
        );
      });
    } else {
      // Need to request permissions to show notifications.
      requestNotificationsPermissions();
    }
  } catch(error) {
    console.error('Unable to get messaging token.', error);
  };
}

但是，此代碼最初不起作用。為了讓您的應用能夠檢索設備令牌，用戶需要授予您的應用顯示通知的權限（代碼實驗室的下一步）。

請求顯示通知的權限

當用戶尚未授予您的應用程序顯示通知的權限時，您將不會獲得設備令牌。在這種情況下，我們調用firebase.messaging().requestPermission()方法，這將顯示一個瀏覽器對話框，請求此權限（在支持的瀏覽器中）。

返回文件src/index.js 。
找到函數requestNotificationsPermissions 。
用以下代碼替換整個函數。

索引.js

// Requests permissions to show notifications.
async function requestNotificationsPermissions() {
  console.log('Requesting notifications permission...');
  const permission = await Notification.requestPermission();
  
  if (permission === 'granted') {
    console.log('Notification permission granted.');
    // Notification permission granted.
    await saveMessagingDeviceToken();
  } else {
    console.log('Unable to get permission to notify.');
  }
}

獲取您的設備令牌

如果您的應用程序仍在提供服務，請在瀏覽器中刷新您的應用程序。否則，在命令行上運行firebase serve --only hosting以從http://localhost:5000開始為應用程序提供服務，然後在瀏覽器中打開它。
登錄後，應出現通知權限對話框：
單擊允許。
打開瀏覽器的 JavaScript 控制台。您應該看到以下消息： Got FCM device token: cWL6w:APA91bHP...4jDPL_A-wPP06GJp1OuekTaTZI5K2Tu
複製您的設備令牌。您將在 Codelab 的下一階段需要它。

向您的設備發送通知

現在您有了設備令牌，您可以發送通知。

打開Firebase 控制台的雲消息傳遞選項卡。
點擊“新通知”
輸入通知標題和通知文本。
在屏幕右側，單擊“發送測試消息”
輸入您從瀏覽器的 JavaScript 控制台複製的設備令牌，然後單擊加號 ("+")
點擊“測試”

如果您的應用程序在前台，您將在 JavaScript 控制台中看到通知。

如果您的應用程序在後台運行，則您的瀏覽器中應該會出現一條通知，如下例所示：

12. Cloud Firestore 安全規則

查看數據庫安全規則

Cloud Firestore 使用特定的規則語言來定義訪問權限、安全性和數據驗證。

在本 Codelab 開始時設置 Firebase 項目時，我們選擇使用“測試模式”默認安全規則，這樣我們就不會限制對數據存儲的訪問。在Firebase 控制台的數據庫部分的規則選項卡中，您可以查看和修改這些規則。

現在，您應該會看到默認規則，這些規則不限制對數據存儲的訪問。這意味著任何用戶都可以讀取和寫入數據存儲中的任何集合。

rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write;
    }
  }
}

我們將使用以下規則更新規則以限制事物：

firestore.規則

rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {
    // Messages:
    //   - Anyone can read.
    //   - Authenticated users can add and edit messages.
    //   - Validation: Check name is same as auth token and text length below 300 char or that imageUrl is a URL.
    //   - Deletes are not allowed.
    match /messages/{messageId} {
      allow read;
      allow create, update: if request.auth != null
                    && request.resource.data.name == request.auth.token.name
                    && (request.resource.data.text is string
                      && request.resource.data.text.size() <= 300
                      || request.resource.data.imageUrl is string
                      && request.resource.data.imageUrl.matches('https?://.*'));
      allow delete: if false;
    }
    // FCM Tokens:
    //   - Anyone can write their token.
    //   - Reading list of tokens is not allowed.
    match /fcmTokens/{token} {
      allow read: if false;
      allow write;
    }
  }
}

更新數據庫安全規則

有兩種方法可以編輯數據庫安全規則，一種是在 Firebase 控制台中，另一種是使用 Firebase CLI 部署的本地規則文件。

要在 Firebase 控制台中更新安全規則：

從左側面板轉到數據庫部分，然後單擊規則選項卡。
用上面顯示的規則替換控制台中已有的默認規則。
單擊發布。

從本地文件更新安全規則：

在web-start目錄中，打開firestore.rules 。
用上面顯示的規則替換文件中已有的默認規則。
在web-start目錄中，打開firebase.json 。
添加指向firestore.rules firestore.rules屬性，如下所示。（ hosting屬性應該已經在文件中。）

firebase.json

{
  // Add this!
  "firestore": {
    "rules": "firestore.rules"
  },
  "hosting": {
    "public": "./public"
  }
}

通過運行以下命令使用 Firebase CLI 部署安全規則：

firebase deploy --only firestore

您的命令行應顯示以下響應：

=== Deploying to 'friendlychat-1234'...

i  deploying firestore
i  firestore: checking firestore.rules for compilation errors...
✔  firestore: rules file firestore.rules compiled successfully
i  firestore: uploading rules firestore.rules...
✔  firestore: released rules firestore.rules to cloud.firestore

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview

13.雲存儲安全規則

查看 Cloud Storage 安全規則

Cloud Storage for Firebase 使用特定的規則語言來定義訪問權限、安全性和數據驗證。

在本 Codelab 開始時設置 Firebase 項目時，我們選擇使用默認的 Cloud Storage 安全規則，該規則僅允許經過身份驗證的用戶使用 Cloud Storage。在Firebase 控制台中，在存儲部分的規則選項卡中，您可以查看和修改規則。您應該會看到默認規則，該規則允許任何登錄用戶讀取和寫入存儲桶中的任何文件。

rules_version = '2';

service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if request.auth != null;
    }
  }
}

我們將更新規則以執行以下操作：

允許每個用戶只寫入他們自己的特定文件夾
允許任何人讀取 Cloud Storage
確保上傳的文件是圖片
將可上傳的圖像大小限制為最大 5 MB

這可以使用以下規則來實現：

存儲規則

rules_version = '2';

// Returns true if the uploaded file is an image and its size is below the given number of MB.
function isImageBelowMaxSize(maxSizeMB) {
  return request.resource.size < maxSizeMB * 1024 * 1024
      && request.resource.contentType.matches('image/.*');
}

service firebase.storage {
  match /b/{bucket}/o {
    match /{userId}/{messageId}/{fileName} {
      allow write: if request.auth != null && request.auth.uid == userId && isImageBelowMaxSize(5);
      allow read;
    }
  }
}

更新 Cloud Storage 安全規則

有兩種方法可以編輯您的存儲安全規則：在 Firebase 控制台中或從使用 Firebase CLI 部署的本地規則文件中。

要在 Firebase 控制台中更新安全規則：

從左側面板轉到“存儲”部分，然後單擊“規則”選項卡。
用上面顯示的規則替換控制台中已有的默認規則。
單擊發布。

從本地文件更新安全規則：

在web-start目錄中，打開storage.rules 。
用上面顯示的規則替換文件中已有的默認規則。
在web-start目錄中，打開firebase.json 。
添加指向storage.rules文件的storage.rules屬性，如下所示。（ hosting和database屬性應該已經在文件中。）

firebase.json

{
  // If you went through the "Cloud Firestore Security Rules" step.
  "firestore": {
    "rules": "firestore.rules"
  },
  // Add this!
  "storage": {
    "rules": "storage.rules"
  },
  "hosting": {
    "public": "./public"
  }
}

通過運行以下命令使用 Firebase CLI 部署安全規則：

firebase deploy --only storage

您的命令行應顯示以下響應：

=== Deploying to 'friendlychat-1234'...

i  deploying storage
i  storage: checking storage.rules for compilation errors...
✔  storage: rules file storage.rules compiled successfully
i  storage: uploading rules storage.rules...
✔  storage: released rules storage.rules to firebase.storage/friendlychat-1234.appspot.com

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview

14.收集性能數據

您可以使用 Performance Monitoring SDK 從您的應用程序收集真實的性能數據，然後在 Firebase 控制台中查看和分析該數據。性能監控可幫助您了解可以在何處以及何時改進應用程序的性能，以便您可以使用該信息來解決性能問題。

可以通過多種方式與 Firebase Performance Monitoring JavaScript SDK 集成。在此 Codelab 中，我們從託管 URL啟用了性能監控。請參閱文檔以查看啟用 SDK 的其他方法。

自動痕跡

由於我們已經在web-start/src/index.js的頂部導入了getPerformance ，我們只需要添加一行來告訴性能監控在用戶訪問您部署的站點時自動為您收集頁面負載和網絡請求指標！

在web-start/src/index.js中，在現有TODO下方添加以下行以初始化性能監控。

索引.js

// TODO: Enable Firebase Performance Monitoring.
getPerformance();

測量第一個輸入延遲（可選）

首次輸入延遲很有用，因為瀏覽器對用戶交互的響應給了用戶對應用程序響應能力的第一印象。

首次輸入延遲在用戶首次與頁面上的元素交互時開始，例如單擊按鈕或超鏈接。它在瀏覽器能夠響應輸入後立即停止，這意味著瀏覽器不忙於加載或解析您的頁面內容。

如果您想測量第一個輸入延遲，則需要直接包含以下代碼。

打開public/index.html 。
取消註釋以下行中的script標記。

索引.html

<!-- TODO: Enable First Input Delay polyfill library. -->
<script type="text/javascript">!function(n,e){var t,o,i,c=[],f={passive:!0,capture:!0},r=new Date,a="pointerup",u="pointercancel";function p(n,c){t||(t=c,o=n,i=new Date,w(e),s())}function s(){o>=0&&o<i-r&&(c.forEach(function(n){n(o,t)}),c=[])}function l(t){if(t.cancelable){var o=(t.timeStamp>1e12?new Date:performance.now())-t.timeStamp;"pointerdown"==t.type?function(t,o){function i(){p(t,o),r()}function c(){r()}function r(){e(a,i,f),e(u,c,f)}n(a,i,f),n(u,c,f)}(o,t):p(o,t)}}function w(n){["click","mousedown","keydown","touchstart","pointerdown"].forEach(function(e){n(e,l,f)})}w(n),self.perfMetrics=self.perfMetrics||{},self.perfMetrics.onFirstInputDelay=function(n){c.push(n),s()}}(addEventListener,removeEventListener);</script>

要閱讀有關第一個輸入延遲 polyfill 的更多信息，請查看文檔。

查看性能數據

由於您尚未部署您的網站（您將在下一步部署它），下面是一張屏幕截圖，其中顯示了在用戶與您部署的網站交互後 30 分鐘內您將在 Firebase 控制台中看到的有關頁面加載性能的指標:

當您將性能監控 SDK 集成到您的應用程序中時，您無需編寫任何其他代碼，您的應用程序就會開始自動監控性能的幾個關鍵方面。對於 Web 應用程序，SDK 會記錄諸如首次內容繪製、用戶與您的應用程序交互的能力等方面。

您還可以設置自定義跟踪、指標和屬性來衡量應用程序的特定方面。訪問文檔以了解有關自定義跟踪和指標以及自定義屬性的更多信息。

15. 使用 Firebase 託管部署您的應用

Firebase 提供託管服務來為您的資產和網絡應用提供服務。您可以使用 Firebase CLI 將文件部署到 Firebase 託管。在部署之前，您需要在firebase.json文件中指定應部署哪些本地文件。對於此 Codelab，我們已經為您完成了此操作，因為在此 Codelab 期間需要此步驟來提供我們的文件。託管設置在hosting屬性下指定：

firebase.json

{
  // If you went through the "Cloud Firestore Security Rules" step.
  "firestore": {
    "rules": "firestore.rules"
  },
  // If you went through the "Storage Security Rules" step.
  "storage": {
    "rules": "storage.rules"
  },
  "hosting": {
    "public": "./public"
  }
}

這些設置告訴 CLI 我們要部署./public目錄中的所有文件 ( "public": "./public" )。

確保您的命令行正在訪問您應用程序的本地web-start目錄。
通過運行以下命令將文件部署到 Firebase 項目：

firebase deploy --except functions

控制台應顯示以下內容：

=== Deploying to 'friendlychat-1234'...

i  deploying firestore, storage, hosting
i  storage: checking storage.rules for compilation errors...
✔  storage: rules file storage.rules compiled successfully
i  firestore: checking firestore.rules for compilation errors...
✔  firestore: rules file firestore.rules compiled successfully
i  storage: uploading rules storage.rules...
i  firestore: uploading rules firestore.rules...
i  hosting[friendlychat-1234]: beginning deploy...
i  hosting[friendlychat-1234]: found 8 files in ./public
✔  hosting[friendlychat-1234]: file upload complete
✔  storage: released rules storage.rules to firebase.storage/friendlychat-1234.appspot.com
✔  firestore: released rules firestore.rules to cloud.firestore
i  hosting[friendlychat-1234]: finalizing version...
✔  hosting[friendlychat-1234]: version finalized
i  hosting[friendlychat-1234]: releasing new version...
✔  hosting[friendlychat-1234]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview
Hosting URL: https://friendlychat-1234.firebaseapp.com

在您自己的兩個 Firebase 子域中使用 Firebase 託管訪問您現在完全託管在全球 CDN 上的 Web 應用程序：

https://<firebase-projectId>.firebaseapp.com
https://<firebase-projectId>.web.app

或者，您可以在命令行中運行firebase open hosting:site 。

訪問文檔以了解有關 Firebase Hosting 工作原理的更多信息。

轉到項目的 Firebase 控制台託管部分，查看有用的託管信息和工具，包括部署歷史、回滾到應用程序以前版本的功能，以及設置自定義域的工作流程。

16. 恭喜！

您已經使用 Firebase 構建了一個實時聊天網絡應用程序！

我們涵蓋的內容

Firebase 身份驗證
雲端 Firestore
用於雲存儲的 Firebase SDK
Firebase 雲消息傳遞
Firebase 性能監控
火力地堡託管

下一步

Learn more

firebase.google.com

Firebase 網絡代碼實驗室

一、概述

你會學到什麼

你需要什麼

2.獲取示例代碼

導入入門應用

3. 創建並設置一個 Firebase 項目

創建一個 Firebase 項目

將 Firebase 網絡應用程序添加到項目

為 Firebase 身份驗證啟用 Google 登錄

啟用 Cloud Firestore

啟用雲存儲

4.安裝Firebase命令行界面

5. 在本地運行入門應用

6.導入並配置Firebase

導入 Firebase SDK

安裝 Firebase SDK 並開始構建 Webpack

配置火力地堡

7.設置用戶登錄

使用 Google 登錄驗證您的用戶

跟踪身份驗證狀態

顯示登錄用戶的信息

測試登錄應用程序

8. 向 Cloud Firestore 寫入消息

數據模型

將消息添加到 Cloud Firestore

測試發送消息

9.閱讀消息

同步消息

測試同步消息

10.發送圖片

將圖像保存到雲存儲

測試發送圖片

11.顯示通知

添加 FCM 服務工作者

獲取 FCM 設備令牌

請求顯示通知的權限

獲取您的設備令牌

向您的設備發送通知

12. Cloud Firestore 安全規則

查看數據庫安全規則

更新數據庫安全規則

13.雲存儲安全規則

查看 Cloud Storage 安全規則

更新 Cloud Storage 安全規則

14.收集性能數據

自動痕跡

測量第一個輸入延遲（可選）

查看性能數據

15. 使用 Firebase 託管部署您的應用

16. 恭喜！

我們涵蓋的內容

下一步

Learn more