js构建离线运用

2019年8月24日 179次阅读 来源: 小杆钓小小鱼

内容主要援用自吴浩麟著《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证书。
**

    原文作者：小杆钓小小鱼
    原文地址: https://segmentfault.com/a/1190000014107047
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞