今天给大家分享一个干货：使用serviceWorker来优化web前端，大大提高google的评分
直接上代码吧：网页中加入
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js').then(function(registration) {
console.log('SW registration succeeded with scope:', registration.scope);
}).catch(function(e) {
console.log('SW registration failed with error:', e);
});
}
</script>
sw.js文件
const CACHE_NAME = 'lcget-com-cache';
//安装
self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHE_NAME).then(cache =>
cache.addAll([
'https://www.lcget.com/public3/lcget/js/fl.js',
'https://www.lcget.com/public3/lcget/js/jquery.lazyload.min.js',
'https://www.lcget.com/public3/lcget/js/alert.js',
'https://www.lcget.com/public3/lcget/js/jquery-3.1.0.min.js',
'https://www.lcget.com/public3/lcget/js/all.css',
'https://www.lcget.com/public3/lcget/pc/app.css',
'https://www.lcget.com/public3/lcget/wap/app.css',
'https://www.lcget.com/public3/lcget/js/grey.gif',
'https://www.lcget.com/public3/lcget/xfdiv.png',
'https://www.lcget.com/public3/noads.jpg',
'https://www.lcget.com/public3/lcget/js/t.js',
'https://www.lcget.com/public3/lcget/js/i.js',
'https://www.lcget.com/public3/lcget/PhotoSwipe/my-gallery.js',
'https://www.lcget.com/public3/lcget/PhotoSwipe/js/photoswipe-ui-default.min.js',
'https://www.lcget.com/public3/lcget/PhotoSwipe/js/photoswipe.min.js',
'https://www.lcget.com/public3/lcget/fonts/fontawesome-webfont.woff2'])
)
);
});
//获取
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request).then(response => {
if (response) {
//found cached resource
return response;
}
// get resource and add it to cache
return fetch(event.request)
.then(response => {
// check if the response is valid
if (!response.ok) {
return response;
}
if(event.request.method=='GET'){
const newResponse = response.clone();
caches.open(CACHE_NAME).then(cache =>cache.put(event.request, newResponse)
);
}
return response;
});
})
);
});
//更新
self.addEventListener('activate', event => {
event.waitUntil(
caches.keys().then(keys => {
return Promise.all(
keys.map(cache => {
if (cache === CACHE_NAME) {
return caches.delete(cache);
}
})
);
})
);
});
效果，LCP，减少一半，是不是很爽
