如何打造一个全满分网站?

'/assets/img/placeholder.png',

'/assets/img/icons/preloader.svg',

'/assets/img/icons/read.svg',

];

self.addEventListener('install', function(e) {

e.waitUntil(

caches.open(cacheName).then(function(cache) {

return cache.addAll(filesToCache);

})

);

});

self.addEventListener('activate', function(e) {

e.waitUntil(

caches.keys().then(function(keyList) {

return Promise.all(keyList.map(function(key) {

if (key !== cacheName) {

return caches.delete(key);

}

}));

})

);

return self.clients.claim();

});

self.addEventListener('fetch', function(e) {

e.respondWith(

caches.match(e.request).then(function(response) {

return response || fetch(e.request);

})

);

});

把指定的文件保存在缓存中，如许下次如不雅收集不通的话，浏览器会大年夜缓存中取文件，而不会出现收集不通的画面。建好了ServiceWorker文件的页面，会在Chrome对象栏里看到如许的效不雅：

Lighthouse

同时，完成了PWA效不雅的网站，可以让用户在手机中直接安装，比如：

然后，就会在用户的主屏幕上生成一个带有你设定的搁笔的应用：

点击搁笔打开应用，会来到一个没有任何URL地址栏和对象栏的页面，应用户完全感到不到是在浏览网页：

机能(Performance)

Lighthouse对机能的请求根本和GTMetrix差不多，如不雅你能在GTMetrix获得高分的话，经由过程Lighthouse的┞封一项测试应当不难。独一多请求的一项是所有图片都请求是webp格局，然则Safari浏览器今朝并不支撑这种格局，所以如不雅你把网站上的所有jpg文件改成webp文件的话会导致你的网站里的图片在iPhone上不克不及显示。(我今朝的网站周全采取了webp格局，不过会在不久的将来周全切换回jpg，重要原因是iPhone今朝还不兼容。)

4/5 首页上一页 2 3 4 5 下一页尾页

　　推荐阅读

　　iOS 11.2将开启免费试用应用功能

不久之后，您将可以或许为App Store上的主动续订订阅供给扣头的入门价格。iOS 11.2惹人了SKProduct（subscriptionPeriod和introductoryPrice）上的新类（SKProductDiscount和SKProductSubscriptionPeri>>>详细阅读

本文标题：如何打造一个全满分网站?

地址：http://www.17bianji.com/lsqh/38586.html

1/2 1