web前端优化：使用serviceWorker，让网站秒开

今天给大家分享一个干货：使用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，减少一半，是不是很爽