除了擔心開發人員技能會因缺乏練習而生疏,Jake Archibald 也提出了強而有力的論點,說明只要聰明運用服務工作者,就能大幅提升網站或應用程式的效能。請觀看影片瞭解概況。
如果您打算按照 Jake 的建議超越網頁載入時間,就必須瞭解服務工作者對網頁要求的影響。
Resource Timing 和 User Timing API 是許多網站 RUM (Real User Monitoring) 基礎架構的重要元件,因為這可讓您全面瞭解所有使用者如何看待網站效能 (另一個用途是偵測內容注入)。簡而言之,這項功能可讓您瞭解網站發出的每個網頁要求的幾乎所有層面,除非您有服務工作者或網路工作者。
以下簡要範例說明如何使用這項功能,取得所有非目前網域的網域要求清單。
var getThirdPartyRequests = function() {
var thirdPartyRequests = [];
var requests = window.performance.getEntriesByType("resource");
var currentHost = window.location.host
for(var requestIdx = 0; requestIdx < requests.length; requestIdx++) {
var request = requests[requestIdx];
var url = new URL(request.name);
var host = url.host;
if(host != currentHost) {
thirdPartyRequests.push(request);
}
}
return thirdPartyRequests;
};
資源時間和使用者時間 API 是在服務工作者還未在工程師眼中閃爍之前建立及實作,因此上述程式碼無法瞭解服務工作者對其造成的影響。
Chrome 45 (2015 年 7 月的 Beta 版) 近期推出一系列變更,可讓所有類型的 worker (網頁和服務 worker) 存取資源時間和使用者時間 API,進而讓您掌握所有使用者的網路效能。
透過服務工作者存取成效指標
最大的變更是將 performance
物件新增至 worker 內容 (Web 和 ServiceWorker),讓您瞭解在 worker 內容中提出的所有要求的效能時間,並設定自己的標記來評估 JS 執行作業。如果您只能從目前視窗的內容查看發生的情況,就會錯過下列重要時間資訊:
- 在服務工作程的
oninstall
事件中提出的fetch()
要求 - 您現在可以追蹤在
onpush
事件中快取資料時發出的fetch()
要求,瞭解使用者看到的成效。 - 最後,由
onfetch
處理常式提出並攔截的fetch()
要求。
最後一點很重要。您可以將服務工作者視為位於網路 UI 和網路之間的 Proxy。window
上的 performance
物件只會看到其所叫用要求的部分時間和資訊,無法得知用戶端和網路之間的服務工作者,因此無法瞭解服務工作者的影響。
如何使用這項功能?
支援離線優先的典型服務工作者會包含安裝步驟,用於下載並儲存所有資產,以供日後使用
舉例來說,您可以使用這項功能記錄及記錄安裝步驟的時間資料,據此做出明智的決策,瞭解如何根據實際使用者行為改善安裝成效。
self.addEventListener("install", function() {
var urls = [
'/',
'/images/chrome-touch-icon-192x192.png',
'/images/ic_add_24px.svg',
'/images/side-nav-bg@2x.jpg',
'/images/superfail.svg',
'/scripts/voicememo-core.js',
'/styles/voicememo-core.css',
'/third_party/Recorderjs/recorder.js',
'/third_party/Recorderjs/recorderWorker.js',
'/third_party/Recorderjs/wavepcm.js',
'/third_party/moment.min.js',
'/favicon.ico',
'/manifest.json'
];
urls = urls.map(function(url) {
return new Request(url, {credentials: 'include'});
});
event.waitUntil(
caches
.open(CACHE_NAME + '-v' + CACHE_VERSION)
.then(function(cache) {
// Fetch all the URL's and store in the cache
return cache.addAll(urls);
})
.then(function () {
// Analyze all the requests
var requests = self.performance.getEntriesByType("resource");
// Loop across all the requests and save the timing data.
return;
})
);
});
目前許多網站都會使用 RUM,瞭解大多數使用者如何體驗網站。Google Analytics 等工具已使用 Navigation Timing API 回報網站速度資料,但需要更新,才能納入 Worker 情境中的效能分析。
Navigation Timing API 是否會提供 Service Worker
目前沒有計劃將 Navigation Timing API 新增至服務工作者背景,因為服務工作者中沒有傳統導覽。有趣的是,對 Service Worker 而言,Service Worker 所控管的網頁組合中的每個導覽都會視為資源擷取。這項功能本身就讓 Service Worker 成為非常實用的做法,可將網路應用程式中的大部分效能邏輯集中管理。