1. 總覽
在本程式碼研究室中,您將瞭解如何使用 Firebase Performance Monitoring 評估即時通訊網頁應用程式的效能。請前往 https://fireperf-friendlychat.web.app/ 觀看示範影片。
課程內容
- 如何將 Firebase Performance Monitoring 新增至網頁應用程式,取得立即可用的指標 (網頁載入和網路要求)。
- 如何透過自訂追蹤記錄評估特定程式碼片段。
- 如何記錄與自訂追蹤記錄相關的其他自訂指標。
- 如何運用自訂屬性進一步區隔成效資料。
- 如何使用效能監控資訊主頁瞭解網頁應用程式的效能。
事前準備
2. 取得程式碼範例
從指令列複製程式碼研究室的 GitHub 存放區:
git clone https://github.com/firebase/codelab-friendlychat-web
如果您沒有安裝 Git,也可以將存放區下載為 ZIP 檔案。
匯入範例應用程式
使用 IDE,從複製的存放區開啟或匯入 📁? performance-monitoring-start
目錄。這個 📁? performance-monitoring-start
目錄包含程式碼研究室的範例程式碼,也就是聊天網頁應用程式。
3. 建立及設定 Firebase 專案
建立 Firebase 專案
- 在 Firebase 控制台,按一下「新增專案」。
- 將 Firebase 專案命名為「
FriendlyChat
」。
記下 Firebase 專案的專案 ID。
- 按一下 [Create Project] (建立專案)。
將 Firebase 網頁應用程式新增至專案
- 按一下網站圖示
,建立新的 Firebase 網頁應用程式。
- 使用暱稱
Friendly Chat
註冊應用程式,然後勾選「同時為這個應用程式設定 Firebase 託管」旁的方塊。 - 按一下 [Register app] (註冊應用程式)。
- 按一下其餘步驟。你現在不必按照畫面上的指示操作;我們會在本程式碼研究室的後續步驟中詳細說明這些方法。
啟用 Google 登入 Firebase 驗證功能
為允許使用者透過自己的 Google 帳戶登入即時通訊應用程式,我們會使用 Google 登入方式。
您需啟用 Google 登入功能:
- 在 Firebase 控制台中,找到左側面板中的「開發」部分。
- 依序點選「驗證」和「登入方式」分頁標籤 ( 前往控制台)。
- 啟用 Google 登入服務供應商,然後按一下「儲存」。
啟用 Cloud Firestore
網頁應用程式會使用 Cloud Firestore 儲存即時通訊訊息及接收新的即時通訊訊息。
您必須啟用 Cloud Firestore:
- 在 Firebase 控制台的「開發」專區中,按一下「資料庫」。
- 按一下 Cloud Firestore 窗格中的「建立資料庫」。
- 選取「以測試模式啟動」選項,閱讀安全性規則免責事項後,按一下「啟用」。
本程式碼研究室的範例程式碼包含更安全的規則。我們稍後會在程式碼研究室中部署這些內容。
啟用 Cloud Storage
網頁應用程式會使用 Cloud Storage for Firebase 儲存、上傳及分享相片。
您必須啟用 Cloud Storage:
- 在 Firebase 控制台的「開發」專區中,按一下「儲存空間」。
- 點選「Get Started」(開始使用)。
- 詳閱 Firebase 專案安全性規則免責事項,然後按一下「我知道了」。
範例程式碼含有基本安全性規則,稍後將在程式碼研究室中部署。
4. 安裝 Firebase 指令列介面
透過 Firebase 指令列介面 (CLI),你可以使用 Firebase 託管在本機提供網頁應用程式,並將網頁應用程式部署至 Firebase 專案。
- 請按照 Firebase 文件中這些操作說明安裝 CLI。
- 在終端機中執行下列指令,驗證 CLI 是否已正確安裝:
firebase --version
確認 Firebase CLI 版本為 8.0.0 以上版本。
- 執行下列指令來授權 Firebase CLI:
firebase login
我們已設定網頁應用程式範本,從應用程式的本機目錄 (先前在程式碼研究室中複製的存放區) 提取應用程式的 Firebase 託管設定。不過,如要提取設定,我們必須將應用程式與 Firebase 專案建立關聯。
- 確認指令列正在存取應用程式的本機
performance-monitoring-start
目錄。 - 執行下列指令,將應用程式與 Firebase 專案建立關聯:
firebase use --add
- 系統顯示提示時,請選取專案 ID,並為 Firebase 專案新增別名。
如果有多個環境 (正式環境、測試環境等),就很適合使用別名。不過,在本程式碼研究室中,我們直接使用 default
的別名。
- 請按照指令列中的其餘說明操作。
5. 與 Firebase Performance Monitoring 整合
整合 Firebase Performance Monitoring SDK 網頁版的方法有很多種,詳情請參閱說明文件。在這個程式碼研究室中,我們將從主機網址啟用效能監控功能。
新增效能監控功能並初始化 Firebase
- 開啟
src/index.js
檔案,然後在TODO
下方新增下列程式碼,以便納入 Firebase Performance Monitoring SDK。
index.js
// TODO: Import the Firebase Performance Monitoring library here.
import {
getPerformance,
trace
} from 'firebase/performance';
- 您也必須使用設定物件來初始化 Firebase SDK,該物件包含要使用的 Firebase 專案和要使用的網頁應用程式相關資訊。我們目前使用的是 Firebase 託管,因此你可以匯入特殊的指令碼來執行這項設定。在本程式碼研究室中,我們已在
public/index.html
檔案的底部為您新增以下這行程式碼,但請再次確認這一行。
index.html
<!-- This script is created by webpack -->
<script type="module" src="scripts/main.js"></script>
- 在
src/index.js
檔案的TODO
下方新增下列程式碼,初始化效能監控功能。
index.js
// TODO: Initialize Firebase Performance Monitoring.
getPerformance();
從現在起,如果有使用者使用您的網站,Performance Monitoring 會自動收集網頁載入和網路要求指標!如要進一步瞭解自動網頁載入追蹤記錄,請參閱說明文件。
新增第一個輸入延遲 polyfill 程式庫
首次輸入延遲時間非常實用,因為如果瀏覽器回應使用者互動,就會讓使用者對應用程式的回應第一次印象。
首次輸入延遲時間是從使用者首次與網頁上的元素互動 (例如點選按鈕或超連結) 時開始算起。當瀏覽器能夠回應輸入內容後,該程式碼就會立即停止,代表瀏覽器無法載入或剖析內容。
這個 polyfill 程式庫是效能監控整合作業的選用項目。
開啟 public/index.html
檔案,然後取消註解以下這行。
index.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>
到目前為止,您已完成程式碼中的 Firebase Performance Monitoring 整合作業!
在接下來的步驟中,您將瞭解如何使用 Firebase Performance Monitoring 新增自訂追蹤記錄。如果只想收集自動追蹤記錄,請參閱「部署並開始傳送圖片」專區。
6. 在應用程式中新增自訂追蹤記錄
Performance Monitoring 可讓您建立自訂追蹤記錄。自訂追蹤記錄是應用程式中執行區塊持續時間的報表。您可使用 SDK 提供的 API 定義自訂追蹤記錄的開始和結尾。
- 在
src/index.js
檔案中取得效能物件,然後建立自訂追蹤記錄,以便上傳圖片訊息。
index.js
// TODO: Create custom trace to monitor image upload.
const t = trace(perf, "saveImageMessage");
- 如要錄製自訂追蹤記錄,您必須指定追蹤記錄的起點和停止點。您可以將追蹤記錄視為計時器,
index.js
// TODO: Start the "timer" for the custom trace.
t.start();
...
// TODO: Stop the "timer" for the custom trace.
t.stop();
您已成功定義自訂追蹤記錄!部署程式碼後,如果使用者傳送圖片訊息,系統會記錄自訂追蹤記錄的時間長度。讓您瞭解真人使用者在即時通訊應用程式中傳送圖片需要多少時間。
7. 在應用程式中加入自訂指標。
您可以進一步設定自訂追蹤記錄,針對在範圍內發生的成效相關事件記錄自訂指標。舉例來說,您可以利用指標調查上傳時間,是否會受到上一個步驟中定義的自訂追蹤記錄圖片大小影響。
- 找出上一個步驟的自訂追蹤記錄 (在
src/index.js
檔案內定義)。 - 在
TODO
下方加入下列程式碼,記錄上傳圖片的大小。
index.js
...
// TODO: Record image size.
t.putMetric('imageSize', file.size);
...
透過這項指標,效能監控功能即可記錄自訂追蹤記錄時長和上傳圖片大小。
8. 在應用程式中新增自訂屬性
依據先前的步驟,您也可以從自訂追蹤記錄中收集自訂屬性。自訂屬性可協助您按應用程式專屬的類別區隔資料。舉例來說,您可以收集圖片檔的 MIME 類型,調查 MIME 類型可能對效能造成哪些影響。
- 使用
src/index.js
檔案中定義的自訂追蹤記錄。 - 在
TODO
下方新增下列程式碼,以記錄上傳圖片的 MIME 類型。
index.js
...
// TODO: Record image MIME type.
t.putAttribute('imageType', file.type);
...
這個屬性啟用效能監控功能,依據上傳的圖片類型分類自訂追蹤記錄時長。
9. [擴充] 使用 User Timing API 新增自訂追蹤記錄
Firebase Performance Monitoring SDK 經過特殊設計,因此能以非同步方式載入,因此不會對網頁應用程式在網頁載入期間的效能造成負面影響。載入 SDK 前,無法使用 Firebase Performance Monitoring API。在這種情況下,您仍可使用 User Timing API 新增自訂追蹤記錄。Firebase Performance SDK 會從 measure() 擷取時間長度,並記錄為自訂追蹤記錄。
我們將使用 User Timing API 測量載入應用程式樣式指令碼的持續時間。
- 在
public/index.html
檔案中,新增下列程式碼,以標示載入應用程式樣式指令碼的起始位置。
index.html
<!-- TODO: Mark the starting of `timer` for loading App Styling script. -->
<script type="text/javascript">performance && performance.mark('loadStylingStart');</script>
- 新增下列幾行即可標記應用程式樣式指令碼載入結束,以及測量開始和結束之間的時間長度。
index.html
<!-- TODO: Mark the ending of `timer` for loading App Styling script. Measure the duration from start to end. -->
<script type="text/javascript">
performance && performance.mark('loadStylingEnd');
performance && performance.measure('loadStyling', 'loadStylingStart', 'loadStylingEnd');
</script>
您在這裡建立的項目會自動由 Firebase Performance Monitoring 收集。您之後可以在 Firebase Performance 控制台中找到名為 loadStyling
的自訂追蹤記錄。
10. 部署並開始傳送圖片
部署至 Firebase 託管
將 Firebase Performance Monitoring 新增至程式碼後,請按照下列步驟將程式碼部署至 Firebase 託管:
- 確認指令列正在存取應用程式的本機
performance-monitoring-start
目錄。 - 執行下列指令,將檔案部署至 Firebase 專案:
firebase deploy
- 主控台應會顯示以下內容:
=== 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 子網域中完全託管的網頁應用程式:
https://<projectId>.firebaseapp.com
和https://<projectId>.web.app
。
確認已啟用效能監控功能
開啟 Firebase 控制台,然後前往「成效」分頁。如果看到「偵測到 SDK」的歡迎訊息,表示您已成功整合 Firebase Performance Monitoring!
傳送圖片訊息
在即時通訊應用程式中傳送圖片,產生一些成效資料。
- 登入即時通訊應用程式後,按一下圖片上傳按鈕
。
- 使用檔案選擇器選取圖片檔。
- 請嘗試傳送多張圖片 (一些樣本儲存在
public/images/
中),以便測試自訂指標和自訂屬性的分佈情形。
新訊息應與您選取的圖片一併顯示在應用程式的使用者介面中。
11. 監控資訊主頁
部署網頁應用程式並以使用者身分傳送圖片訊息後,就能在 Firebase 控制台的效能監控資訊主頁中查看成效資料。
存取資訊主頁
- 在 Firebase 控制台中,選取含有
Friendly Chat
應用程式的專案。 - 在左側面板中找到「品質」專區,然後按一下「成效」。
查看裝置端資料
效能監控功能處理完應用程式資料後,資訊主頁頂端就會顯示分頁。如果還沒看到任何資料或分頁,請稍後再回來查看。
- 按一下「裝置上」分頁標籤。
- 「網頁載入」表格會顯示效能監控功能在網頁載入時自動收集的各種成效指標。
- 「時間長度」表格會顯示您在應用程式程式碼中定義的所有自訂追蹤記錄。
- 按一下「Durations」資料表中的「saveImageMessage」,查看追蹤記錄的特定指標。
- 按一下「匯總」,查看圖片大小的分佈情形。您可以查看新增的指標,用於評估這個自訂追蹤記錄的圖片大小。
- 按一下上一個步驟「匯總」旁的「長期」。您也可以查看自訂追蹤記錄的「時間長度」。按一下「查看更多」即可進一步查看收集到的資料。
- 在隨即開啟的頁面中,按一下「imageType」,即可按圖片 MIME 類型區隔時間長度資料。系統在自訂追蹤記錄中加入 imageType 屬性,因此系統記錄了這項特定資料。
查看網路資料
HTTP/S 網路要求是一種報表,會擷取網路呼叫的回應時間和酬載大小。
- 返回效能監控資訊主頁的主畫面。
- 按一下「Network」分頁標籤,查看網頁應用程式的網路要求項目清單。
- 請仔細瀏覽這些要求,找出緩慢的要求,並開始設法改進應用程式效能!
12. 恭喜!
您已啟用 Firebase SDK 效能監控功能,並收集自動追蹤記錄和自訂追蹤記錄,以便評估即時通訊應用程式的實際成效!
本文涵蓋內容:
- 將 Firebase Performance Monitoring SDK 加入網頁應用程式。
- 在程式碼中加入自訂追蹤記錄。
- 記錄與自訂追蹤記錄相連結的自訂指標。
- 使用自訂屬性區隔成效資料。
- 瞭解如何使用效能監控資訊主頁,取得應用程式效能的深入分析。