Ngoài việc Jake Archibald lo lắng về việc kỹ năng Nhà phát triển bị sụt giảm và sụt giảm, anh ấy đã đưa ra một trường hợp rõ ràng là nhờ sử dụng nhân viên dịch vụ một cách thông minh, bạn có thể cải thiện đáng kể hiệu suất của trang web hoặc ứng dụng của mình. Hãy xem video để biết thông tin tổng quan.
Nếu định Tăng thời gian tải trang như Jake đề xuất, bạn thực sự cần phải hiểu cách trình chạy dịch vụ tác động đến yêu cầu của trang.
API Thời gian tài nguyên và API Thời gian người dùng là các thành phần quan trọng trong cơ sở hạ tầng của nhiều trang web trà (Giám sát người dùng thực) vì công cụ này giúp bạn hiểu rõ cách tất cả người dùng thấy hiệu suất của trang web của bạn (Một trường hợp sử dụng khác là phát hiện việc chèn nội dung). Nói tóm lại, API này cho phép bạn hiểu gần như mọi khía cạnh của mọi yêu cầu web được tạo từ trang web của bạn, trừ khi bạn có service worker hoặc Web worker.
Sau đây là một ví dụ nhanh về cách sử dụng miền đó để lấy danh sách tất cả yêu cầu được gửi đến một miền không phải miền hiện tại.
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 Thời gian tài nguyên và Thời gian người dùng được tạo và triển khai trước khi trình chạy dịch vụ chưa thể hiện rõ sự quan tâm của kỹ sư và mã ở trên không thể hiểu được tác động của Trình chạy dịch vụ.
Một số thay đổi gần đây trong Chrome 45 (bản thử nghiệm beta vào tháng 7 năm 2015) sẽ giúp bạn bằng cách giới thiệu cho phép tất cả hình thức trình thực thi (Web và trình chạy dịch vụ) truy cập vào API Thời gian tài nguyên và API Thời gian người dùng, nhờ đó giúp bạn nắm bắt được hiệu suất mạng cho tất cả người dùng.
Truy cập vào các chỉ số hiệu suất từ Service Worker
Thay đổi lớn nhất là việc thêm đối tượng performance vào ngữ cảnh Worker (Web và ServiceWorkers). Giờ đây, bạn sẽ hiểu được thời gian hiệu suất của tất cả các yêu cầu được đưa ra trong ngữ cảnh của trình thực thi này, đồng thời cho phép bạn đặt các dấu hiệu riêng để đo lường quá trình thực thi JS. Nếu chỉ có thể xem được những gì xảy ra từ ngữ cảnh của cửa sổ hiện tại, bạn sẽ bỏ lỡ thông tin quan trọng về thời gian:
fetch()yêu cầu được đưa ra bên trong sự kiệnoninstallcủa trình chạy dịch vụ- Hiện tại, bạn có thể theo dõi các yêu cầu
fetch()được đưa ra khi lưu dữ liệu vào bộ nhớ đệm trong một sự kiệnonpushđể hiểu rõ hiệu suất mà người dùng nhìn thấy. - cuối cùng là yêu cầu
fetch()được trình xử lýonfetchthực hiện và chặn.
Điểm cuối cùng rất quan trọng. Có thể nói một trình chạy dịch vụ là một proxy nằm giữa giao diện người dùng web và mạng. Đối tượng performance trên window chỉ xem được thời gian và thông tin cho phần yêu cầu mà đối tượng này gọi. Đối tượng này không biết về trình chạy dịch vụ nằm ở giữa ứng dụng và mạng, do đó không thể hiểu được tác động của trình chạy dịch vụ này.
Làm cách nào để sử dụng tính năng này?
Một trình chạy dịch vụ thông thường hỗ trợ chế độ ngoại tuyến trước sẽ có bước cài đặt để tải xuống và lưu tất cả thành phần để dùng sau
Một ví dụ về trường hợp có thể sử dụng tính năng này là ghi lại và ghi lại dữ liệu thời gian của bước cài đặt để bạn có thể đưa ra một số quyết định đo lường về cách cải thiện hiệu suất cài đặt dựa trên quá trình sử dụng thực tế của người dùng.
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;
})
);
});
Ngày nay, nhiều trang web sử dụng cơ chế CLS để tìm hiểu cách phần lớn người dùng trải nghiệm trang web của họ. Các công cụ như Google Analytics đã báo cáo dữ liệu tốc độ trang web bằng API Navigation Timing nhưng cần được cập nhật để phân tích hiệu suất từ ngữ cảnh Worker.
API thời gian Navigation có đến Trình chạy dịch vụ không
Hiện tại chưa có kế hoạch thêm Navigation Timing API vào ngữ cảnh của trình chạy dịch vụ vì không có cách điều hướng truyền thống nào trong một trình chạy dịch vụ. Điều thú vị là đối với nhân viên chạy dịch vụ này, mọi thao tác trong nhóm trang được kiểm soát của nhân viên này trông giống như một lần tìm nạp tài nguyên. Chỉ riêng điều này đã khiến trình chạy dịch vụ trở thành một cách cực kỳ hấp dẫn để tập trung phần lớn logic hiệu suất vào ứng dụng web của bạn.