Node.js 13.4.0 发布

Node.js 13.4.0 版本现已发布。其切实更新内容如下:

Progressive Web Applications take advantage of new technologies to
bring the best of mobile sites and native applications to users.
They’re reliable, fast, and engaging.

Changes
deps:

幼功知识

客商第三次采访service worker调控的网站或页面时,service
worker会马上被下载。
ServiceWorker(web worker 的一种)接口
Cache:表示对request/response对象的存储,三个域方可有多个 Cache 对象.
你就要您的代码中拍卖和更新缓存 . 在 Cache 除非彰显地换代缓存,
不然缓存将不会被更新; 缓存数据不会晚点, 除非删除它
Cache.match(request, options卡塔尔(قطر‎再次回到贰个Promise,查找cache中特其他request
Cache.match(request, options卡塔尔相称三个数组对象中的request
Cache.add(request卡塔尔发送央求并将倡议放入cache中,
Cache.put(request, responseState of Qatar将request和response都助长到cache中
欧洲杯竞猜平台 ,Cache.delete(request, options)才cache中搜索乡音的值,并删除重返三个promise,resoleve为true,若是找不到再次回到false
Cache,keys(request, options卡塔尔(قطر‎重临叁个promise,resolve为具有的cache键值

CacheStorage:
对Cache对象的寄放,提供命名缓存的主目录,sw能够透过拜候并保障名字字符串到Cache对象的炫人眼目
caches.open(cacheName卡塔尔国.then(namesState of Qatar{};//展开贰个cache对象

Client: 表示sw client的效率域。

sw.js中的self:这几个主要字表示的是叁个service worker
的实行上下文的多个大局属性(ServiceWorkerGlobalScope),相仿于window对象,不过那个self是职能于service
worker的大局成效域中。

  • 将 npm 更新到 6.13.4
  • 更新 uvwasi(Anna Henningsen)
  • 升级到 libuv 1.34.0(Colin Ihrig)

sw生命周期

欧洲杯竞猜平台 1

image.png

doc:

覆盖率

欧洲杯竞猜平台 2

image.png

  • docs 不赞成使用 http 实现

注意点

  1. 基于https
    能够接收http-server+ngrok协作,当然更简约的使用github。
    2.Service worker是七个登记在钦点源和渠道下的事件驱动worker。实际上
    SW
    在您网页加载成功相近也能捕获已经发出的呼吁,所以,为了减小品质损耗,我们平日直接在
    onload 事件之中注册 SW 就能够。
  2. 成效域难点
    SW 的成效域分化,监听的 fetch 央求也是不均等的。
    比如,大家将注册路由换来: /example/sw.js,那么,SW 前边只会监听
    /example 路由下的保有 fetch 乞求,而不会去监听其余

events:

register

if(navigator.serviceWorker){
    navigator.serviceWorder.register('sw.js')
        .then(registration  =>  {
              console.log(`registered event at scope:${registration.scope}`);
        })
        .cache(err => {
               throw err;
         })
}
  • 添加 captureRejection 选项

install

self.addEventListener('install', function(event) {
  // Perform install steps
});

缓存文件

const cacheVersion = 'v1';
const cacheList = [
    '/',
    'index.html',
    'logo.png',
    'manifest.json',
    '/dist/build.js'
];
self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open(cacheVersion).then(function(cache) {
      return cache.addAll([cacheList]);
    })
  );
});

event.waitUntil(卡塔尔国参数必得为promise,它能够延长二个风云的效应时间,因为大家在张开缓存或许更新的时候很有相当的大可能率会有延迟,而event.waitUntil(卡塔尔国可避防止事件终端。别的它会监听全部的异步promise,一旦有三个reject那么该次event正是退步的,也正是说sw运营战败。当然要是微微公文比不小不佳缓存的道别让它回到就好了:

cache.addAll([cachelist1]);
return cache.addAll([cachelist2]);

http:

fetchEvent

缓存捕获,当发起呼吁的时候将request和response缓存下来(缓存一起初定义的缓存列表)。

self.addEventListener('fetch', (event) => {
    event.respondWith(
        caches.match(event.request)
            .then(response => {
                if(response){
                    return reponse;
                 }
                  return fetch(event.request);
             })
    )
})

那是个较易的格式,event.respondWith(r卡塔尔(قطر‎,包罗呼吁响应代码,能够设置一个参数r,r是一个promise,resolve之后是一个response对象。整段代码意思便是当呼吁三个文书时,要是缓存中已经有了,那么就间接回到缓存结果,不然发起呼吁。

  • 添加 captureRejection 支持
  • llhttp 接收到场不安全的HTTP标头深入深入分析
主题材料:若无缓存大家怎么管理?
  1. 等下一次sw依照路由去缓存;
  2. 手动缓存

http2:

手动缓存
self.addEventListener('fetch', event => {
    event.respondWith(
        caches.match(event.request)
            .then(response => {
                if(response){
                    return response;
                }
                //fetch请求的request、response都定义为stream对象,所以只能读一次这里需要clone一个新的
                let requestObj = event.request.clone();

                return fetch(requestObj)
                            .then(response => {
                                //检测是否成功
                                if(!response || response.status !== 200 || response.type !== 'basic') {
                                    return response;
                                }
                                //如果请求成功,第一要去渲染,第二要缓存
                                //cache.put()也使用stream,所以这里也需要复制一份
                                let responseObj = response.clone();

                                caches.open(cacheVersion)
                                    .then(cache => {
                                        cache.put(event.request, responseObj);
                                    });
                                return response;

                            })
            })
    )
})
  • 为“request”和“stream”事件实行捕获指令
为什么stream只可以读二次?

当可读流读取一回之后大概早已读到stream结尾可能stream已经close了,这里request和response都贯彻了clone接口来复制一份,所以在急需一回接收stream的时候就必要用别本来实现了。

net:

删去旧的缓存

self.addEventListener('activate', evnet => {
    event.waitUntil(
        caches.keys().then(cacheNames => {
            return Promise.all(
                cacheNames.filter(cachename => {
                    if(cachename == cacheVersion){
                        return caches.delete(cachename);
                    }
                })
            ).then(() => {
                return self.clients.claim()
            })
        })
    )
})

大家检查早前封存的sw缓存,还要注意一点就是Promise.all(State of Qatar中不能够有undefined,所以大家对此同一的本子要过滤,因此不利用map,幸免再次回到undefined。
通过调用 self.clients.claim(卡塔尔 得到页面包车型客车调节权,
那样之后展开页面都会选择版本更新的缓存。

  • 实行“connection”事件的抓获谢绝

更新

当您更新了你的sw文件,并修正了cacheVersion之后,刷新浏览器,期望的生成并从未生出,因为即令你改换了缓存版本,不过那个时候旧的sw还在决定总体应用,新的sw并从未收效。此时就必要立异一下sw,有以下格局

  1. registration.update(State of Qatar ,相当于在注册的时候接收适用形式更新

navigator.serviceWorker.register('/sw.js').then(reg => {
  // sometime later…
    reg.update();
});
  1. 使用self.skipWaiting();
    在install阶段选择那个能够使得新的sw立时生效。

self.addEventListener('install', event => {
  self.skipWaiting();

  event.waitUntil(
    // caching
  );
});
  1. 调理手动更新
![](https://upload-images.jianshu.io/upload_images/454462-a63d53b8a30f3e01.png)

image.png

直接点击update就可以。
静心,大家校正了一点文件的时候也要同期立异sw中的缓存版本(cacheVersion)

repl:

manifest文件

本条文件器重是安顿加上到桌面包车型大巴片段主旨消息,举例Logo运转页等。详细可以看这几个https://developer.mozilla.org/zh-CN/docs/Web/Manifest
上边是本身写的二个示范https://github.com/Stevenzwzhai/vue2.0-elementUI-axios-vueRouter/blob/master/pwa/sw.js
照旧拉取这么些系列https://github.com/Stevenzwzhai/PWA-demo

  • 通过渴望评估输入来支撑预览

stream:

  • 加上对 captureRejection 选项的支撑

tls:

  • 对 ‘secureConnection’ 事件实践捕获谢绝
  • 通晓当前密码套件的 IETF 名称

worker:

  • 增添 argv 布局函数增选

详细音信:

(文/开源中国卡塔尔    

相关文章