นอกจากความกังวลเกี่ยวกับทักษะของนักพัฒนาซอฟต์แวร์ที่จะเสื่อมลงแล้ว Jake Archibald ยังแสดงให้เห็นด้วยว่าการใช้ Service Worker อย่างชาญฉลาดจะช่วยปรับปรุงประสิทธิภาพของเว็บไซต์หรือแอปได้อย่างมาก ดูวิดีโอเพื่อดูภาพรวม
หากต้องการเพิ่มประสิทธิภาพเวลาในการโหลดหน้าเว็บให้เร็วขึ้นตามที่ Jake แนะนำ คุณจำเป็นต้องเข้าใจว่า Service Worker ส่งผลต่อคำขอของหน้าเว็บอย่างไร
การวัดเวลาของทรัพยากรและ User Timing API เป็นองค์ประกอบสําคัญในโครงสร้างพื้นฐาน RUM (Real User Monitoring) ของเว็บไซต์จํานวนมาก เนื่องจากช่วยให้คุณเข้าใจภาพรวมว่าผู้ใช้ทุกคนเห็นประสิทธิภาพของเว็บไซต์อย่างไร (Use Case อีกอย่างหนึ่งคือการตรวจหาการแทรกเนื้อหา) กล่าวโดยย่อคือ เครื่องมือนี้จะช่วยให้คุณเข้าใจเกือบทุกแง่มุมของคำขอเว็บทั้งหมดที่ส่งจากเว็บไซต์ เว้นแต่ว่าคุณจะมี Service Worker หรือ Web Worker
ต่อไปนี้เป็นตัวอย่างคร่าวๆ ของวิธีใช้เพื่อดูรายการคําขอทั้งหมดที่ส่งไปยังโดเมนที่ไม่ใช่โดเมนปัจจุบัน
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 ของเวลาในการตอบสนองของทรัพยากรและเวลาในการตอบสนองของผู้ใช้สร้างขึ้นและใช้งานก่อนที่ Service Worker จะปรากฏขึ้น และโค้ดข้างต้นจะไม่สามารถทําความเข้าใจว่า Service Worker ส่งผลต่อเวลาในการตอบสนองของทรัพยากรและเวลาในการตอบสนองของผู้ใช้อย่างไร
การเปลี่ยนแปลงล่าสุดใน Chrome 45 (เบต้าในเดือนกรกฎาคม 2015) จะช่วยคุณด้วยการเพิ่มความสามารถให้เวิร์กเกอร์ทุกรูปแบบ (เวิร์กเกอร์เว็บและเวิร์กเกอร์บริการ) เข้าถึง Resource Timing และ User Timing API ได้ เพื่อให้คุณควบคุมประสิทธิภาพเครือข่ายของผู้ใช้ทุกคนได้อยู่เสมอ
การเข้าถึงเมตริกประสิทธิภาพจาก Service Worker
การเปลี่ยนแปลงที่สําคัญที่สุดคือการเพิ่มออบเจ็กต์ performance ลงในบริบทของเวิร์กเกอร์ (Web และ ServiceWorker) ซึ่งจะช่วยให้คุณเข้าใจเวลาในการทํางานของคําขอทั้งหมดที่สร้างขึ้นในบริบทของเวิร์กเกอร์ และช่วยให้คุณตั้งเครื่องหมายของคุณเองสําหรับการวัดการเรียกใช้ JS ได้ด้วย หากเห็นเฉพาะสิ่งที่เกิดขึ้นจากบริบทของกรอบเวลาปัจจุบัน คุณจะพลาดข้อมูลการกําหนดเวลาที่สําคัญจากสิ่งต่อไปนี้
- คำขอ
fetch()ที่ส่งภายในเหตุการณ์oninstallของ Service Worker - ตอนนี้คุณสามารถติดตามคำขอ
fetch()ที่เกิดขึ้นเมื่อแคชข้อมูลในเหตุการณ์onpushเพื่อให้ทราบประสิทธิภาพที่ผู้ใช้เห็น - สุดท้ายคือคำขอ
fetch()ที่สร้างขึ้นและถูกขัดขวางโดยตัวแฮนเดิลonfetch
ประเด็นสุดท้ายนี้สำคัญ วิธีหนึ่งในการมอง Service Worker คือเป็นพร็อกซีที่อยู่ระหว่าง UI ของเว็บกับเครือข่าย ออบเจ็กต์ performance ใน
window จะมองเห็นเฉพาะเวลาและข้อมูลของคำขอบางส่วนที่เรียกใช้เท่านั้น โดยไม่ทราบว่า Service Worker ทำงานอยู่ตรงกลางระหว่างไคลเอ็นต์กับเครือข่าย จึงไม่สามารถเข้าใจผลกระทบของ Service Worker
ฉันจะใช้ฟีเจอร์นี้ได้อย่างไร
เซิร์ฟเวอร์ระยะไกลทั่วไปที่รองรับการทำงานแบบออฟไลน์ก่อนจะมีขั้นตอนการติดตั้งที่จะดาวน์โหลดและบันทึกชิ้นงานทั้งหมดไว้ใช้ภายหลัง
ตัวอย่างการใช้งานคือบันทึกและบันทึกข้อมูลเวลาของขั้นตอนการติดตั้งเพื่อให้คุณตัดสินใจอย่างมีข้อมูลเกี่ยวกับวิธีปรับปรุงประสิทธิภาพการติดตั้งโดยอิงตามการใช้งานจริงของผู้ใช้
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 จะเห็นว่าการนำทางทุกรายการในชุดหน้าเว็บที่ควบคุมของ Service Worker นั้นเหมือนกับการดึงข้อมูล เพียงข้อนี้ข้อเดียวก็ทำให้ Service Worker เป็นวิธีที่ยอดเยี่ยมในการรวมตรรกะด้านประสิทธิภาพส่วนใหญ่ไว้ในเว็บแอป