Service Worker Navigation Preload 首包优化实践

概述Navigation Preload 允许在 Service Worker 启动时并行发起导航请求以优化首包。本文给出启用与使用方法。启用与使用self.addEventListener('activate', event => {

event.waitUntil(self.registration.navigationPreload.enable());

});

self.addEventListener('fetch', event => {

if (event.request.mode === 'navigate') {

event.respondWith((async () => {

const pre = await event.preloadResponse;

if (pre) return pre;

return fetch(event.request);

})());

}

});