内容主要援用自吴浩麟著《webpack深入浅出》
离线运用
离线运用的长处:
在没有收集的情况下能翻开网页。
由于部份缓存的资本直接从当地加载,所以对用户来讲能够加速网页的加载速率,削减效劳器压力。
手艺完成:
离线运用的中心是离线缓存手艺,历史上曾前后涌现两种离线缓存手艺。
- AppCache:又叫做Application Cache,目次已从web规范中删除,只管不要运用。
- Service Workers:现在最新的离线缓存手艺,是Web Worker的一部份,它经由过程阻拦收集要求完成离线缓存,比 AppCache更天真。由于它能够经由过程js代码去掌握缓存的逻辑。
Service Workers
Service Workers是一个在浏览器背景运转的剧本,它的生命周期完整独立于网页,它没法直接接见DOM。它能够经由过程postMessage接口发送音讯来和UI历程通讯。
阻拦收集功用是Service Workers的主要功用。经由过程Service Workers能完成离线缓存,编辑相应,过滤相应等功用。
现在Chrome,Firefox,Opera都已周全支撑Service Workers。但只要高版本的Android支撑挪动端的浏览器。,由于Service Workers没法经由过程注入Polyfill完成兼容,所以在盘算运用它前,请先确认本身的网页的运转场景。
注:Polyfill:
垫片,就是帮你加一层东西来处理问题,不光是兼容性问题,pollyfill是个观点举个例子,有些旧浏览器不支撑Number.isNaN要领,Polyfill就能够是如许的:
·if(!Number.isNaN) {
Number.isNaN = function(num) {
return(num !== num);
}
}·
啥意思呢,就是假如浏览器没有Number.isNaN要领,那我们就给它增加上去,所谓Polyfill就是如许处理API的兼容问题的。
推断浏览器是不是支撑Service Workers的最简朴要领是经由过程以下代码:
if(navigator.serviceWorker){alert(true)}
注册Service Workers
要为网页接入Service Workers,须要在网页加载后注册一个形貌Service Workers逻辑的剧本,代码以下:
`if(navigator.serviceWorker)
{
window.addEventListener('DOMContentLoaded',function(){
navigator.serviceWorker.register('./sw.js')
})
}`
一旦这个剧本文件被加载,Service Workers的装置就最先了,在这个剧本被装置到浏览器中后,
就算是用户封闭了当前网页,它仍会存在,也就是第一次翻开该网页时,Service Workers的逻辑不会见效。
由于剧本还没有被加载和注册,然则今后再次翻开该网页时剧本里的逻辑将会见效。
在Chrome中能够经由过程翻开网址chrome://inspect/#service-workers来检察当前浏览器中一切已注册的Service Workers。
更新缓存
浏览器针对Service Workers有以下机制:
- 每次翻开接入了Service Workers的网页时,浏览器都邑从新下载Service Workers剧本文件,所以要注意该剧本文件不要太大,假如发明和当前已注册过的文件存在字节差别,就将其视为“新效劳事变线程”。
- 新的Service Workers线程将会启动,且将会触发其install事宜。
- 当网站上当前翻开的页面封闭时,旧的Service Workers线程将会被停止,新的Service Workers线程将会获得掌握权。
- 新的Service Workers线程获得掌握权后,将会触发其activate事宜。
新的Service Workers线程中的activate事宜就是清算旧缓存的最好时候点
Service Workers在注册胜利后会在其生命周期中派发一些事宜,经由过程监听对应的事宜,在特定的时候上做一些事变。
在Service Workers剧本中引入了新的关键字self,代表当前的Service Workers实例。
在Service Workers装置胜利后会派发出install事宜,须要在这个事宜中实行缓存资本的逻辑。
接入webpack
用webpack构建接入Service Workers的离线运用时,要处理的问题在于怎样天生之前提到的sw.js文件。
而且sw.js文件中的cacheFileList变量,代表须要被缓存文件的URL列表,须要依据输出文件列表所对应的URL来决议。而不是写成静态值。
webpack没有原生功用能够完成以上需求,能够运用插件serviceworker-webpack-plugin
·
const ServiceWorkerWebpackPlugin=require('serviceworker-webpack-plugin')
new ServiceWorkerWebpackPlugin({
// 自定义的 sw.js 文件地点途径
// ServiceWorkerWebpackPlugin 会把文件列表注入到天生的 sw.js 中
entry: path.join(__dirname, 'sw.js'),
})
devServer: {
//Service Workers依靠HTTPS,运用DevServer供应的HTTPS功用。
https:true
}
·
在目次下新建sw.js文件,手动写手更新缓存里的代码,。
serviceworker-webpack-plugin为了保证天真性,许可运用都自定义sw.js,构建输出的sw.js文件中会在头部注入一个变量serviceWorkerOption.assets到全局,内里存放着一切须要被缓存的文件的URL列表。
须要将sw.js里的文件列表变量写成动态的
·
var cacheFileList=global.serviceWorkerOption.assets
在main.js代码中注册:
if (navigator.serviceWorker) {
window.addEventListener('DOMContentLoaded',function() {
// 挪用 serviceWorker.register 注册,参数 /sw.js 为剧本文件地点的 URL 途径
navigator.serviceWorker.register('sw.js');
});
}
·
**
注:运用Service Workers手艺须要依靠HTTPS,能够运用DevServer供应的HTTPS功用。DevServer会自动天生一份HTTPS证书。
**